Part 7 of Internetting Is Hard. This time we look at the semantics of HTML, which explores the structure of HTML as interpreted by computers (search engines, screen readers, etc).
Outline
You can use HTML5 outliner to look at the structure.
This determines the parent-child relationship of the headers by the relativity of the number on the headers (eg: see below).
The <article> element tags where an article begins and ends and is useful for articles aggregators like ‘Flipboard’ to grab an article from your site.
Section
The <section> element is similar to ‘article’, but is generic and has no special meaning. Why use it: to avoid div soup and section off a ‘container’ of elements. It also overrides the default sectioning structure (using the nesting structure instead of the section headers).
But you should avoid abusing the <section> element this way because some machines don’t properly interpret the <section> element. Use it as a more descriptive <div> wrapper.
IMPT: Section elements should have at least one header or it will be untitled.
Nav
<nav> tags navigational elements. For eg, your links to related pages or other content.
Header
The <header> element (not to be confused with <h1>,<h2>, etc) refers to introductory content (nav, logo, author’s info, etc). Best practices: wrap <nav> and logo in <header>.
It is associated with the nearest sectioning element, usually <body>, <article> or <section>. You can have multiple headers. For eg, you should have the author’s info of an <article> be in a <header>.
Footer
<footer> is similar to <header> except it’s at the end, and commonly used for copyright info, author’s notes, footer navs.
They are also associated with the nearest sectioning element.
Asides
<aside> denotes extra information that you want to be shown on your website but not grabbed with the content by aggregators, etc. For instance, ads in an article.
When used outside an <article>, <aside> is associated with the page as a whole (like <header> or <footer>). It can be used for a sitewide sidebar.
Div for layouts
When semantic sectioning isn’t appropriate for the content, you can use <div> containers for layout purposes. For eg: centering the page with auto margin.
It is particularly useful for flexboxes.
Date and Time
Because it comes in many forms, there’s a <time> element that’s machine-legible.
<time datetime='2017-1-3'>January
3rd</time>goes from longest to shortest time period (year, month, day)
Address
<address> is similar to <time> in that it adds metadata. It defines contact information for the article or document in question. By default, it’s is <em>. Don’t use it for arbitrary addresses.
Figures and Captions
<figure> refers to figures like illustrations, diagrams, even code snippets. <figcaption> is optional, but it associates a caption with the figure. A common usage is to add descriptions to images.
<alt> is used as text replacement for images, and <figcaption> is displayed with images as additional description.
For SEO purposes, <figcaption> can replace <alt>.
Legacy
Semantic HTML elements are HTML5. So for earlier browsers, add this code:
section, article, aside, footer, header, nav {
display: block;
}
This makes those elements display like div block elements.
Additional resources (SEO):
http://schema.org/docs/gs.html
https://dev.twitter.com/cards/getting-started
https://developers.facebook.com/docs/sharing/webmasters#markup
Stuff I Have Learnt 