本文最初于 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. Android Studio 快速实现上传项目到Github（详细步骤）

    前言: 本文主要讲解如何将Android Studio项目上传至GitHub,在此之前,先介绍几个概念. Android Studio:是谷歌推出一个Android集成开发工具,基于IntelliJ ...

  2. PyQt4（使用ui）

    1.使用qt designer设计界面,保存为test1.ui: 2.使用pyuic4 test1.ui -o ui.py生成ui代码. 3.程序载入. import sys import ui fr ...

  3. 【转】虚拟机安装Ubuntu的上网设置（有线网络和无线网络）

    虚拟机下ubuntu共享方式上网: 一. 有线网络 在有线网络的条件下,vmware的安装非常简单,上网方式几乎不用怎么设置(默认NAT模式)    如果默认情况下不能上网,则按以下步骤尝试: *** ...

  4. Oracle EBS 应收API只创建收款没有核销行以及消息堆栈

    只创建了收款但没有创建核销行 排除其他原因 有可能是缓存溢出导致的这个要改成true 且使用消息堆栈处理

  5. PLSQL中使用二维存储结构---二维数组

    代码如下:  --PLSQL中没有数组的概念 用TYPE 和Table of Record来代替多维数组--create by jenrry 20171028-- 1.0 建立存放列的测试表creat ...

  6. Oracle EBS 查询用户职责

    select b.user_name UserID, b.description User_Name, f.RESPONSIBILITY_NAME RESPONSIBILITY from FND_US ...

  7. [翻译] CHTCollectionViewWaterfallLayout

    CHTCollectionViewWaterfallLayout https://github.com/chiahsien/CHTCollectionViewWaterfallLayout CHTCo ...

  8. 使用keychain永久存储数据

    使用keychain永久存储数据 https://github.com/soffes/sskeychain keychain当然还是使用开源的好:),keychain是干啥用的?这个,baidu一下你 ...

  9. ZT CSDN 如何以最快的速度计算出一个二进制数中1的个数？ [

    一道算法面试题:如何以最快的速度计算出一个二进制数中1的个数? [问题点数:10分,结帖人weicai_chen] 收藏 weicai_chen weicai_chen 等级: 结帖率:95.12% ...

  10. 张高兴的 Windows 10 IoT 开发笔记：无线收发芯片 nRF24L01

    This is a Windows 10 IoT Core project on the Raspberry Pi 2/3, coded by C#. GitHub:https://github.co ...