Semantics is one of the most distinctive features of the Web Platform versus other application platforms. Developers usually ignore or de-prioritize such feature but the mastery of it can bring many benefits to your projects.
The Web is text and text has a meaning. Ultimately the content that our browsers read is pure text. Web sites and web applications have been created in an ecosystem where text based content is linkable, searchable and mashable. In the open web scenario our content can be shown, fed and remixed by third parties, search engines and accessibility tools. All these benefits don’t come for free. Automated tools can only do half of the job at recognizing the nature of the content. The better job the developer does at marking the right semantics of the content the easier will be for the rest of the agents to deal with it.
With HTML4, developers used their own favorite attribute names to style page elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, … This made it impossible for search engines to identify the correct web page content.
With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.
Here are some of the semantic elemts in HTML5:
<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>
The <section> element defines a section in a document, it might contain 2 pargraphs, a picture, links but the must be rrlated to each other.
The <article> element specifies independent, self-contained content like post or article body.
The <header> element specifies a header for a document or section.
The <footer> element specifies a footer for a document or section.
The <nav> element defines a set of navigation links.
The <aside> element defines some content aside from the content it is placed in (like a sidebar).