本文最初于 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. LeetCode题解之Add two numbers

    1.题目描述 2.题目描述 题目思路可以参考合并单链表的思路,定义一个全局 进位标志,如果两个数值相加得到需要进位,则将进位标志置为1 . 3.代码 ListNode* addTwoNumbers(L ...

  2. Sublime Text 的使用笔记

    Sublime Text 是一个代码编辑器(Sublime Text 2,3是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器.Sublime Text是由程序员Jon Skinner ...

  3. js滚轮事件

    首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持).w3c文档已经废弃了onmousewheel ...

  4. Spring MVC 常用Jar包

    spring:http://maven.springframework.org/release/org/springframework/spring/ jackson:http://repo1.mav ...

  5. 关于Entity Framework更新的几种方式以及可能遇到的问题（附加类型“Model”的实体失败，因为相同类型的其他实体已具有相同的主键值）在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值，则可能会发生上述行为

    在日常使用Entity Framework中,数据更新通常会用到.下面就简单封装了一个DBContext类 public partial class EFContext<T> : DbCo ...

  6. asp.net 一般处理程序实现网站验证码

    使用VerifyCode.ashx一般处理程序生成验证码,实现如下: using System; using System.Drawing; using System.Web; using Syste ...

  7. [翻译] ZFDragableModalTransition

    ZFDragableModalTransition Usage - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender ...

  8. Python实例---CRM管理系统分析180331

    注意:一个项目基本都设计增删改查,且第一个需要做的就是设计表结构 思维导图: 组件使用: Django  +   bootStrap  +   Jquery 数据库表结构设计: 外键关联: 2种方式, ...

  9. 解决华为交换机S5700无法解除ip/Mac绑定的问题

    今天同事离职,需要解除他的个人笔记本Mac与ip的绑定 首先进入系统用户视图,然后进入vlanif4,解除151绑定 system-view interface vlanif 4 undo dhcp ...

  10. September 13th 2017 Week 37th Wednesday

    Whenever people agree with me, I always feel I must be wrong. 每次人们赞同我时,我都觉得自己一定错了. We can draw lesso ...