### [HTML5的核心标签用法详解：包含语义化结构、表单操作等知识，并配有常用标签示例和SEO技巧](https://www.huociguo.com/article/1918) **Published:** 2026-10-08T16:32:43 **Author:** 米了 **Excerpt:** 页面的美观程度是设计师的责任，但是要让人们看懂的话就要靠标签了。HTML5已经存在很久了，但是用得好的网站还是… 页面的美观程度是设计师的责任，但是要让人们看懂的话就要靠标签了。 HTML5已经存在很久了，但是用得好的网站还是很少。打开很多网站的源代码会发现里面到处都是div套div的现象，并没有header、main或者article之类的结构，搜索引擎只能靠猜来判断出什么才是主要内容、什么又是广告区。这样的方式短期内看不出什么问题，但是从长远角度看它会影响抓取效率和收录速度。 ![](https://api.huociguo.com/wp-content/uploads/2026/10/20261009003225272-08168bdfd8-1.png "20261009003225272-08168bdfd8-1") 根据“页面由骨架到交互”的实际构造方式来解析HTML5常用且有用的、对搜索引擎优化有好处的重要标签。 **语义结构比用div包裹div更值得重视的原因是什么？** div是一个普通的容器，没有特殊的意义，但是像header、nav、main、article、footer之类的语义标签就带有自己的含义，并且能够被浏览器、搜索引擎和读屏软件等等自动识别出来。可以得到的好处有四点： - 爬虫在爬取网页时能够很快地定位到文章的核心内容，并且不受外界因素的干扰。 - 用给文章添加标签的方法来进行快速的查找，并且改善用户的使用便利。 - 用CSS选择器来减少一些类的话就可以降低一下维护的成本了。 - 如果页面设计比较简单的情况下，那么改变风格就不会对整个系统产生影响。判断标准就是能够单独存在的是article，有一组内容并且有个主题的是section，而毫无意义的部分则用div来表示。 **页面由doctype、html以及head三部分组成** ```html HTML5核心标签用法大全：从语义结构到表单交互详解 ``` 第三点： - `` 应该放于文件开头处，用来让浏览器用正常的模式去解析这个页面，否则在IE等一些老旧的浏览器里就会呈现出奇怪的效果，同时整个页面的布局也会变得很混乱。 - 设定好页面使用的语言后，会对分词以及语音播放产生一定的影响。 - `title`和`description`在百度收录的时候权重最高，因此要把最重要的内容放到最前面来写，并且不能超过30个字；`description`要尽可能多地填充信息，但是不可以超过150个字符，在此过程中要自然地加入关键词，并且不能重复使用。 ```html

站点名称

正文标题

小节标题

``` 把容易出现问题的地方都解释清楚： - 可以放置在网页顶部或者作为文章的一部分来充当文章的标题，并且没有数量上的限制。 - `

`只包括主导航栏，在网页底部所加的友情链接不能放入其中去，否则会给搜索引擎造成不良影响。 - `

`标签只允许用一次，在其中的内容应该是本页面独有的主要信息，不包含侧边栏、导航以及页脚等等。 - `

`是指能够独立传播的内容，一篇帖子、一条评论都算作一个。 - `

` 要使用的话必须有标题，没有的话就用`

`。 - `

`用于放边栏、推荐的位置或是补充说明等内容。 - `

`也可以用在文章里表示出作者以及发布时间等信息。标题层级常常被人们忽略掉，但是它对排名的影响很大。 - `h1`标签每页只能用一次，通常用来表示文章的大标题。 - 不可以跳过一个层级去写标题，在H2下面要用H4。 - 用小标题和长尾词来优化百度搜索结果。 ```html HTML5核心标签 重要内容 语气强调 2026年10月9日

语义标签层级结构

``` `strong` 表示内容的重要程度，并不是强调的意思，在外面加上 `rel="noopener"` 是好的做法，这样就不会有新的窗口通过 window.opener 来反向操作原来的页面了。`time` 标签里的 `datetime` 属性是为了让机器解析用的，其中的文字则是给人看的，“机器可以读懂而且人也能够理解”的写法在 HTML5 里很常见。 **多媒体标签：图片、声音、影像、图形** ```html

``` 有关页面加载以及搜索引擎收录的一些小问题： - `alt` 属性必须填写好，因为图片的搜索流量主要依靠它来实现，因此要写得十分具体，并且不能包含与主题无关的内容。 - 设置了宽度、高度之后就可以防止图片加载的时候出现布局错位的情况了（CLS）。 - `loading="lazy"` 只适用于第一屏后面的图片，不能用在第一屏上，否则会损害LCP。 - 使用 `picture` 和 `source` 来降低图片的质量，也就是从avif到webp再到jpg的过程。 - Canvas可以用像素来绘制图形，在图表以及游戏当中经常用到；而SVG是矢量格式，在任何大小的情况下都不会出现模糊的情况，在图标或者标志等场合下特别适用。 **表单交互用到的主要标签有：form、button** 表单是HTML5最大的变化之一，新增加的输入类型对移动设备上的用户产生了很大的影响。 ```html ``` 需要注意的事项包括： - 每个表单项都需要有一个名称（name），否则它就不会被加入到表单里并且随同表单一起发送给服务器。 - `label` 的 `for` 属性与控件的 `id` 是一致的，单击文字即可定位到对应的元素上，在触摸屏上效果则不同。 - 使用`type="email"`, `type="tel"`, `type="number"`等属性来激活各种移动设备上的不同输入法，进而提升转化率。 - `placeholder`不能替代`label`，在填入数据后就会被清空。 - `button` 元素默认是 submit 类型，在不想要它作为提交按钮的时候，要给它添加一个 `type="button"` 属性。 - 原生校验属性 `required`、`pattern`、`min`、`max`、`maxlength` 可以过滤掉大部分不合法的输入数据，复杂的逻辑判断则交给JavaScript来完成。 - 使用 datalist 来代替下拉框更加方便一些。 **用表格或者图形的方式去展示数据** ```html

常用HTML5标签速查
标签	作用
main	页面主体

``` 给表格添加一个`caption`标签，并且在`th`元素中加上`scope`属性来表明它代表的是列标题还是行标题，这样盲人可以使用屏幕阅读器把单元格与其对应的标题进行关联起来。 **容易被忽略的速度以及收录中的小细节** - 是移动端适配的入口，没有它的话就会被视为PC端的内容。 - 第一页的内容最好不要使用JavaScript进行动态加载，在静态HTML里出现文字很容易被找到。 - 图片和视频旁边都有文字说明，但是爬虫不能获取到媒体的内容，只能获得旁边的文字信息。 - 结构稳定、层次清晰的网站，在提交和索引的时候速度也会比较快，这是经过长时间的观察后得到的一个规律。 **经常踩到的坑** 1. 网页上有多个H1标题，并且它们之间不存在任何主次关系。 2. 用div做按钮的时候，就无法通过键盘来选中它了，这样就造成了无障碍的问题。 3. label不加for的话，在文本上就不会有反应了。 4. 如果表单控件中没有设置name属性的话，那么提交后就会得到一个空值。 5. 没有alt属性值的图片不能被搜索引擎抓取。 6. 如果把div放在p里面，浏览器会自动分割标签，导致结构杂乱无章。 7. 如果视频有自动播放功能并且没有静音设置的话，大多数浏览器都不会让它播放。标签其实很简单，但是要符合语义来选择标签才是对的。HTML5的核心标签语法这几年几乎没有变化了，虽然框架在不断迭代更新，但是这些标签依旧稳稳地站在这里。做好了页面布局、填好了表单、加上了各种属性之后，收录和用户体验自然就顺理成章了，并不是要刻意去追求。 **Categories:** HTML5 ---