标签语义化

我不是女神ヾ 2021-09-18 23:30 337阅读 0赞

> 使用正确的标签做正确的事，即使是源码也是有意义的，也是可读的。理解起来很简单，人眼能看到的某个标签长什么样，做什么用，但是阅读设备只能阅读源码结构，所以必须要让这个结构是有意义的组织。

###  目的 ###

*  1、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
 *  2、提升用户体验
 *  3、SEO 友好
 *  4、便于团队开发和维护

### 建议 ###

1.  尽可能少的使用无语义的标签，比如 `<div>` 和 `<span>`。
2.  不要使用纯样式用途的标签。如 `<b>`、`<font>`，而是改用 CSS 来实现。原则就是，HTML 负责内容和结构，而样式则交由 CSS 全权负责。
3.  每个 `<input>` 都应该配备一个 `<label>` 标签用于说明其用途，并使用 `for`属性关联
    
        <form>
          <label for="username">账号</label>
          <input type="text" id="username" />
        </form>
    
     
4.  请勿使用非表单元素来实现表单功能，比如用 `<div>` 来实现按钮，虽然样式可以看上去一致，但是你会失去表单元素原生的一些功能，比如键盘的可访问性，无法通过 Tab 键获取焦点
5.  使用表格时，标题要用 `<caption>`，表头用 `<thead>`，主体部分用 `<tbody>`包围，尾部用 `<tfoot>` 包围。表头和一般单元格要区分开，表头用 `<th>`，单元格用 `<td>`
    
        <table>
          <caption>标题</caption>
          <thead>
            <tr>
              <th>表头</th>
            </tr>
          </thead>
        
          <tbody>
            <tr>
              <td>主体</td>
            </tr>
          </tbody>
        
          <tfoot>
            <tr>
              <td>尾部</td>
            </tr>
          </tfoot>
        
        </table>
6.  图片 `<img>` 标签始终添加 `alt` 属性，其内容应提供图像的直接表示以及它在视觉上传达的内容。 任何个人说明或额外描述都不应该包含在这里，而应该放到 `title`属性中。
    
        <img  alt="图片描述" title="额外描述" src="">
7.  `<img>` 标签中的图片应该是内容，具有意义，如果纯粹是为了视觉装饰，则应该作为 CSS 背景图像。
8.  使用 HTML5 新标签

*  `<header>` 代表整个网页和 section 的页眉
 *  `<footer>` 代表整个网页和 section 的页脚
 *  `<hgroup>` 组合标题
 *  `<nav>` 页面导航链
 *  `<aside>` 附属信息
 *  `<article>` 文档内容
 *  `<mark>` 突出显示文本