在 HTML5 中，供应了如下图所示的语义化标签，可更直不雅观看到页面构造。
标签解释：
header 标签是头部区域。nav 标签是导航区域。article 标签是内容区域。section 标签是文档中部分内容区域。aside 标签是侧边内容栏区域。footer 标签是底部信息区域。例如，环球科学的首页，用语义化标签划分构造：
这些标签本身只有一个块级元素的特点，若不加入 CSS 样式，没有任何效果。
header 标签是一种具有勾引和导航浸染的构架元素，常日用来放置全体页面或者页面中一个内容块的标题，若是作为全体页面的标题，该当放在页面的起始位置。nav 标签是一个可以用作页面导航的链接组。个中的导航元素可以将页面导航至其他关联页。须要把稳的是并不是须要将一个页面的所有超链接都放到 nav 标签中，只放具有导航意义的超链接即可。section 标签用于对页面上的内容进行分区，可以通过该标签将页面的内容分成多个部分。每个部分之间又有一定的联系。一个 section 标签常日由标题和内容组成。article 标签用来表示页面中独立的、完全的、可以独自被外部引用的内容。它可以是一篇文章、一段评论、或者一段描述。一个 article 常日都包含一个 header 标签作为该文章的标题。aside 标签用来描述当前页面内容的附注信息，它可以是当前页面内容干系的引用、广告、侧边栏等。footer 标签可以作为内容的注脚，例如在网页中添加版权信息等。time 标签可以对日期进行管理操作。它代表某个日期或者是 24 小时中的某个时候。当表示时候的时候，可以利用时区进行显示。例如：
<time datetime="2024-1-14">2024年1月14日</time><time datetime="2024-1-14T20:00">2024年1月14日晚8点</time><time datetime="2024-1-14T20:00Z">2024年1月14日晚8点</time>
搜索引擎会读取 datetime 属性的值，标签中的笔墨是在页面中显示的笔墨。个中 T 代表的这天期和韶光的间隔。z 代表的是韶光利用的是 UTC 标准韶光。
time 标签有一个分外的属性为：pubdate。该属性是布尔类型，常日用在 article 标签中代表该文章的发布日期。新建一个 index.html 文件，在个中写入以下内容：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <article> <header> <h1>文章标题</h1> <p>发布日期：<time datetime="2024-1-14" pubdate>2024年1月14日</time></p> </header> </article> </body></html>
figure 标签规定独立的流内容（包括图像、图表、照片、代码片段等）。
figcaption 标签为figure流内容的标题。figcaption 标签该当被置于 figure 标签的第一个或末了一个子标签的位置。
figure 和 figcaption 标签的利用，语法格式如下：
<figure> <figcaption></figcaption></figure>
在 HTML 中为我们供应了 code 标签，在 <code> 与 </code> 之间便是代码编辑区域。
举个例子，新建一个 index1.html 文件，在个中写入以下内容。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <figure> <pre> <code> var str = "Hello LanQiao"; console.log(str); </code> </pre> <figcaption> <p>这是一段 JavaScript 代码</p> </figcaption> </figure> </body></html>
点击预览页面，效果如下：
从截图可以看出代码部分在 code 标签里的内容，与我们普通笔墨是不一样。在我们的代码里有一对 pre 标签，它是用来格式化文本内容的，保留文本原有的换行格式。
