本文最初于 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. DNS隧道实战&&cobaltstrike利用dns隧道

    前言 使用 dns 隧道进行 tcp 通信. 正文 首先配置域名 配置一个 A 记录指向我们的 vps, 然后配置几个 ns 记录,指向刚刚设置的 A 记录 然后在服务端安装 wget https:/ ...

  2. 报表导出excel方式介绍

     报表导出excel提供了四种方式,在单元格属性"其他/导出excel方式"可以选择,如下图 一是导出缺省值:报表中的单元格包含两个值,一个真实值一个显示值,但是在excel中 ...

  3. sql 中的分隔符

    1.通过分隔符可以将其中的内容作为一个整体的字符串进行处理. 假设数据库中有一个表,名为user info,注意这个名字,user 和 info 中间存在一个空格. 如果直接写如下查询,会报错,可能会 ...

  4. centos7安装magento随记 这就是个坑，果断放弃

    在centos7通过yum安装PHP7,首先在终端运行:rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm提示错误:er ...

  5. [SQL Server]数据库的恢复

    数据库恢复是和数据库备份相对应的操作,它是将数据库备份重新加载到系统中的过程.数据库恢复可以创建备份完成时数据库中存在的相关文件,但是备份以后的所有数据库修改都将丢失. SQL Server进行数据库 ...

  6. Jquery的跨域调用

    JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念.当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的唯一方法. getJSON ...

  7. 转：C# WinForm窗体及其控件的自适应

    一.说明 2012-11-30 曾经写过 <C# WinForm窗体及其控件自适应各种屏幕分辨率>  ,其中也讲解了控件自适应的原理.近期有网友说,装在panel里面的控件,没有效果? 这 ...

  8. 排序算法(2) 堆排序 C++实现

    堆 1 数组对象 2 可以视为一棵完全二叉树 3 一个堆可以被看作一棵二叉树和一个数组,如下图所示: 4 下标计算(通常使用内联函数或者宏来定义下标操作): 已知某个结点的下标为i 其父节点下标:i/ ...

  9. November 17th 2016 Week 47th Thursday

    Don't cry because it is over. Smile because it happened. 不要因为结束而哭泣:微笑吧,因为我们曾经拥有. My ex-girlfriend ha ...

  10. 结合领域驱动设计的SOA分布式软件架构

    引言 本文主要是参考Martion Fowler所著的<企业应用架构模式>与Eric Evans所著的<领域驱动设计>这两本泰山之作,加上本人在近年实际的工作过程中开发SOA系 ...