实践-HTML语义化案例分析 ｜ 青训营

用户1791462849543
99 阅读3分钟

选题

HTML语义化的案例分析：分析一些实际网站的HTML结构，对比非语义化标签的差异

概念

语义化标签

语义化标签就是带有一定意义的标签，语义，就是我们说话表达的意思，语义多数是用文字来承载的； 语义标签则是纯文字的补充，如标题、自然段、列表、章节等，这些内容用纯文字是无法表达的， 需要我们的语义类标签代为表达. HTML5也引入了许多新的语义化标签。

image.png

<span>标签

<span>标签是文本中的"区块"标签，它本身没有任何特殊的显示效果，可以结合css来丰富它的显示效果。

<b>、<u>、<i>标签

<strong>、<em>、<mark>标签

<figure>和<figcaption>标签

......

以下是一些比较常用的语义化标签

title：页面主体内容。

hn：h1~h6，分级标题，h1 与 title 协调有利于搜索引擎优化。

ul：无序列表。

li：有序列表。

header：页眉通常包括网站标志、主导航、全站链接以及搜索框。

nav：标记导航，仅对文档中重要的链接群使用。

main：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

article：定义外部的内容，其中的内容独立于文档的其余部分。

section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

aside：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

footer：页脚，只有当父级是body时，才是整个页面的页脚。

small：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

strong：和 em 标签一样，用于强调文本，但它强调的程度更强一些。

em：将其中的文本表示为强调的内容，表现为斜体。

mark：使用黄色突出显示部分文本。

figure：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。

figcaption：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。

使用场景：

• SEO搜索引擎查找（文章的整体结构，便于解析）

• 读屏软件（读取文字的强调文字等，比如em/strong/）

• 软件的阅读模式及非浏览器的终端(文章的整体结构，支持自动生成结构目录)

• 特殊文字展示场景（比如：x的二次方、文字标注拼音等）

• 拼写检查

• 段落文字翻译

• 搜索引擎 分度器

具体实例分析

百度百科

<div class="navbar-bg">
<div class="navbar-bg-top">
<dl class="index on">
<dt><a href="/">首页</a></dt>
<dd>
<div><a href="/calendar/" target="_blank">历史上的今天</a></div>
<div><a href="/vbaike/" target="_blank">百科冷知识</a></div>
<div><a href="/vbaike#gallary" target="_blank">图解百科</a></div>
</dd>
</dl>
<dl class="second-know ">
<dt>秒懂百科</dt>
<dd>
<div><a href="···" target="_blank">懂啦</a></div>
</dd>
</dl>
<dl class="special ">
<dt>特色百科</dt>
<dd>
<div><a href="/museum" target="_blank">数字博物馆</a></div>
<div><a href="···" target="_blank">非遗百科</a></div>
</dd>
<div class="right-list">

<span class="item usercenter"><a href="/usercenter" target="_blank"><em class="···"></em>个人中心</a></span>
</div>
    ···


网站风格如下

image.png 这种比较大型的网页日常维护和更新量比较大，语义化还是非常有必要的。如上，大致结构还是比较清晰的。

以上写的都像废话，让我一层一层剥一下。

    <head></head>
    <body>
        <div>
            <ul>
                <li>
                    <a>
                        <span>
                            ...
                        </span>
                    </a>
                </li>
        </div>
            ...
    </body>
        ···

本来想多写一些分析啥的，但是我感觉到了疲惫。

反正，就是这个意思啦，虽然很多标签可能可以实现差不多的效果，但是那种逻辑层次分明，并且让人简洁明了阅读，还是更需要语义化标签的。我觉得也并不是很难理解，就像是在用标签收纳一样，这样就更容易找到和整理啦。

avatar
文章
阅读
粉丝