Thanks to the great online course for the 70-480 Microsoft certificate we can have a look of the semantic structure of HTML4

… and compare it with HTML5

What we used to define by attribute:

<div id="header">...</div>
<div id="nav">...</div>
<div class="article">
   <div class="section">...</div>
</div>
<div id="sidebar">...</div>
<div id="footer"> ...</div>

is now a tag:

<header>...</header>
<nav>...</nav>
<article>
    <section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>

Much more elegant, isn’t it? 🙂