In the Flexbox and Grid examples you might have noticed HTML elements such as <header> and <footer>. These are more semantic HTML elements. Semantics is the study of meaning and semantic HTML is HTML code that helps give meaning to the content. ie <h1> is a great semantic tag, indicating that the words it contains make up the most important heading in the document.
HTML has a number of very semantics elements. There are tags designed to add more semantics replacing the likes of the unsemantic <div> 'logic division' tag.
<header>
Defined as "a group of introductory or navigational aids". If you have ever used <div id="header"> then you will know how to use <header>. However, unlike <div id="header">, <header> can be used more than once in a document. This is because the <section> can have their own headers.
By default is a block element.
<main>
This represents the dominant "main" content of the <body> of a document. You can use this to replace the likes of <div class="main">.
By default is a block element.
<footer>
Again if you have used <div class="footer"> then you already know where to use this. Like <header> and <nav> you can have muliple footers. This may seem odd but the footers can be associated an <article> or a <section>.
By default is a block element.
Basic Layout
With these three it should now become apparent how a <div> soup of:
... can be more semantic with:
The above three I listed them in the 20 HTML to get started, but there are others you might want to investigate beginning with:
<section>
To be used for 'thematic' content, typically with a header . You may be tempted to swap all your <div>'s for <section>'s but the <section> should not to be used for layout tricks in the same way that <div> is deployed . Use <div> for layout as is non-semantic. You may find <article>, <aside> and <nav> more sematically correct for your specific content. Sections can be nested. News -> Tech News.
By default is a block element.
<article>
Differs from <section> in that the content should stand on its own. As the content is so free standing from the rest of the document it could be syndicated to other sites.
By default is a block element.
<nav>
If you have used <div id="nav"> then you already know where to use this. Like <header> you may choose to have more than one <nav> element on your page.
By default is a block element.
<menu>
An alternature to <ul> when using a list as a menu of items ie:
By default is a block element.
<aside>
Tangentially related content. Possible uses would be a sidebar or information box not essential but supportive to the main content in an <article> or a <section>.
By default is a block element.
<figure>
"to annotate illustrations, diagrams, photos, code listings, etc"
By default is a block element.
<figcaption>
Provides figure captions for use with <figure>. Is a child of <figure>.
By default is a block element.
<mark>
To be used to highlight text of particular interest to the user after they have performed some task such as a search. Not to be used for generic highlighting.
By default is a inline element.
<progress>
Most likely to be used with Javascript to show progress of a process.
By default is a inline-block element.
<meter>
For displaying values in a range. Has attributes 'mid', 'max', 'high', 'low' and 'value'. The 'mid' / 'max' attributes defined the range. The 'high' / 'low' attributes set benchmarks and 'value' sets the value.
By default is a inline element.
<time>
For displaying times and dates.
By default is a inline element.