HTML 语义化

什么是 HTML 语义化？

HTML 语义化是指使用具有明确语义的 HTML 标签来构建网页结构，使网页内容更加清晰、有意义，并且易于被搜索引擎和屏幕阅读器理解。

为什么要使用 HTML 语义化？

提高代码可读性和可维护性
改善搜索引擎优化（SEO）
增强屏幕阅读器的可访问性
使网页结构更加清晰和有意义

HTML5 语义化标签

HTML5 引入了一系列语义化标签，用于描述网页的不同部分：

标签	描述
<header>	定义网页或section的头部
<nav>	定义导航链接的容器
<section>	定义文档中的一个章节
<article>	定义独立的、完整的内容块
<aside>	定义与主要内容相关的侧边栏
<footer>	定义网页或section的底部
<main>	定义网页的主要内容
<figure>	定义自包含的内容，如图片、图表等
<figcaption>	定义figure元素的标题
<time>	定义日期或时间
<mark>	定义需要标记或高亮的文本
<strong>	定义重要的文本
<em>	定义强调的文本

HTML 语义化示例

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>语义化 HTML 示例</title> 
</head>
<body> 
    <header> 
        <h1>网站标题</h1> 
        <p>网站副标题</p> 
    </header>
    
    <nav> 
        <ul> 
            <li><a href="#">首页</a></li> 
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    
    <main> 
        <section> 
            <h2>新闻资讯</h2> 
            
            <article> 
                <h3>新闻标题 1</h3> 
                <p>发布时间：<time datetime="2024-01-01">2024年1月1日</time></p> 
                
                <p>新闻内容...</p>
            </article>
            
            <article> 
                <h3>新闻标题 2</h3>
                <p>发布时间：<time datetime="2024-01-02">2024年1月2日</time></p>
                <p>新闻内容...</p>
            </article>
        </section>
        
        <section> 
            <h2>产品展示</h2>
            <figure> 
                <img src="product.jpg" alt="产品图片"> 
                <figcaption>产品名称</figcaption> 
            </figure>
        </section>
    </main>
    
    <aside> 
        <h3>侧边栏</h3>
        <p>侧边栏内容...</p>
    </aside>
    
    <footer> 
        <p>© 2024 网站名称. 保留所有权利.</p> 
    </footer>
</body>
</html>

非语义化标签 vs 语义化标签

非语义化标签示例

<div id="header"> 

    <h1>网站标题</h1>
</div>

<div id="nav"> 
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>

<div id="content"> 
    <div class="article"> 
    
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </div>
</div>

<div id="footer"> 
    <p>版权信息</p>
</div>

语义化标签示例

<header> 
    <h1>网站标题</h1>
</header>

<nav> 
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</nav>

<main> 
    <article> 
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>

<footer> 
    <p>版权信息</p>
</footer>

HTML 语义化的最佳实践

使用合适的语义化标签来描述内容的结构和含义
避免过度使用 <div> 和 <span> 标签
为图片添加 alt 属性，为链接添加 title 属性
使用标题标签（<h1> 到 <h6>）来构建文档的层次结构
确保文档结构清晰、逻辑合理