HTML5语义标签 - HTML学习网站

什么是语义标签

HTML5引入了一系列新的语义化标签，这些标签能够更好地描述网页内容的结构和含义。使用语义化标签有以下好处：

提高代码可读性和可维护性
改善搜索引擎优化（SEO）
提升可访问性（Accessibility）
便于屏幕阅读器理解页面结构
使代码更加规范和现代化

常用语义标签

语义化与非语义化对比

非语义化HTML


<div class="header">
    <div class="nav">
        <div class="menu">
            <a href="#">首页</a>
            <a href="#">关于</a>
        </div>
    </div>
</div>

<div class="main">
    <div class="article">
        <div class="title">文章标题</div>
        <div class="content">文章内容...</div>
    </div>
</div>

<div class="footer">
    <div class="copyright">版权信息</div>
</div>

语义化HTML5


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

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

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

完整的语义化页面示例


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化页面示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>文章标题</h2>
                <p>发布时间：<time datetime="2024-01-15">2024年1月15日</time></p>
            </header>
            
            <section>
                <h3>第一部分</h3>
                <p>这是文章的第一部分内容...</p>
                <figure>
                    <img src="image.jpg" alt="示例图片">
                    <figcaption>图片说明</figcaption>
                </figure>
            </section>
            
            <section>
                <h3>第二部分</h3>
                <p>这是文章的第二部分内容...</p>
                <aside>
                    <h4>相关阅读</h4>
                    <ul>
                        <li><a href="#">相关文章1</a></li>
                        <li><a href="#">相关文章2</a></li>
                    </ul>
                </aside>
            </section>
        </article>
    </main>

    <aside>
        <section>
            <h3>侧边栏</h3>
            <ul>
                <li>最新文章</li>
                <li>热门标签</li>
                <li>归档</li>
            </ul>
        </section>
    </aside>

    <footer>
        <nav>
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系方式</a></li>
                <li><a href="#">隐私政策</a></li>
            </ul>
        </nav>
        <p>© 2024 网站名称. 保留所有权利.</p>
    </footer>
</body>
</html>

语义化标签的最佳实践

使用合适的标签描述内容，避免过度使用div
确保页面结构清晰，层次分明
合理使用header、footer、nav等结构标签
使用article标签包装独立的内容
使用section标签组织相关内容
使用aside标签标记侧边栏内容
使用figure和figcaption标签处理图片
使用time标签标记时间信息
使用mark标签突出显示重要文本
使用details标签处理可折叠内容

语义化标签的兼容性

HTML5语义标签在现代浏览器中都有很好的支持，但为了兼容旧版浏览器，可以添加以下JavaScript代码：


// 为旧版浏览器添加HTML5语义标签支持
document.createElement('header');
document.createElement('nav');
document.createElement('main');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
document.createElement('time');
document.createElement('mark');
document.createElement('details');