Tech Docs Station

Appearance

语义化标签 ​

HTML5 引入了语义化标签，让网页结构更加清晰，有利于 SEO 和无障碍访问。

什么是语义化？ ​

语义化是指使用恰当的 HTML 标签来描述内容的含义，而不仅仅是控制显示效果。

语义化的好处 ​

  • SEO 友好：搜索引擎更容易理解页面内容
  • 无障碍访问：屏幕阅读器能更好地解析页面
  • 代码可读性：开发者更容易理解代码结构
  • 维护方便：结构清晰，便于团队协作

页面结构标签 ​

定义页面或区块的头部：

html
<header>
    <h1>网站标题</h1>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
    </nav>
</header>

定义导航链接区域：

html
<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/products">产品</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系方式</a></li>
    </ul>
</nav>

main ​

定义页面的主要内容（一个页面只能有一个）：

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

article ​

定义独立的、完整的内容块：

html
<article>
    <h2>文章标题</h2>
    <p>发布时间：2024-01-15</p>
    <p>文章正文内容...</p>
</article>

section ​

定义文档中的一个区块：

html
<section>
    <h2>章节标题</h2>
    <p>章节内容...</p>
</section>

aside ​

定义侧边栏或附属内容：

html
<aside>
    <h3>相关文章</h3>
    <ul>
        <li><a href="#">文章1</a></li>
        <li><a href="#">文章2</a></li>
    </ul>
</aside>

定义页面或区块的底部：

html
<footer>
    <p>版权所有 &copy; 2024</p>
    <p>联系邮箱：contact@example.com</p>
</footer>

内容分组标签 ​

figure 和 figcaption ​

用于包装图片、图表及其说明：

html
<figure>
    <img src="sunset.jpg" alt="日落">
    <figcaption>图1：美丽的日落风景</figcaption>
</figure>

details 和 summary ​

创建可折叠的内容：

html
<details>
    <summary>点击查看更多信息</summary>
    <p>这里是隐藏的详细内容...</p>
</details>

<details open>
    <summary>默认展开的内容</summary>
    <p>这段内容默认是展开的。</p>
</details>

mark ​

标记高亮文本：

html
<p>搜索结果中<mark>关键词</mark>会被高亮显示。</p>

time ​

标记时间：

html
<p>发布于 <time datetime="2024-01-15">2024年1月15日</time></p>
<p>会议时间：<time datetime="2024-01-20T14:30">下周六下午2:30</time></p>

address ​

标记联系信息：

html
<address>
    作者：张三<br>
    邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br>
    地址：北京市朝阳区
</address>

页面结构示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<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="/articles">文章</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- 主要内容区 -->
    <main>
        <!-- 文章列表 -->
        <section>
            <h2>最新文章</h2>
            
            <article>
                <header>
                    <h3><a href="/article/1">HTML 语义化标签详解</a></h3>
                    <time datetime="2024-01-15">2024年1月15日</time>
                </header>
                <p>本文介绍 HTML5 中的语义化标签及其使用方法...</p>
                <footer>
                    <span>作者：张三</span>
                    <span>标签：HTML, HTML5</span>
                </footer>
            </article>
            
            <article>
                <header>
                    <h3><a href="/article/2">CSS Flexbox 布局指南</a></h3>
                    <time datetime="2024-01-10">2024年1月10日</time>
                </header>
                <p>Flexbox 是一种强大的 CSS 布局方式...</p>
                <footer>
                    <span>作者：李四</span>
                    <span>标签：CSS, Flexbox</span>
                </footer>
            </article>
        </section>
        
        <!-- 关于部分 -->
        <section>
            <h2>关于本站</h2>
            <p>这是一个技术博客，分享前端开发知识。</p>
            
            <details>
                <summary>了解更多</summary>
                <p>本站创建于2024年，致力于分享高质量的技术文章。</p>
            </details>
        </section>
    </main>
    
    <!-- 侧边栏 -->
    <aside>
        <section>
            <h3>热门标签</h3>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">Vue.js</a></li>
            </ul>
        </section>
        
        <section>
            <h3>联系方式</h3>
            <address>
                邮箱：<a href="mailto:contact@example.com">contact@example.com</a>
            </address>
        </section>
    </aside>
    
    <!-- 页面底部 -->
    <footer>
        <p>版权所有 &copy; 2024 技术博客</p>
        <nav>
            <a href="/privacy">隐私政策</a>
            <a href="/terms">使用条款</a>
        </nav>
    </footer>
</body>
</html>

语义化 vs 非语义化 ​

非语义化写法（不推荐） ​

html
<div class="header">
    <div class="title">网站标题</div>
    <div class="nav">
        <div class="nav-item"><a href="#">首页</a></div>
    </div>
</div>
<div class="content">
    <div class="article">
        <div class="article-title">文章标题</div>
        <div class="article-body">文章内容</div>
    </div>
</div>
<div class="footer">版权信息</div>

语义化写法（推荐） ​

html
<header>
    <h1>网站标题</h1>
    <nav>
        <a href="#">首页</a>
    </nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容</p>
    </article>
</main>
<footer>版权信息</footer>

标签选择指南 ​

内容类型推荐标签
页面/区块头部<header>
导航链接<nav>
主要内容<main>
独立文章<article>
内容分区<section>
侧边栏<aside>
页面/区块底部<footer>
图片+说明<figure> + <figcaption>
可折叠内容<details> + <summary>
高亮文本<mark>
时间<time>
联系信息<address>

最佳实践 ​

  1. 每个页面只有一个 <main>
  2. <article> 应该是独立可重用的内容
  3. <section> 用于对相关内容进行分组
  4. <nav> 只用于主要导航，不要用于所有链接组
  5. 使用 <time> 标签标记时间，并添加 datetime 属性
  6. 合理嵌套，保持结构清晰