前端经典面试题:如何理解 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

(完)

原文地址:https://www.cnblogs.com/leyili/p/semantics.html

时间: 2024-10-31 12:47:21

前端经典面试题:如何理解 HTML 语义化?的相关文章

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

[02]你是如何理解 HTML 语义化的 01,语义化,就是通过HTML标签来表示页面包含的信息. 02,其中有HTML标签的语义化和CSS命名的语义化. 03,HTML标签语义化的的含义是: 通过使用含有语义的标签(如h1~h6,aside)来表示文档结构. 04,CSS语义化的含义是: 为HTML标签添加有意义的class和id来补充未表达的语义. 05,为什么需要语义化 结构清晰.便于维护. 盲人可以用阅读器来阅读. 使搜索引擎更好的抓取网页.利于收录. ** 原文地址:https://w

理解HTML语义化 (转)

1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 2.为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构:为了裸奔时好看: 用户体验:例如title.alt用于解释名词或解释图片信息.label标签的活用: 有利于SEO:和搜索引擎建立良好沟通,有助于

[转载]理解HTML语义化

声明: 本文转载于:freeyiyi1993博客. 原文地址:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 2.为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好地内

理解HTML语义化

1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 2.为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构:为了裸奔时好看: 用户体验:例如title.alt用于解释名词或解释图片信息.label标签的活用: 有利于SEO:和搜索引擎建立良好沟通,有助于

如何理解HTML语义化

一.什么是 HTML 语义化 所以 HTML 语义化,就是用恰当的标签去展示恰当的内容,像 HTML5 中新增的 header.nav.footer 等标签,而非什么都用 div 这种不具备语义化的标签来显示 二.HTML 语义化的作用 1.方便代码的维护,语义化的 HTML 代码更具可读性 2.有利于 SEO,提高搜索引擎的有效爬取 原文地址:https://www.cnblogs.com/Leophen/p/11355649.html

【前端经典面试题】前后端分离(说一说你理解的前后端分离?)

前言:昨晚面试遇到了这个问题,既然遇到了,找些资料来一起做个总结吧. 1.对前后端分离的误解  在回答这个问题的时候不要钻到某个具体的技术 ,或者某个具体的框架上面→比如ajax异步请求.vue或react等组件化的开发框架.再或者rest接口规范.API接口数据约定等.从某个具体的技术切入来回答对前后端分离的理解本身就是一种局限的看法,所以在回答这个问题的时候应该从以下几个方面展开. 2.为什么要分离?  在以往的很长一段时间里,后端开发才是开发团队里的核心,前端开发往往仅由一小撮人甚至交给后

微信牛牛平台日租搭建技巧 web前端经典面试题如何应对

一.javascript 基础(es5) 1.原型:这里可以谈很多,只要围绕 [[ prototype ]] 谈,都没啥问题2.闭包:牵扯作用域,可以两者联系起来一起谈3.作用域:词法作用域,动态作用域(微信牛牛平台日租搭建Q-2189563389 代码<?13182926751>)4.this:不同情况的调用,this 指向分别如何.顺带可以提一下 es6 中箭头函数没有 this, arguments, super 等,这些只依赖包含箭头函数最接近的函数5.call,apply,bind

Web前端经典面试试题(三)

一. 什么是Ajax??? 术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验. Ajax它是"Asynchronous JavaScript + XML的简写" 定义Ajax: Ajax不是一种技术.实际上,它由几种蓬勃发展的技术以新的强大方式组合而成.Ajax包含: * 基于XHTML和CSS标准的表示: * 使用Document Object Model进行动态显示和交互: * 使用XMLHttpRequest与服务器进行异步通信: * 使用JavaScri

前端经典面试题解密:JS的new关键字都干了什么?

前言 new关键字在实例化获取对象时都做了什么?是一道经常出现在前端面试时的问题.如果只是简单的了解new关键字是实例化构造函数获取对象,是万万不能够的.更深入的层级发生了什么呢?同时面试官想从这道题里面考察什么呢?下面胡哥为各位小伙伴一一来解密. 一.new关键字 new关键字的作用:通过new关键字实例化构造函数,获取对象.说一千道一万,不如来段代码看一看 // 定义构造函数 function Person (name, age) { this.name = name this.age =