HTML5的核心标签用法详解：包含语义化结构、表单操作等知识，并配有常用标签示例和SEO技巧

页面的美观程度是设计师的责任，但是要让人们看懂的话就要靠标签了。

HTML5已经存在很久了，但是用得好的网站还是很少。打开很多网站的源代码会发现里面到处都是div套div的现象，并没有header、main或者article之类的结构，搜索引擎只能靠猜来判断出什么才是主要内容、什么又是广告区。这样的方式短期内看不出什么问题，但是从长远角度看它会影响抓取效率和收录速度。

根据“页面由骨架到交互”的实际构造方式来解析HTML5常用且有用的、对搜索引擎优化有好处的重要标签。

语义结构比用div包裹div更值得重视的原因是什么？

div是一个普通的容器，没有特殊的意义，但是像header、nav、main、article、footer之类的语义标签就带有自己的含义，并且能够被浏览器、搜索引擎和读屏软件等等自动识别出来。

可以得到的好处有四点：

爬虫在爬取网页时能够很快地定位到文章的核心内容，并且不受外界因素的干扰。
用给文章添加标签的方法来进行快速的查找，并且改善用户的使用便利。
用CSS选择器来减少一些类的话就可以降低一下维护的成本了。
如果页面设计比较简单的情况下，那么改变风格就不会对整个系统产生影响。

判断标准就是能够单独存在的是article，有一组内容并且有个主题的是section，而毫无意义的部分则用div来表示。

页面由doctype、html以及head三部分组成

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5核心标签用法大全：从语义结构到表单交互详解</title>
  <meta name="description" content="系统梳理HTML5核心标签的用法，涵盖语义结构标签、文本标签、多媒体标签与表单交互标签，附可复制代码示例与SEO写法建议。">
</head>

第三点：

<!DOCTYPE html> 应该放于文件开头处，用来让浏览器用正常的模式去解析这个页面，否则在IE等一些老旧的浏览器里就会呈现出奇怪的效果，同时整个页面的布局也会变得很混乱。
设定好页面使用的语言后，会对分词以及语音播放产生一定的影响。
title和description在百度收录的时候权重最高，因此要把最重要的内容放到最前面来写，并且不能超过30个字；description要尽可能多地填充信息，但是不可以超过150个字符，在此过程中要自然地加入关键词，并且不能重复使用。

<body>
  <header>
    <h1>站点名称</h1>
    <nav>导航链接</nav>
  </header>

  <main>
    <article>
      <h2>正文标题</h2>
      <section>
        <h3>小节标题</h3>
      </section>
    </article>
    <aside>相关推荐</aside>
  </main>

  <footer>版权信息</footer>
</body>

把容易出现问题的地方都解释清楚：

可以放置在网页顶部或者作为文章的一部分来充当文章的标题，并且没有数量上的限制。
<nav>只包括主导航栏，在网页底部所加的友情链接不能放入其中去，否则会给搜索引擎造成不良影响。
<main>标签只允许用一次，在其中的内容应该是本页面独有的主要信息，不包含侧边栏、导航以及页脚等等。
<article>是指能够独立传播的内容，一篇帖子、一条评论都算作一个。
<section> 要使用的话必须有标题，没有的话就用<div>。
<aside>用于放边栏、推荐的位置或是补充说明等内容。
<footer>也可以用在文章里表示出作者以及发布时间等信息。

标题层级常常被人们忽略掉，但是它对排名的影响很大。

h1标签每页只能用一次，通常用来表示文章的大标题。
不可以跳过一个层级去写标题，在H2下面要用H4。
用小标题和长尾词来优化百度搜索结果。

<a href="/html5-tags" rel="noopener" target="_blank">HTML5核心标签</a>
<strong>重要内容</strong>
<em>语气强调</em>
<time datetime="2026-10-09">2026年10月9日</time>
<figure>

  <figcaption>语义标签层级结构</figcaption>
</figure>

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

多媒体标签：图片、声音、影像、图形

<picture>
  <source srcset="banner.avif" type="image/avif">
  <source srcset="banner.webp" type="image/webp">

</picture>

<video controls preload="metadata" poster="cover.jpg">
  <source src="demo.mp4" type="video/mp4">
  浏览器不支持视频标签
</video>

有关页面加载以及搜索引擎收录的一些小问题：

alt 属性必须填写好，因为图片的搜索流量主要依靠它来实现，因此要写得十分具体，并且不能包含与主题无关的内容。
设置了宽度、高度之后就可以防止图片加载的时候出现布局错位的情况了（CLS）。
loading="lazy" 只适用于第一屏后面的图片，不能用在第一屏上，否则会损害LCP。
使用 picture 和 source 来降低图片的质量，也就是从avif到webp再到jpg的过程。
Canvas可以用像素来绘制图形，在图表以及游戏当中经常用到；而SVG是矢量格式，在任何大小的情况下都不会出现模糊的情况，在图标或者标志等场合下特别适用。

表单交互用到的主要标签有：form、button

表单是HTML5最大的变化之一，新增加的输入类型对移动设备上的用户产生了很大的影响。

<form action="/submit" method="post">
  <fieldset>
    <legend>联系方式</legend>

    <label for="email">邮箱</label>
    <input id="email" name="email" type="email" required placeholder="name@example.com">

    <label for="phone">手机号</label>
    <input id="phone" name="phone" type="tel" pattern="^1[3-9]\d{9}$">

    <label for="city">城市</label>
    <input id="city" name="city" list="city-list">
    <datalist id="city-list">
      <option value="北京">
      <option value="上海">
    </datalist>

    <label for="remark">备注</label>
    <textarea id="remark" name="remark" rows="4"></textarea>

    <button type="submit">提交</button>
  </fieldset>
</form>

需要注意的事项包括：

每个表单项都需要有一个名称（name），否则它就不会被加入到表单里并且随同表单一起发送给服务器。
label 的 for 属性与控件的 id 是一致的，单击文字即可定位到对应的元素上，在触摸屏上效果则不同。
使用type="email", type="tel", type="number"等属性来激活各种移动设备上的不同输入法，进而提升转化率。
placeholder不能替代label，在填入数据后就会被清空。
button 元素默认是 submit 类型，在不想要它作为提交按钮的时候，要给它添加一个 type="button" 属性。
原生校验属性 required、pattern、min、max、maxlength 可以过滤掉大部分不合法的输入数据，复杂的逻辑判断则交给JavaScript来完成。
使用 datalist 来代替下拉框更加方便一些。

用表格或者图形的方式去展示数据

<table>
  <caption>常用HTML5标签速查</caption>
  <thead>
    <tr><th scope="col">标签</th><th scope="col">作用</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">main</th><td>页面主体</td></tr>
  </tbody>
</table>

给表格添加一个caption标签，并且在th元素中加上scope属性来表明它代表的是列标题还是行标题，这样盲人可以使用屏幕阅读器把单元格与其对应的标题进行关联起来。

容易被忽略的速度以及收录中的小细节

是移动端适配的入口，没有它的话就会被视为PC端的内容。
第一页的内容最好不要使用JavaScript进行动态加载，在静态HTML里出现文字很容易被找到。
图片和视频旁边都有文字说明，但是爬虫不能获取到媒体的内容，只能获得旁边的文字信息。
结构稳定、层次清晰的网站，在提交和索引的时候速度也会比较快，这是经过长时间的观察后得到的一个规律。

经常踩到的坑

网页上有多个H1标题，并且它们之间不存在任何主次关系。
用div做按钮的时候，就无法通过键盘来选中它了，这样就造成了无障碍的问题。
label不加for的话，在文本上就不会有反应了。
如果表单控件中没有设置name属性的话，那么提交后就会得到一个空值。
没有alt属性值的图片不能被搜索引擎抓取。
如果把div放在p里面，浏览器会自动分割标签，导致结构杂乱无章。
如果视频有自动播放功能并且没有静音设置的话，大多数浏览器都不会让它播放。

标签其实很简单，但是要符合语义来选择标签才是对的。HTML5的核心标签语法这几年几乎没有变化了，虽然框架在不断迭代更新，但是这些标签依旧稳稳地站在这里。做好了页面布局、填好了表单、加上了各种属性之后，收录和用户体验自然就顺理成章了，并不是要刻意去追求。