HTML
0001 Jun 1

[TOC]

# Semantics

## | Syntax | Dictionaries |

| RDFa | Schema.org |
| Microdata | OpenGraph |
| Microformats | Microformats |
| JSON-LD | FOAF |

## Microformats

• + easy
• - little dict
• - narrow HTML

## Microdata

• - unknown spec future
DIct: schema.org goofrelations LRMI

• + rich
• - complex
• - little use

Appear 2010

• + easy
• + supported
• - not in use

## OpenGraph

Appear 2010

• + easy
• - little dict

• + Active
• + Rich dict

## What to use

• OpenGraph
• Schema.org + HTML Microdata
• Check using validator

nav article section aside
WAI-ARIA
HTML5 outliner

section for hierarchy

not in structure:

blockquote figure details td


## Flexfox

.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


# Elements

## picture

### Retina

    <img src="400.png" width="400"
srcset="600.png 1.5x"
srcset="800.png 2x"
srcset="1600.png 3x">


    <img src="400.png" width="400"
srcset="400.png 400w,
800.png 800w,
1600.png 1600w"
sizes="(min-width:600px) 50vw, 100vw">

img { width:100%
max-width:100%
}

@media (min-width:600px) {
img { width: 50% }
}


### Кадрирование

    <picture>
<source media="(min-width:1024px)"
srcset="crowd.png">
<source media="(min-width:640px)"
srcset="group.png">
<img src="face.png">
<picture>


### Multiple formats

    <picture>
<source type="image/webp"
srcset="crowd.webp">
<source type="image/vnd.ms-photo"
srcset="picture.jpxr">
<img src="picture.jpg">
<picture>


## abbr

<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p>


• tr
• th
• td

## html

• Contains only <head>, <body>
• Attributes: lang

• No more than 1 <title>

## meta

• charset

### name: attribute

• author
• description
• generator
• keywords

<link href="some.css" media="all" rel="stylesheet" type="text/css" />


## article

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

The schema.org microdata vocabulary can be used to provide the publication date for an article element, using one of the CreativeWork subtypes.

## section

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks.

A nav element doesn’t have to contain a list, it can contain other kinds of content as well.

## aside

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

## h1, h2, h3, h4, h5, h6

The first element of heading content in an element of sectioning content represents the heading for that section.

Is intended to usually contain the section’s heading (an h1–h6 element).
Can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
The header element is not sectioning content; it doesn’t introduce a new section.

The footer element is not sectioning content.
Conatins no header, footer, or main element.
Represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

represents the contact information for its nearest article or body element ancestor.

## p

List elements (in particular, ol and ul elements) cannot be children of p elements.
Paragraph, in HTML terms, is not a logical concept, but a structural one.

## hr

represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

## pre

represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

## blockquote

represents a section that is quoted from another source.
html <blockquote cite="http://developer.mozilla.org"> <p>This is a quotation taken from the Mozilla Developer Center.</p> </blockquote> 

## ol

represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.
The items of the list are the li element child nodes.

## ul

represents a list of items, where the order of the items is not important

## dl

encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

element represents an association list consisting of zero or more name-value groups (a description list).

### dt

represents the term, or name, part of a term-description group in a description list.

### dd

represents the description, definition, or value, part of a term-description group in a description list

## figure

represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

## hgroup - not use

removed from W3C spec

# Attributes

• class
• id
• contenteditable

## Custom data attributes

data-*


# Basics

    <!DOCTYPE html>
<html lang="en">
<title>Sample page</title>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>


## Sections

Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.

Back to posts