HTML5新特性之语义化布局标签，摆脱传统div布局

言

曾几何时，前端的页面布局一直采用div，但是div本身并没有实际的意义，它只是定义了一个区域，而且这个区域是做什么的浏览器并不知道，不利于页面的SEO优化。

因此HTML5中新增的语义化标签就很好的解决了这个问题，当然它还有其他一些好处，接下来我们就一起来看看吧。

HTML5

语义化标签的优点

即使在没有CSS的支持下，浏览器依然能呈现出良好的内容结构。
有利于SEO，语义化的标签更有利于爬虫去解析更多有效信息。
跨设备体验，不同设备都支持语义化标签，那么即使在不同设备下依然可以有无缝体验。
便于代码开发和维护，语义化可以增加代码的可读性，让团队成员可以更好理解彼此的代码意图。

HTML5新增的语义化标签

那么在HTML5中新增了哪些利于页面布局的HTML5标签呢？

我们先通过以下这张图来看看。

HTML5新增语义化标签

header标签

header标签表示页面或一个区域(section)的页眉部分，通常在里面包含h1-h6标签来使用。

我们直接通过代码来看看在浏览器上的效果。

header标签效果

footer标签

footer标签和header标签类似，表示页面或一个区域(section)的页脚部分，通常会将网站的证书，许可，版权协议等内容放在这块。

footer标签

hgroup标签

hgroup标签一般用于h1-h6标签的组合，比如主标题，副标题，三级标题的组合情况。

我们通过以下代码段来看看其代码组织形式。

hgroup标签

需要注意的一点是，如果需要使用hgroup标签则保证在hgroup标签里至少有两个h标签，如果只有一个h标签，则应该去掉hgroup标签。

nav标签

nav标签主要用于定义页面的导航部分，例如页面或者section中的侧边目录栏。

其使用方式如下代码段所示。

nav标签

aside标签

aside标签一般会指定网页的相关内容，友情链接等附注性的东西，类似于广告也可以使用aside标签。

main标签

main标签定义一个页面的主要内容，在一个页面中只能使用一次。

article标签

article标签表示的是一个独立完整的内容区域，比如一张报纸的某个独立版块。

在article标签内部可以包含其他语义化标签，其基本使用如下所示。

article标签

section标签

section标签表示的是文档中内容的分节或分段，上述的article，nav或者aside其实都可以看做特殊的section标签，如果能用article，nav，aside标签，最好不要用section标签。

section标签与与article标签可以互相嵌套，需要视具体情况而定。

结束语

如果你的布局还是只有div，那么看完了今天这篇文章后完全可以尝试下新的HTML5标签噢。

感兴趣的同学可以加下我自己创建的Q群，大家相互学习交流，我也会尽力维护好群环境，群号如下所示。

号码

程序员web前端分享常见html5语义化标签，我们知道，创建结构清晰的页面可以建立良好的语义化基础，也降低了使用css的难度，下面总结了一些常用的语义化标签，有空慢慢更新，欢迎大家补充

语义化HTML：用最恰当的HTML元素标记的内容。

优点：1 提升可访问性； 2 SEO； 3 结构清晰，利于维护；

（HTML5旧的行内元素都被归类为短语内容）

通用容器：div——块级通用容器；span——短语内容无语义容器。

如果语义不合适，也不要霸王硬上弓，=。。 =老实的用div吧。

< title></title>：简短、描述性、唯一（提升搜索引擎排名）。

搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。

<hn></hn>：h1~h6分级标题，用于创建页面信息的层级关系。

对于搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是h1。

<header></header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。

也适合对页面内部一组介绍性或导航性内容进行标记。

<nav></nav>：标记导航，仅对文档中重要的链接群使用。

Html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

<main></main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<article></article>：包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。

article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

<section></section>：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。

如果只是为了添加样式，请用div！

<aside></aside>：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。

如果放在main内，应该与所在内容密切相关。

<footer></footer>：页脚，只有当父级是body时，才是整个页面的页脚。

<small></small>：指定细则，输入免责声明、注解、署名、版权。

只适用于短语，不要用来标记“使用条款”、“隐私政策”等长的法律声明。

<strong></strong>：表示内容重要性。

<em></em>：标记内容着重点（大量用于提升段落文本语义）。

<mark></mark>：突出显示文本（yellow），提醒读者。

在HTML5中em是表示强调的唯一元素，而strong则表示重要程度。

<b></b>：出于实用目的提醒读者的一块文字，不传达任何额外的重要性

<i></i>：不同于其他文字的文字= =|||这个翻译真的是······

<figure></figure>：创建图（默认有40px左右margin）。

<figcaption></figcaption>：figure的标题，必须是figure内嵌的第一个或者最后一个元素。

<cite></cite>：指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。

只用于参考源本身，而不是从中引述。

<blockquoto></blockquoto>：引述文本，默认新的一行显示。

<q></q>：短的引述（跨浏览器问题，尽量避免使用）。

可以对blockquoto和q元素使用cite属性（不是cite元素！），对搜索引擎自动化工具有用。cite=“URL”引述来源地址。

<time></time>：标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。

不再相关的时间用s标签。

<abbr></abbr>：解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。

abbr[title]{ border-bottom:1px dotted #000; }

<dfn></dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

<address></address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。

如果提供整个页面的作者联系信息，一般放在页面级footer里。不能包含文档或者文档等其他内容。

<del></del>：移除的内容。

<ins></ins>：添加的内容。

少有的既可以包围块级，又可以包围短语内容的元素。

<code></code>：标记代码。包含示例代码或者文件名（< < > >）

<pre></pre>：预格式化文本。保留文本固有的换行和空格。

<meter></meter>：表示分数的值或者已知范围的测量结果。如投票结果。

例如：<meter value="0.2" title=”Miles“>20%completed</meter>

<progress></progress>：完成进度。可通过js动态更新value。

着互联网技术的发展，网页内容变得越来越丰富。HTML5 作为标记语言的最新标准，不仅提供了更多的功能，还引入了一系列语义化标签。这些标签使得网页内容的结构更加清晰，有助于搜索引擎优化（SEO），并提高了网站的可访问性。

语义化标签的优势

语义化标签通过提供更具描述性的元素名称，使得文档内容的结构更加明确。这样做有几个明显的优势：

提高可读性：代码的可读性得到提升，其他开发者（或未来的你）可以快速理解页面结构。
SEO 优化：搜索引擎能够更好地解析网页内容，提高网页在搜索结果中的排名。
支持无障碍访问：语义化标签有助于屏幕阅读器正确解读网页内容，使网站对视障用户更加友好。

语义化标签实例

下面，我们将通过几个例子来展示如何使用HTML5的语义化标签来构建网页。

示例1：文章结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 语义化标签示例</title>
</head>
<body>

<article>
    <header>
        <h1>HTML5 的新特性</h1>
        <p>发布日期：2023-12-17</p>
        <p>作者：张三</p>
    </header>
    <section>
        <h2>引入了新的语义化标签</h2>
        <p>HTML5 定义了一系列新的元素，用于更好地描述文档的不同部分...</p>
    </section>
    <section>
        <h2>表单控件的增强</h2>
        <p>HTML5 提供了更多的表单控件，如 date、time、email 等...</p>
    </section>
    <footer>
        <p>版权所有 © 2023 张三</p>
    </footer>
</article>

</body>
</html>

在这个示例中，我们使用了<article>、<header>、<section>和<footer>等标签来构建一个文章的基本结构，使得文章的主体、标题、各个章节和尾注的语义更加明确。

示例2：导航菜单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>导航菜单示例</title>
    <style>
        /* 重置ul和li的默认样式 */
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: #333;
            text-align: center;
        }
        
        nav ul li {
            display: inline-block;
        }
        
        /* 设置链接的基本样式 */
        nav ul li a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        
        /* 鼠标悬停时的样式 */
        nav ul li a:hover {
            background-color: #555;
        }
    </style>
</head>
<body>

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系我们</a></li>
        <li><a href="#about">关于我们</a></li>
    </ul>
</nav>

</body>
</html>

使用<nav>标签定义导航链接集合，这有助于搜索引擎和辅助技术确定页面中的导航部分。

在这个示例中，做了以下几点样式设置：

移除了ul和li的默认样式（比如列表前面的小圆点），并给导航栏设置了一个深色背景。
将li元素设置为inline-block，使其水平排列。
为链接（a标签）设置了基本的样式，包括背景色、字体颜色、内边距等，以及鼠标悬停时的背景色变化。

示例3：侧边栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>侧边栏示例</title>
    <style>
        /* 设置侧边栏的基本样式 */
        aside {
            width: 250px; /* 侧边栏宽度 */
            padding: 20px; /* 内边距 */
            background-color: #f4f4f4; /* 背景色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            position: fixed; /* 固定位置 */
            top: 0; /* 顶部对齐 */
            left: 0; /* 左侧对齐 */
            height: 100%; /* 高度100% */
        }

        /* 设置标题的样式 */
        aside h2 {
            color: #333; /* 字体颜色 */
            margin-bottom: 20px; /* 与下方内容的间距 */
        }

        /* 重置列表的默认样式，并设置列表项样式 */
        aside ul {
            list-style: none; /* 移除列表项的默认样式 */
            padding: 0; /* 移除默认内边距 */
            margin: 0; /* 移除默认外边距 */
        }

        aside ul li {
            margin-bottom: 10px; /* 列表项之间的间距 */
        }

        /* 设置链接的基本样式 */
        aside ul li a {
            text-decoration: none; /* 移除下划线 */
            color: #333; /* 字体颜色 */
            font-weight: bold; /* 字体加粗 */
        }

        /* 鼠标悬停时的样式 */
        aside ul li a:hover {
            color: #007bff; /* 鼠标悬停时的字体颜色 */
        }
    </style>
</head>
<body>

<aside>
    <h2>相关文章</h2>
    <ul>
        <li><a href="#">HTML5 基础</a></li>
        <li><a href="#">CSS3 新特性</a></li>
        <li><a href="#">JavaScript 高级程序设计</a></li>
    </ul>
</aside>

</body>
</html>

<aside>标签通常用于包含页面主内容之外的内容，如侧边栏，它可以包含相关链接、广告、站点地图等。

示例4：页脚信息

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页脚信息示例</title>
</head>
<body>

<footer>
    <p>联系方式：example@example.com</p>
    <p>地址：中国某地某街道123号</p>
    <p>版权所有 © 2023 HTML5前端工程师</p>
</footer>

</body>
</html>

<footer>标签定义了文档或节的页脚，通常包含作者信息、版权信息、联系信息等。

示例5：主要内容区域

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主要内容区域示例</title>
</head>
<body>

<main>
    <article>
        <h1>HTML5 语义化标签</h1>
        <p>HTML5 提供了许多新的元素，用于更清晰地描述你的内容...</p>
    </article>
    <article>
        <h1>HTML5 表单特性</h1>
        <p>HTML5 为表单输入提供了多种新的类型，如 color、date 等...</p>
    </article>
</main>

</body>
</html>

<main>标签用于指定文档的主要内容，它应该是文档中最重要的内容区域，通常不包括那些在整个站点中重复出现的内容（如导航链接）。

通过上述示例，我们可以看到HTML5语义化标签如何使网页结构更加清晰，并为搜索引擎优化和可访问性提供了支持。随着技术的发展，我们有责任编写更高质量的代码，不仅为了自己，也为了创建一个更好的网络环境。

在线咨询

上一篇：HTML <a> 标签
下一篇：使用CSS3的新特性完成一个翻书的动画效果，来学习一下吧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商