本文最初于 2018-09-21 发布于 知乎 ，后在 《重学前端》 专栏的学习中，重新复习整理，发布于 Github 上，并计划写一系列前端学习相关的文章。欢迎 star 。

HTML 语义化

简单来说，我们可以理解为：用正确的标签做正确的事情。

例如：

段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。正确使用语义标签可以带来很多好处。

为什么要关注 HTML 语义化？（为什么要使用语义类标签？）

对人：

  • 增强可读性，对开发者更友好，在没有 CSS 的情况下也能较好地呈现网页的内容结构与代码结构，便于团队的开发和维护。

对机器：

  • 有利于 SEO ，可以让搜索引擎爬虫更好地获取到更多有效信息，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，有效提升网页的搜索量。
  • 支持读屏软件，方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。

一些语义类标签介绍

<header>

用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。

<footer>

表示最近一个章节内容或者根节点元素的页脚。通常出现在尾部，包含一些作者信息、相关链接、版权信息等。

<aside>

表示跟文章主体不那么相关的部分，可能包含导航、广告等工具性质的内容。

侧边栏是 aside，aside 不一定是侧边栏。

aside 和 header 中都可能出现导航 <nav> ，header 中的导航多数是到文章的目录，而 aside 中的导航多是到关联页面或者整站地图。

<address>

footer 中可以包含此元素。

容易误用，并非表示单纯的地址，而是表示「文章作者的联系方式」。

可以让作者为它最近的 <article> 或者 <body> 祖先元素提供联系信息。在后一种情况下，它应用于整个文档。

<hgroup>

表示标题组。

<em>

表示重音。同样一句话里如果重音不同，表达的意思也许大相径庭。

<strong>

表示文本十分重要，一般用粗体显示。

<abbr>

表示缩写。

<hr>

横向分割线，表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。

<blockqoute>

表示段落级引述内容。

<q>

表示行内的引述内容。

<cite>

表示引述的作品名。

<time>

表示24小时制时间。

<figure> 和 <figcaption>

两者常配合使用，表示一段独立的内容，并且作为一个独立的引用单元。

当它属于主体(main flow)时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。 -- MDN

<figure>

  <img src="https://xx.com/xx.png" alt="An awesome picture">

  <figcaption>这是一张图片。</figcaption>

</figure>

<dfn>

表示术语的一个定义。

<p>

    <dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.

</p>

<nav> <ol> <ul>

导航栏、有序列表、无序列表

<pre> 中的内容会保持原有格式。

<samp> 元素用于标识计算机程序输出。

<code> 表示一段计算机代码。

总结

对于语义类标签的使用也许会带来一些争议，我们应该遵循的原则是：

尽量只用自己熟悉的语义标签。

用对比不用好，不用比用错好。

提示：

你可以在百度或者谷歌搜索中输入「标签名称」+「MDN」这两个关键字来查看更加专业和详细的解释。

另外安利一个 HTML 标签的学习链接：

HTML Reference - A free guide to all HTML elements and attributes

（完）

前端经典面试题：如何理解 HTML 语义化？的更多相关文章

  1. Web前端经典面试试题（二）

    上次由于时间有限只分享了一部分的前端面试题,所以本篇继续分享前端经典面试试题 一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的. 队列先进先出,栈先进后出. 栈 ...

  2. web标签语义化的理解_web语义化是什么意思

    web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...

  3. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  4. 【02】你是如何理解 HTML 语义化的，有什么好处

    [02]你是如何理解 HTML 语义化的   01,语义化,就是通过HTML标签来表示页面包含的信息. 02,其中有HTML标签的语义化和CSS命名的语义化. 03,HTML标签语义化的的含义是:   ...

  5. Web前端经典面试试题（一）

    本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案.眼看新的一年马上就要开始了,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端 ...

  6. web前端经典面试题大全及答案

    阅读目录 JavaScript部分 JQurey部分 HTML/CSS部分 正则表达式 开发及性能优化部分 本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在 ...

  7. 前端经典面试题 不经典不要star！

    前言 (以下内容为一个朋友所述)今天我想跟大家分享几个前端经典的面试题,为什么我突然想写这么一篇文章呢?今天我应公司要求去面试了下几位招聘者,然后又现场整不出几个难题,就搜了一下前端变态面试题! HA ...

  8. 理解HTML语义化

    1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...

  9. [转载]理解HTML语义化

    声明: 本文转载于:freeyiyi1993博客. 原文地址:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是HTML语义化? < ...

随机推荐

  1. GitHub已将持续集成服务器Janky开源

    GitHub已将Janky开源,这是他们构建在Jenkins之上的持续集成服务器,并在其中增加了聊天自动化工具Hubot. 除了一般的Jenkins功能之外,Janky还通过Hubot对功能进行了补充 ...

  2. redis 数据淘汰策略与配置

    redis 数据淘汰策略 volatile-lru:从已设置过期的数据集中挑选最近最少使用的淘汰volatile-ttr:从已设置过期的数据集中挑选将要过期的数据淘汰volatile-random:从 ...

  3. git repo代码部署策略及工具

    一般在项目或者产品开发流程中,先是开发人员在本地做好开发及测试,其中可能包含很多用于测试用的目录以及源代码文件,在部署前往往会有一个build过程.web项目最终build产生出优化生产环境下减少ht ...

  4. Vue2学习笔记:组件（Component）

    组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  5. [SQLServer] 数据库SA用户被锁定或者忘记密码的恢复

    一.以管理员权限运行命令提示符 CMD C:\>net stop mssqlserver您想继续此操作吗? (Y/N) [N]: y C:\>net start mssqlserver / ...

  6. Java 两个日期间的天数计算

    在Java中计算两个日期间的天数,大致有2种方法:一是使用原生JDK进行计算,在JDK8中提供了更为直接和完善的方法:二是使用第三方库. 1.使用原生的JDK private static long  ...

  7. AD用户登录验证，遍历OU（LDAP）

    先安装python-ldap模块 1.验证AD用户登录是否成功 import sqlite3,ldap domainname='cmr\\' username='zhangsan' ldapuser ...

  8. 更改SQL实例端口

    为SQL Server使用非标准的端口 你正在使用标准的端口号1433来连接SQL Server 2005吗?你考虑过设置SQL Server来监听一个不同于1433的端口号吗?我曾经就是这样.在这篇 ...

  9. 高级IO

    # 高级IO 特殊的IO操作,包括文件锁.系统V的流.信号驱动的I/O.多路转I/O(select和pull函数).readv和writev函数以及存贮映射I/O等概念和函数. ## 文件锁 文件锁是 ...

  10. 资料整理，SQL Server ，面试前复习笔记

    T-SQL 要掌握的知识点分类 SQL 面向数据库执行查询 SQL 从数据库取回数据 SQL 在数据库中插入新的记录 SQL 更新数据库中的数据 SQL 从数据库删除记录 SQL 创建新数据库 SQL ...