By Troy McClure. Published
This is an example web page explaining HTML5 semantic markup.
HTML5 includes several “sectioning content” elements that affect the document outline.
The <header> element is one such sectioning
element.
And so is the <footer> element.
The <time> element is semantic, but it’s not
sectioning content.
Semantic HTML: the idea that all your HTML markup should convey the underlying meaning in the content, rather than its appearance. Sectioning elements are designed to be like div containers, but with clearer names and meanings/uses. Defining graphical styles with CSS is how we convey the structure of a web page to humans. By marking it up with header, article, figure, and other HTML sectioning elements, we’re able to represent those visual styles to machines, as well.
Each h1 element (and any other h elements, from 1 to 6) creates a new section in the document outline, and any less prominent headings that follow it are considered subsections under that top-level heading.
Article element: represents an independent article, should only wrap contents that cna be plucked out of the page and shown in a totally different context. Articles are like a mini web page within your document, with their own header, footer, and doc outline completely isolated from the rest of the site. A web page can have more than one article element.It's a way to merge multiple HTML files into a single document without confusing the browser.
Sections are like articles, they just only make sense in the context of their home doc. An outside app won't try to pull the section out of the page and display it on its own. They're clear ways to define sections in a doc outline. Section elements tell the doc to define its outline based on the nesting structure of the section elements, rather than other things. So each section can have its own set of heading levels independent from the rest of the page. But you shouldn’t use the Nav lets you mark up navigation sections, which makes search engines happy. Headers denote intro content, like the name, logo, and main navigation of the site. They're only associated with the nearest sectioning element, so you can have more than one in different places. Footers come at the end of an article. They act like headers and are associated with the nearest sectioning element. The footer inside the article element is only for the contents of that article. The sec
Asides remove/make things look different from the main text, like adverts. When used outside an article, an aside is associated with the page as a whole (much like header and footer). This makes it a good choice for marking up a site-wide sidebar. Divs are good for basic layout purposes. When debating between a semantic element or a div element, use a div element instead. The time element represents either a time of day or a calendar date. Providing a machine-readable date makes it possible for browsers to automatically link it to users’ calendars and helps search engines clearly identify specific dates. The machine-readable date is defined in the datetime attribute. An easy way to remember the date format is that it goes from largest time period to smallest: year, month, then date. Note that even though the year isn’t included in the human-readable text, this tells search engines that our article was published in 2017. It’s possible to include times and time zones inside of datetime, too. The time itself is in 24-hour format, and the -0800 is the time zone offset from GMT (in this case, -0800 represents Pacific Standard Time). Address element: defines contact info by embellishing stuff with metadata Last, but certainly not least, are the figure and figcaption elements. The former represents a self-contained “figure”, like a diagram, illustration, or even a code snippet. The latter is optional, and it associates a caption with its parent figure element.
A common use case for both of these is to add visible descriptions to the img elements in an article. The alt attribute is closely related to the figcaption element. alt should serve as a text replacement for the image, while figcaption is a supporting description displayed with either the image or its text-based equivalent.’s when appropriate. Sections should contain at least one heading so it knows what to call itself. Just use sections as descriptive div tags for implicitly defined sections of the page.