HTML5 语义化标签与最佳实践

语义化标签的意义

在 HTML5 之前,我们常常使用<div>和<span>等无语义的标签来构建页面结构。虽然灵活,但这种做法不利于搜索引擎理解页面内容,也使得代码可读性变差。

HTML5 引入了一系列语义化标签,它们具有特定的含义,能够清晰地表达页面结构和内容的语义。使用语义化标签有以下好处:

提高了页面的可访问性,有利于搜索引擎和辅助技术理解页面内容使得代码结构清晰、可读性更强,便于开发和维护有助于实现 CSS 和 JavaScript 的分离,提高代码的模块化程度

常用的 HTML5 语义化标签

以下是一些常用的 HTML5 语义化标签:

<header>:页眉,通常包含网站标志、主导航、全站链接以及搜索框 <nav>:导航栏,用于定义页面的导航链接 <main>:页面主要内容,每个页面只能有一个<main>标签 <article>:独立的文章内容,可以是一篇博客文章、新闻报道等 <section>:文档中的一个独立部分,可以用来对内容进行分块 <aside>:侧边栏,常用于放置与主内容相关的引用、广告等 <figure>和<figcaption>:图像及其描述文字 <footer>:页脚,通常包含版权信息、联系方式、相关链接等

示例代码

<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>

    <aside>
      <h3>相关链接</h3>
      <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2023 xxx公司</p>
  </footer>
</body>

其他 HTML5 新特性

除了语义化标签,HTML5 还引入了许多其他有用的特性:

多媒体元素<video>和<audio>,无需插件即可在网页中嵌入视频和音频矢量图形<svg>和画布<canvas>,可用于图表、游戏、动画等地理定位、拖放 API、Web Storage、Web Workers 等强大的 JavaScript API 表单类型增强,如email、tel、url、date等 CSS3 集成,支持动画、过渡、2D/3D 变换、弹性盒模型等

最佳实践

在使用 HTML5 语义化标签时,我们应该遵循以下最佳实践:

根据内容的语义和结构,合理使用不同的标签,不要滥用确保页面在禁用 CSS 的情况下也能呈现出清晰的结构和内容图片要添加alt属性,以提高可访问性适当使用<section>、<article>等具有语义的容器,而不是一味地用<div> 表单元素应使用<label>标签,并指定for属性与表单控件关联

总之,语义化是 HTML5 的核心理念之一。在开发过程中,我们应该充分利用语义化标签,提高页面质量,让 Web 变得更加结构化和富有意义。同时要与 CSS、JavaScript 等技术结合,发挥 HTML5 的强大功能,创建出优秀的 Web 应用。

表单元素的使用建议

在上面的示例代码中,我注意到表单部分存在一些不太合理的地方:

<textarea>标签是独立的,不应作为<input>的type属性值 <input type="submit">和<input type="reset">从语义上看不太合适,应该使用<button>标签

优化后的表单代码如下:

<form action="server/b1.php" method="post">
  <input type="text" name="username" placeholder="用户名" />
  <input type="password" name="password" placeholder="密码" />

  <textarea name="intro"></textarea>

  <input type="radio" name="sex" value="male" checked />男 <input type="radio" name="sex" value="female" />女

  <input type="checkbox" name="hobby[]" value="fb" />足球 <input type="checkbox" name="hobby[]" value="bb" />篮球 <input type="checkbox" name="hobby[]" value="golf" />高尔夫

  <select name="occupation">
    <option value="fe">前端</option>
    <option value="be">后端</option>
  </select>

  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

另外,在实际开发中,我们常常需要使用 JavaScript 来阻止表单的默认提交行为,以便在提交前进行数据校验等操作。可以通过以下两种方式实现:

为<form>元素添加onsubmit事件处理函数,返回false即可阻止提交

<form action="www.baidu.com" method="post" onsubmit="return false"></form>

或者,为提交按钮绑定click事件,调用event.preventDefault()方法阻止默认行为

<button type="submit" id="submitBtn">提交</button>

<script>
  const submitBtn = document.getElementById('submitBtn');

  submitBtn.addEventListener('click', function (event) {
    event.preventDefault();
    // 表单验证等逻辑...
  });
</script>

语义化标签的意义​

常用的 HTML5 语义化标签​

其他 HTML5 新特性​

最佳实践​

表单元素的使用建议​

语义化标签的意义

常用的 HTML5 语义化标签

其他 HTML5 新特性

最佳实践

表单元素的使用建议