我的HTML会说话——从实用出发,谈谈HTML的语义化


I. 语义化HTML是什么?有什么意义?

所谓语义化HTML,就是从代码层次表达程序员的想法、思路,同时描绘出网站页面的结构:

  1. 与同为人类的程序员沟通,帮助程序员快速掌握当前代码。这一点其实是可以通过注释来实现的,不过用上语义化HTML多多少少可以省点注释,哈哈。

  2. 与同为代码构筑的系统(例如残疾人士阅读器以及搜索引擎爬虫等)沟通,帮助其快速、准确达到目的。由于这类系统与人类的智能相比起来实在有限,因此需要协定好通过什么样的方式来进行沟通,而W3C的决议就是语义化HTML的标准了。

最近在恶补前端基础时,碰到这一个知识点,发现市面上的资料大多杂乱,而且往往只能意会而不能言传,很难找到其中有什么实用的价值,因此特写此文,不妄求全面剖析,只求实用至上。

II. 文档章节类HTML标签

文档章节类HTML标签能体现网页的结构,因此也拥有最多的语义化HTML标签。

<article> / <section>

这俩标签的语义比较相像,都是表示文档中的一个独立区域(独立单元),其中还可以从结构上拆分成<header> / <footer>等部分。 这俩标签比较起来的话,<article><section>要大一级:

  1. <article>中可以包含<section>,举个例子:一篇博客文章的下方或侧方一般会有“相关文章”的列表,那么,这一整块HTML就可以用<article>给包起来,而“相关文章”的那一小块HTML则可以用section来表示;再举个例子,比如说文章的“版权信息”,也可以用section来表示。

  2. <article>中可包含<article>,比如说:一篇文章以及这篇文章的用户评论,整块HTML可以用<article>来包起来,而用户评论从逻辑分析起来也是从属于这篇文章的,因此也可以用<article>包起来并归到文章的<article>之下。

  3. <section>之下不能再放<section>了,这从侧面表示这是最小一级的独立单元标签。

  4. <article>一般用于“详细内容”,因此一般一个页面只含有一个顶级的<article>。而相反,<section>的用途更广泛一些,除却“详细内容”外都可以用<section>来进行包裹,比如说:网站首页上,可以利用<section>来展示不同分类/栏目的文章列表。

<header> / <footer>

这俩标签性质比较类似,所以放到一起来比较:一个放头部,一个放底部。 乍一看,觉得这俩标签就是网页的页头(一般包含网站LOGO、BANNER、顶级导航等)和页尾(网站本身的信息,包括版权信息、联系方式等),但实际上这俩标签的应用范围远不止于此,完全可以作为其它独立单元(<article>/<section>/<aside>/<nav>等)中的一部分,比如说下面的这个文章栏目,红色框住的部分可以用<header>(可以考虑里面包含个<nav>),而蓝色框住的部分就可以用<footer>了。

又比如说一篇文章,文章的标题/作者/发布时间等信息可以使用<header>,而文章的版权信息、参考文章列表等则可以使用<footer>

<main>

既然提到<header> / <footer>,就不得不提<main>了。<main>望文生义,就是整个页面的主体部分。跟<header> / <footer>不一样,一个页面只能有一个<main>,不能放进其它独立单元里。 <main>仅包括一个页面最核心的内容,比如说一篇文章,其它旁枝末节,比如搜索栏、菜单等内容不应被包含其中。

<aside>

<aside>一般表示页面主体内容以外的侧边栏,比如上文提到的“相关文章”,又或者是“作者个人资料”,如果是这些情况的话,一般会被包含在<article>中。另外,<aside>也可以表示一些工具功能,比如说“分享文章”、“回到顶部”等功能。

<nav>

<nav>表示网站的导航,但不一定所有的导航都需要用<nav>来实现,建议仅用来实现比较重要的导航,例如网页页脚的链接列表,直接用<footer>即可。另外,每个页面可以有多个<nav>

<h1> - <h6>

<h1> - <h6>表示标题,共有6级,其中<h1>的权重最高,<h6>的权重最低,其它的则依次递减。一般来说,<h1>需要分配给网站名/LOGO,如果有设置二级域名,也可以分配给分站的网站名/LOGO。 对于搜索引擎来说,<h1> - <h3>是了解网页的重要途径,因此一定要恰当地分配,比如:给文章的标题用上<h2>,给文章中的各个小标题用上<h3>

III. 文本级别语义HTML标签

文本级别语义HTML标签数量不少,但我认为有实用价值的不多。

<a>

<a>表示一个通向其它页面或当前页面其它位置的入口,这是一个历史悠久的语义化标签,同时也是搜索引擎的基础,想必大家都很熟悉了,因此这里不作详述。

<p>

<p>表示一个段落,这也是一个悠久的标签了。从语义上来说,我更倾向于使用<p>来表示一段纯文本,而不是利用<p>来呈现某个样式。

<em> / <strong>

这俩标签都是用来强调某个词/句,从语气上来说,<strong><em>的语气更重,也就起到更强的强调作用。 据说,这俩标签是用来在语义上取代<i><b>。那么,<em><i>,有什么不一样呢?答案是,<i>现在已经不用来表示“强调”,而仅仅只是把一些专有名词(比如人名、书名等)跟普通的字词区分开来。<b>的情况与<i>类似,也不再表示强调了,从某种程度上来说已经失去语义了,仅仅作为完成css样式的辅助标签。

<time>

<time>用来表示24小时制时间或者公历日期,若表示日期则也可包含时间和时区。对于<time>,尽量用机器能识别的时间格式,而不要用一些模糊的表达,比如说“一小时前”、“两天前”等。

IV. 组合型HTML标签

<figure>

<figure>表示一段富文本,可以是一个文章插图、一段代码、一个表格,通常搭配<figcaption>来表述这段富文本的描述/标题,当然,一个<figure>下只能有一个<figcaption>。 我倒是想到了<figure>的一个典型运用,那就是瀑布流文块:

V. 结构化数据

这一块在SEO领域相当重要,根据目前已经拟定好的一些规则,你可以明确地标明某页面主体的各个属性。 举个例子:一个商品的详细信息页,用普通的语义化来表示,大概只有商品的名称可以进搜索引擎的法眼;但自从有了结构化数据,可以通过某些标签及属性,指明商品的价格、供应商、实物图等内容;搜索引擎获取到该商品页的各个属性后,会在搜索结果页面直接呈现出来,另外在排名上也会有所偏重。 这方面的内容很多,建议还是参考各大搜索引擎的优化指南,毕竟各搜索引擎对这结构化数据的支持程度不一样。这里放出Google支持的结构化数据的官网:http://schema.org/


作者:array_huang
链接:https://juejin.im/post/5a9c8866f265da23741072bf

标签: none

添加新评论