语义化元素的产生，是为使页面呈现较好的内容结构，能够一目了然地知道每一部分所在区域的功能主体，将页面相关元素集中在一起，形成页眉、文章、页脚、侧边栏等元素块，如H5标准以前对头部元素常给div添加id或者class值为header，所以就引申出<header>元素。在命名时，头部通常使用header，导航使用nav，文章使用article，侧边使用sidebar，页脚使用footer。
在HTML5中引入一些新元素对这些部分进行分割，如<header>表示头部，导航<nav>和页眉、logo等放在里面，文章主体使用<article>，侧边栏使用<aside>，页脚部分放在<footer>里面。使用这些元素能够直接方便描述页面结构，形成标准减少开发人员差异化，有利于SEO和搜索引擎建立良好沟通，爬虫依赖于标签来确定上下文和各个关键字，这样能使爬虫抓获更加准确有利的信息，同时，也方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），例如阅读器允许用户忽略页眉和页脚的部分。
HTML5新增的语义化元素有：header、nav、main、section、article、aside、footer、figure、figcaption、mark、details、summary、time。
首先例举一个较为完整的结构，这里只关心HTML部分，不考虑实际样式：
1 <body> 2 <header> 3 <h1>一级标题</h1> 4 <nav> 5 <ul> 6 <li><a href="" class="home">首页</a></li> 7 <li><a href="">导航1</a></li> 8 <li><a href="">导航2</a></li> 9 <li><a href="">导航3</a></li> 10 <li><a href="">导航4</a></li> 11 </ul> 12 </nav> 13 </header> 14 <section class="content"> 15 <article> 16 <figure> 17 <img src="images/image1.jpg" alt="one" /> 18 <figcaption>one</figcaption> 19 </figure> 20 <hgroup> 21 <h2>二级标题1</h2> 22 <h3>三级标题1</h3> 23 </hgroup> 24 <p>第一段正文。</p> 25 </article> 26 <article> 27 <figure> 28 <img src="images/image2.jpg" alt="two" /> 29 <figcaption>two</figcaption> 30 </figure> 31 <hgroup> 32 <h2>二级标题2</h2> 33 <h3>三级标题2</h3> 34 </hgroup> 35 <p>第二段正文</p> 36 </article> 37 </section> 38 <aside> 39 <section class="addnav"> 40 <h2>侧栏导航</h2> 41 <a href="">侧导航1</a> 42 <a href="">侧导航2</a> 43 <a href="">侧导航3</a> 44 <a href="">侧导航4</a> 45 </section> 46 <section class="addcontent"> 47 <h2>侧栏内容</h2> 48 <p>侧栏描述</p> 49 </section> 50 </aside> 51 <footer> 52 © 2017 me 53 </footer> 54 </body>
元素<header>和<footer>在上面的示例中是作为一个网站页面顶部的主页眉和底部的主页脚，但实际上也可以用作文章和部分的页眉页脚，<header>之中用于放置标题、日期、导航等内容，而在页脚中可以放导航、隐私政策、合同条款、分享链接、注册商标、版权等内容。
<nav>导航元素用于包含网站的主要导航块，nav实际关联的单词是navigation，上面的示例中，<nav>元素是放置在<header>之中，但是<nav>元素不仅限用于<header>之中，考虑到网站结构和权重，应当合理使用这一元素。
<article>文章元素可以是任何一个独立的内容，如果一个页面容器包含了多篇文章，那么每个单独的文章都应当属于其专属的<article>元素中。<article>元素可以彼此嵌套，例如一篇博客日志位于一个<article>元素中，而这篇日志的每条评论位于其子<article>元素中。
<aside>附加信息元素，当位于<article>元素中时，它包含与当前文章相关的信息，而不必涉及页面的整体信息，比如文章的注释、引述、生词列表等。而当<aside>元素在<article>元素之外时，该元素就包含了整个页面的相关内容，如同上面的代码包含了指向网站其他部分的链接，也可以包含最新的日志列表、搜索框、返回顶部和底部的按钮等。
页面中要将相关的内容集中到一块可以使用<section>部分元素，并且该元素往往还带有单独的标题。一个网站往往包含了不同部分，每个部分就可以使用<section>元素集中，这些内容当然也可以是<article>元素。
<hgroup>标题组可以将一个或者多个<h1>到<h6>的标题元素组合到一起，将它们当成一个标题看待。就我而言，对于这个元素并没有发现太大的好处，就上面的代码来看，实用性较小，并且可以被替代。当然，对于大量需要组合主标题和子标题的情况，<hgroup>还是可以的。
上面代码中使用了<figure>和<figcaption>来插入图片，其实这一结构可以在文章正文中引用任何内容，如视频、图形、图表、代码等，但这些内容不能是页面不可或缺的一部分，如文章主体，其中<figcaption>用于对插入内容的文本说明。
分级元素<div>仍然是组合元素的重要方式，当前面的元素都不适用于相关元素的组合时，就应该适用这个元素来作为包装容器。
<details> <summary>Some details</summary> <p>More info about the details.</p> </details> <details open> <summary>Even more details</summary> <p>Here are even more details about the details.</p> </details>
上面是第一组是默认情况的简称和详情元素，是一个折叠面板的效果，页面只会展示summary的内容，只有打开后才会完全显示里面所有的内容。details元素的open属性，就是默认打开的意思。
使用语义化元素应当注意引入初始化CSS，以兼容不支持HTML5语义化元素的浏览器。