快速理解web语义化

时间  2019-11-18
标签 快速 理解 web 语义 栏目 HTML 繁體版
原文   原文链接

什么是Web语义化

Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具备良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可让机器在更少的人类干预状况下收集并研究网页的信息，从而能够读懂网页的内容，而后将收集汇总的信息进行分析，结果为人类所用；另外一方面它可让开发人员读懂结构和用户以及屏幕阅读器（若是访客有视障）可以读懂内容。
简单来讲就是利于 SEO，便于阅读维护理解。css

总结起来就是：html

  • 正确的标签作正确的事情
  • 页面内容结构化
  • 无CSS样子时也容易阅读，便于阅读维护和理解
  • 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO

html 语义化标签

HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。一般咱们所说的HTML应该是彻底脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
代码示例：html5

<html>
    <body>
        <article>
            <header>
                <h1>h1 - WEB 语义化</h1>
            </header>
            <nav>
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </nav>
            <section>
                section1 - HTML语义化
            </section>
            <section>
                section2 - CSS语义化
            </section>
            <time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
            <footer> footer - by 小维</footer>
        </article>
    </body>
</html>

html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。web

下面来简单介绍下经常使用的html语义化标签浏览器

header 元素

header表明“网页”或者“section”的页眉，一般包含h1-h6 元素或者 hgroup, 做为整个页面或者一个内容快的标题。也能够包裹一节的目录部分，一个搜索框，一个nav，或者相关logo。ide

代码示例：post

<header>
        <hgroup>
            <h1>网站标题<h1>
            <h2>网站副标题</h2>
        </hgroup>
    <header>

注意事项：网站

  1. 能够是“网页”或者任意“section”的头部部分
  2. 没有个数限制
  3. 若是hgroup或者h1-h6本身就能工做得很好，那么就不必用header。

hgroup 元素

hgroup 元素表明“网页”或“section”的标题，当元素有多个层级时，该元素能够将h1到h6元素放在其内，譬如文章的主标题和副标题组合ui

代码示例：搜索引擎

<hgroup>
    <h1>这是一个主标题</h1>
    <h2>这是一个副标题</h2>
</hgroup>

注意事项：

  1. 若是只须要一个h1-h6标签就不用hgroup
  2. 若是有连续多个h1-h6标签就用hgroup
  3. 若是有连续多个标题和其余文章数据，h1-h6标签就用hgroup包住，和其余文章元数据一块儿放入header标签

footer元素表明“网页”或任意“section”的页脚，一般含有该节的一些基本信息，譬如：做者，相关文档连接，版权资料。若是footer元素包含了整个节，那么它们就表明附录，索引，提拔，许可协议，标签，类别等一些其余相似信息。

代码示例：

<footer>
    COPYRGHT@小维
</footer>

注意事项：

  1. 能够是“网页”或者任意“section”的底部部分
  2. 没有个数限制，除了包裹的内容不同，其余跟header相似

nav 元素表明页面的导航连接区域。用于定义页面的主要导航部分。
代码示例：

<nav>
    <ul>
        <li>HTML语义化</li>
        <li>CSS 语义化</li>
    </ul>
</nav>

侧边栏上目录、面包屑导航、搜索样式、或者下一篇上一篇文章咱们可能会想要用到nav，可是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的连接列表，虽然指向不一样网站的不一样区域，譬如服务条款，版权页等，这些footer元素就可以用了。

注意事项：

  1. 用于整个页面的主要导航部分，不适合就不要用nav元素了

article 元素

article 表明一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。
除了它的内容，article会有一个标题(一般会在header里)，一个footer页脚。

代码示例：

<article>
    <h1>你好，我是这边文章的标题</h1>
    <p>你好，我是文章的内容</p>
    <footer>
        <p>最终解释权归XXX全部</p>
    </footer>
</article>

这是一个最简单的例子，若是在article内部再嵌套article，那就表明内嵌的article是与它外部的内容有关联的，如博客文章下面的评论，以下：

<article>

    <header>
        <h1>web 语义化</h1>
        <p><time pubdate datetime="2018-03-23">2018-03-23</time></p>
    </header>

    <p>文章内容..</p>

    <article>
        <h2>评论</h2>

        <article>
            <header>
                <h3>评论者: 专业水军</h3>
                <p><time pubdate datetime="2018-03-23T15:10-08:00">~1 min ago</time></p>
            </header>
            <p>还行</p>
        </article>

        <article>
            <header>
                <h3>评论者: 大水怪</h3>
                <p><time pubdate datetime="2018-03-23T15:10-08:00">~1 hour ago</time></p>
            </header>
            <p>楼上说的对</p>
        </article>

    </article>

</article>

article 内部能够嵌套article，表示评论或者其余跟文章有关联的内容。article内部还能够嵌套section，以下：

<article>

    <h1>web语义化</h1>
    <p>什么是语义化？</p>

    <section>
        <h2>语义化详解</h2>
        <p>语义化就是。。。</p>
    </section>

    <section>
        <h2>语义化特色</h2>
        <p>语义化特色就是。。。</p>
    </section>

</article>

文章内section是独立的部分，可是它们只能算是组成总体的一部分，从属关系，article是大主体，section是构成这个大主体的一个部分。

注意事项：

  1. 自身独立状况下：用article
  2. 是相关内容： 用section
  3. 没有语义的： 用div

section 元素

section 元素表明文档中的“节”或“段”，“段”能够是指一片文章里按照主题的分段；“节”能够是指一个页面里的分组。section一般还带标题，虽然html5中section会自动给标题h1-h6降级，可是最好手动给他们降级。

代码示例：

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>关于section</h2>
        <p>section的介绍</p>
        <section>
            <h3>关于其余</h3>
            <p>关于其余section的介绍</p>
        </section>
    </article>
</section>

注意事项：

  1. 一张页面能够用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。section不是通常意义上的容器元素，若是想做为样式展现和脚本的便利，能够用div。
  2. 表示文档中的节或者段。
  3. acticle、nav、aside能够理解为特殊的section，若是能够用article、nav、aside就不要用section，没有实际意义的就用div

aside元素

aside 元素被包含在article元素中做为主要内容的附属信息部分，其中的内容能够是与当前文章有关的相关资料，标签，名词解释等。
在article元素以外使用做为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容能够是日志串连，其余组的导航，甚至广告，这些内容相关的页面。

代码示例：

<article>
    <p>内容</p>
    <aside>
        <h1>做者简介</h1>
        <p>小维,哈哈哈</p>
    </aside>
</article>

注意事项：

  1. aside 在 article 内表示主要内容的附属信息。
  2. 在article以外侧能够作侧边栏，没有article与之对应，最好不用
  3. 若是是广告，其余日志连接或者其余分类导航也能够用。

html语义化小结

总之，HTML语义化是反对大篇幅使用无语义化的div+span+class，而鼓励使用HTML定义好的语义化标签。

固然，若是须要兼容低版本的IE浏览器，好比说IE8以及如下，那就须要考虑一些HTML5标签兼容性解决方案了。
更多标签及其兼容性请去往传送门
html5标签列表传送门

CSS语义化

CSS语义就是class和ID命名的语义。class属性做为HTML与CSS衔接的纽带，其本意是用来描述元素内容的。指用易于理解的名称对html标签附加的class或id命名。若是说HTML语义化标签是给机器看的，那么CSS命名的语义化就是给人看的。良好的CSS命名方式减小沟通调试成本，易于理解。

CSS命名首先要知足W3C的命名规范和团队的命名规范。其次是高效和可重用性。

就好像.main/.sidebar会比.left_content/.right_content的class命名灵活性更好。

<!-- 以表现为中心 -->
<div class="ft margin10">
    <span>用户名：小维</span>
<div>

<!-- 以信息为中心 -->
<p class="user_info">
    <em>用户名:小维</em>
<p>

看到这里，问题来了。既然CSS class和ID命名的语义化能够便于阅读理解和减小沟通调试成本，那么咱们是否是能够用div 结合class和ID语义化命名的方式来代替html的语义化？

代码示例：

<html>
    <body>
        <div class="article">
            <div class="header">
                <h1>h1 - WEB 语义化</h1>
            </div>
            <div class="nav">
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </div>
            <div class="section">
                section1 - HTML语义化
            </div>
            <div class="section">
                section2 - CSS语义化
            </div>
            <div class="time">time - 2018年03月23日</div>
            <div class="footer"> footer - by 小维</div>
        </div>
    </body>
</html>

从代码的层面上来看，使用CSS class语义化的命名也是可以便于阅读和维护的，可是这样子并不利于SEO和屏幕阅读器识别。

知识拓展——ARIA

ARIA即Accessible Rich Internet Application，中文译为无障碍富互联网应用。能够为一些有功能障碍（如听力，视力）的人群经过屏幕阅读器例如voiceover等，提供无障碍访问动态、可交互Web内容。

而应用于HTML的ARIA有两部分组成：role 和aria-* 。

其中，role标识了一个元素的做用，aria-描述了与之有关的事物特征及其状态。

ARIA的具体使用规则可见ARIA in HTML

W3C对ARIA无障碍Web规范这样解释：
Web developers may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in [wai-aria-1.1], except where these conflict with the strong native semantics or are equal to the implicit ARIA semantics of a given HTML element.

Setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser.

因此，若是使用的元素(HTML5)自己具备语义化，应该使用这些元素，而不用再从新定义一个添加ARIA的角色、状态或属性的元素。
例如：
nav已经隐含ARIA的role="navigation"声明，就不用在

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程