前端经典面试题：如何理解 HTML 语义化？
本文最初于 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 语义化？的更多相关文章
- Web前端经典面试试题（二）
上次由于时间有限只分享了一部分的前端面试题,所以本篇继续分享前端经典面试试题 一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的. 队列先进先出,栈先进后出. 栈 ...
- web标签语义化的理解_web语义化是什么意思
web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- 【02】你是如何理解 HTML 语义化的，有什么好处
[02]你是如何理解 HTML 语义化的 01,语义化,就是通过HTML标签来表示页面包含的信息. 02,其中有HTML标签的语义化和CSS命名的语义化. 03,HTML标签语义化的的含义是: ...
- Web前端经典面试试题（一）
本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案.眼看新的一年马上就要开始了,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端 ...
- web前端经典面试题大全及答案
阅读目录 JavaScript部分 JQurey部分 HTML/CSS部分 正则表达式 开发及性能优化部分 本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在 ...
- 前端经典面试题 不经典不要star！
前言 (以下内容为一个朋友所述)今天我想跟大家分享几个前端经典的面试题,为什么我突然想写这么一篇文章呢?今天我应公司要求去面试了下几位招聘者,然后又现场整不出几个难题,就搜了一下前端变态面试题! HA ...
- 理解HTML语义化
1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...
- [转载]理解HTML语义化
声明: 本文转载于:freeyiyi1993博客. 原文地址:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是HTML语义化? < ...
随机推荐
- ASP.NET MVC 实现区域 项目分离 (比较好的方式)
说明: ZRT.Web 是前台网站,目录[D:\ZRT.Web\] ZRT.Admin 是后台管理,目录[D:\ZRT.Web\Applications\Admin\],删除文件[Global.asa ...
- leetCode题解 Reverse Words in a String III
1.题目描述 Given a string, you need to reverse the order of characters in each word within a sentence wh ...
- 微信网页IOS上传图片旋转解决方案
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ORACLE 参数设置绑定变量
使用 CURSOR_SHARING 参数 EXACT 默认,不替换 SIMIAR 当替换不会影响到执行计划时,才会将字面量替换成绑定变量 FORCE 只要有可能,字面量会被替换为绑定变量
- 绛河 初识WCF4
参考: http://blog.csdn.net/anlun/article/details/44860821 第四篇 初探通信--ChannelFactory 通过前几篇的学习,我们简单了解了WCF ...
- 安装zabbix3.4的过程（一）
目录 zabbix服务端安装(centos7.4) zabbix客户端安装 (centos6.9) 注释:本次安装为官方推荐的yum安装方式,如果需要编译安装,请查看下边的博文: 博文地址:https ...
- #006 dependencies和devDependencies的区别
dependencies 和 devDependencies 区别 在 npm 中的 package.json ，有两种插件的依赖包配置形式。 dependencies 和 devDependenci ...
- codeforces 741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths（启发式合并）
codeforces 741D Arpa's letter-marked tree and Mehrdad's Dokhtar-kosh paths 题意 给出一棵树,每条边上有一个字符,字符集大小只 ...
- Phthon3.4 新特性
1. print的变化:. 在python3.0中,print成为了一个函数,将传入的参数一输出. Python3.0: Python 2.5: 2.使用比较操作符时,如果被比较的对象没有 ...
- Java并发：Executor与连接池
概述 首先来说一说java连接池中常用到的几个类:Executor,ExecutorService,ScheduledExecutorService Executor 执行已经提交的任务对象.此接口提 ...