实践：HTML语义化案例分析 | 青训营

用户1297597839242
117 阅读2分钟

HTML语义化

1. 介绍

语义化就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。在使用语义化时需要根据文档上下文结构合理的选用最合适表达当前语义的标签，并且尽量减少无语义标签（div、span）的的使用。

2. 简单示例

未语义化之前：使用了<div>标签来创建一个包含标题内容的区块。虽然这能够在视觉上呈现出一些内容，但是从代码本身很难知道这些<div>标签的具体用途，因为它们只是被赋予了class属性。

<div id='header'>
    <div class="h1">上班摸鱼</div>
    <div class="h2">下班卷</div>
 </div>

语义化之后：使用了更具有语义意义的标签来表达文档结构。<div id="header"> 变成了一个拥有语义的容器，表示这是页面的头部。<h1> 和 <h2> 标签用于表示标题级别，它们分别表示一级标题和二级标题。这就明确了这两个内容块是标题，而不只是一些没有具体语义的内容。

<div id="header">
    <h1>上班摸鱼</h1>
    <h2>下班卷</h2>
</div>

3. 博客语义化实例：

以下是一个博客网站的部分HTML代码，该网站使用语义化标签来构建页面结构：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>语义化博客</title> 
</head> 
<body> 
    <header> 
        <h1>我的博客</h1> 
        <nav> 
            <ul> 
                <li><a href="/">首页</a></li> 
                <li><a href="/archive">分类</a></li> 
                <li><a href="/about">精华</a></li> 
            </ul> 
        </nav> 
    </header> 
    <main> 
         <article> 
             <h2>深度学习</h2> 
             <p>一、损失函数：Loss Function > 官网文档: [torch.nn - PyTorch...</p> 
         </article> 
         <article> 
             <h2>Python独立脚本应用Django项目的环境</h2> 
             <p>一、需求说明 一直用Django在开发一个网站项目。。。</p> 
         </article> 
    </main> 
    <footer> 
         <p>&copy; 2023 我的博客</p> 
    </footer> 
</body> 
</html>

在这个例子中,语义化标签使用如下

  • <header>: 表示网页的头部，包含网站的标题和导航。
  • <nav>: 表示导航菜单。
  • <main>: 表示页面的主要内容区域。
  • <footer>: 表示网页的底部，通常包含版权信息等。

总之，这段代码表示了一个基本的语义化博客网站结构，其中使用了HTML5的语义化标签，从而使页面接口更清晰，有助于浏览器、搜索引擎和辅助技术更好地理解页面的内容。

4. 博客非语义化转换

将以上语义化内容改为非语义化内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-Semantic Blog</title>
</head>
<body>
    <div id="header">
        <div class="title">我的博客</div>
        <div class="navbar">
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/archive">分类</a></li>
                <li><a href="/about">精华</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="article">
            <div class="h2">深度学习</div>
            <div class="p">一、损失函数：Loss Function > 官网文档: [torch.nn - PyTorch...</div>
        </div>
        <div class="article">
            <div class="h2">Python独立脚本应用Django项目的环境</div>
            <div class="p">一、需求说明 一直用Django在开发一个网站项目...</div>
        </div>
    </div>
    <div id="footer">&copy; 2023 我的博客</div>
</body>
</html>

在这个版本中丢失了很多原始语义化版本中表达的信息。<header>、<nav>等语义化标签都被标记在类名里。这样会使页面结构和内容的含义变得模糊，不易理解。

avatar
文章
阅读
粉丝