内容分区的组织

作者：陈川阅读数：29033人阅读分类： HTML

内容分区的概念

内容分区是HTML中用于组织页面结构的重要方式。通过合理的分区，可以使页面结构清晰、语义明确，同时提升可访问性和SEO效果。HTML5引入了一系列新的语义化元素，专门用于内容分区，取代了过去过度依赖<div>的做法。

常用分区元素

`<header>`元素

表示页面或区域的页眉，通常包含logo、导航或搜索框等内容。一个页面可以有多个<header>。

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>

`<nav>`元素

专门用于导航链接的区域。重要导航应该放在<nav>中，但不必把所有链接都包裹起来。

<nav aria-label="主导航">
  <ul>
    <li><a href="#html">HTML</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#js">JavaScript</a></li>
  </ul>
</nav>

`<main>`元素

表示页面的主要内容区域，一个页面应该只有一个<main>。

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

`<article>`元素

表示独立、完整的内容块，如博客文章、新闻条目等。<article>可以嵌套，内层应与外层内容相关。

<article>
  <header>
    <h2>如何学习HTML</h2>
    <p>作者：张三</p>
  </header>
  <p>学习HTML的第一步是...</p>
  <section>
    <h3>基础标签</h3>
    <p>段落、标题等基础标签...</p>
  </section>
</article>

`<section>`元素

表示文档中的通用分区，通常应该包含标题。与<article>不同，<section>不一定是独立的内容。

<section>
  <h2>用户评价</h2>
  <article>
    <h3>张三的评价</h3>
    <p>这个产品很好用...</p>
  </article>
  <article>
    <h3>李四的评价</h3>
    <p>性价比很高...</p>
  </article>
</section>

`<aside>`元素

表示与主要内容相关但不是主要内容的部分，如侧边栏、广告、相关链接等。

<aside>
  <h3>相关文章</h3>
  <ul>
    <li><a href="/article1">HTML5新特性</a></li>
    <li><a href="/article2">CSS布局技巧</a></li>
  </ul>
</aside>

`<footer>`元素

表示页面或区域的页脚，通常包含版权信息、联系方式等。和<header>一样，可以有多个。

<footer>
  <p>© 2023 我的网站</p>
  <address>contact@example.com</address>
</footer>

分区嵌套规则

合理的嵌套结构对页面组织和可访问性至关重要。典型的页面结构可能如下：

<body>
  <header>
    <!-- 页眉内容 -->
  </header>
  
  <nav>
    <!-- 主导航 -->
  </nav>
  
  <main>
    <article>
      <header>
        <!-- 文章头部 -->
      </header>
      
      <section>
        <!-- 文章第一部分 -->
      </section>
      
      <section>
        <!-- 文章第二部分 -->
      </section>
      
      <footer>
        <!-- 文章页脚 -->
      </footer>
    </article>
    
    <aside>
      <!-- 相关内容 -->
    </aside>
  </main>
  
  <footer>
    <!-- 页脚内容 -->
  </footer>
</body>

ARIA地标角色

虽然HTML5语义化元素已经提供了良好的可访问性支持，但有时需要额外使用ARIA地标角色来增强：

<div role="banner"> <!-- 等同于header -->
  <!-- 页眉内容 -->
</div>

<div role="main"> <!-- 等同于main -->
  <!-- 主要内容 -->
</div>

<div role="complementary"> <!-- 等同于aside -->
  <!-- 补充内容 -->
</div>

<div role="contentinfo"> <!-- 等同于footer -->
  <!-- 页脚内容 -->
</div>

实际应用案例

博客页面布局

<body>
  <header>
    <h1>技术博客</h1>
    <nav aria-label="主菜单">
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/articles">文章</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <header>
        <h2>HTML5语义化标签详解</h2>
        <p>发布日期：2023-05-15</p>
      </header>
      
      <section>
        <h3>为什么要使用语义化标签</h3>
        <p>语义化标签的好处...</p>
      </section>
      
      <section>
        <h3>常用标签介绍</h3>
        <p>article、section等标签的用法...</p>
      </section>
    </article>
    
    <aside>
      <section>
        <h3>关于作者</h3>
        <p>前端开发工程师，专注于Web标准...</p>
      </section>
      
      <section>
        <h3>相关文章</h3>
        <ul>
          <li><a href="/css-layout">CSS布局技术</a></li>
        </ul>
      </section>
    </aside>
  </main>
  
  <footer>
    <p>© 2023 技术博客 版权所有</p>
  </footer>
</body>

电子商务网站产品页面

<body>
  <header>
    <nav aria-label="快速导航">
      <a href="/">首页</a>
      <a href="/cart">购物车</a>
    </nav>
  </header>
  
  <main>
    <article itemscope itemtype="http://schema.org/Product">
      <header>
        <h1 itemprop="name">智能手机X</h1>
      </header>
      
      <section itemprop="description">
        <h2>产品描述</h2>
        <p>高性能智能手机...</p>
      </section>
      
      <section>
        <h2>规格参数</h2>
        <ul>
          <li>屏幕：6.5英寸</li>
          <li>处理器：八核</li>
        </ul>
      </section>
      
      <aside>
        <section>
          <h3>价格</h3>
          <p itemprop="price">¥2999</p>
          <button>加入购物车</button>
        </section>
        
        <section>
          <h3>促销信息</h3>
          <p>限时优惠...</p>
        </section>
      </aside>
    </article>
    
    <section>
      <h2>用户评价</h2>
      <article itemprop="review" itemscope itemtype="http://schema.org/Review">
        <h3 itemprop="name">很好的手机</h3>
        <p itemprop="reviewBody">使用体验很好...</p>
      </article>
    </section>
  </main>
  
  <footer>
    <nav aria-label="页脚导航">
      <ul>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系方式</a></li>
      </ul>
    </nav>
  </footer>
</body>

分区与CSS布局

内容分区元素可以与CSS Grid和Flexbox等现代布局技术完美配合：

<style>
  body {
    display: grid;
    grid-template-areas:
      "header header"
      "nav main"
      "footer footer";
    grid-template-columns: 200px 1fr;
  }
  
  header { grid-area: header; }
  nav { grid-area: nav; }
  main { grid-area: main; }
  footer { grid-area: footer; }
</style>

<body>
  <header>...</header>
  <nav>...</nav>
  <main>...</main>
  <footer>...</footer>
</body>

可访问性考虑

合理使用分区元素可以显著提升可访问性：

屏幕阅读器用户可以通过地标导航快速跳转到不同区域
确保每个<section>和<article>都有适当的标题
使用aria-label或aria-labelledby为没有可见标题的区域提供标签
避免过度分区，保持结构的简洁性

<section aria-labelledby="section1-heading">
  <h2 id="section1-heading">重要通知</h2>
  <p>内容...</p>
</section>

常见错误与最佳实践

常见错误

滥用<div>代替语义化元素

<!-- 不推荐 -->
<div class="header">...</div>

<!-- 推荐 -->
<header>...</header>

在不必要的地方使用<section>

<!-- 不推荐 -->
<section>
  <button>点击我</button>
</section>

忽略标题层级

<!-- 不推荐 -->
<section>
  <h4>分区标题</h4> <!-- 跳过了h2、h3 -->
  <p>内容...</p>
</section>

最佳实践

保持标题层级连续

<h1>页面标题</h1>
<section>
  <h2>分区标题</h2>
  <section>
    <h3>子分区标题</h3>
  </section>
</section>

为屏幕阅读器用户提供跳过导航链接

<body>
  <a href="#main" class="skip-link">跳至主要内容</a>
  <header>...</header>
  <main id="main">...</main>
</body>

在复杂布局中结合使用语义化元素和ARIA角色

<div role="region" aria-labelledby="chart-title">
  <h2 id="chart-title">销售数据图表</h2>
  <!-- 图表内容 -->
</div>

分区与文档大纲

HTML5的分区元素会影响文档大纲结构。浏览器会根据分区和标题自动生成文档大纲：

<body>
  <h1>页面标题</h1> <!-- 层级1 -->
  
  <section>
    <h2>第一部分</h2> <!-- 层级2 -->
    <section>
      <h3>1.1节</h3> <!-- 层级3 -->
    </section>
  </section>
  
  <article>
    <h2>独立文章</h2> <!-- 层级2 -->
    <section>
      <h3>文章章节</h3> <!-- 层级3 -->
    </section>
  </article>
</body>

响应式设计中的分区

分区元素在响应式设计中可以灵活调整：

<style>
  @media (max-width: 600px) {
    body {
      grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
      grid-template-columns: 1fr;
    }
    
    aside {
      display: none;
    }
  }
</style>

<body>
  <!-- 分区结构 -->
</body>

分区与微数据

分区元素可以与微数据结合使用，增强SEO：

<article itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    <h1 itemprop="headline">文章标题</h1>
    <p>作者：<span itemprop="author">张三</span></p>
  </header>
  
  <div itemprop="articleBody">
    <p>文章内容...</p>
  </div>
</article>

动态内容分区

在单页应用(SPA)中，分区可以动态更新：

function loadNewContent() {
  const main = document.querySelector('main');
  main.innerHTML = `
    <article>
      <h2>新加载的内容</h2>
      <p>这是动态加载的内容...</p>
    </article>
  `;
  
  // 更新页面标题
  document.title = "新内容 - 我的网站";
}

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：文档的语义化意义

下一篇：文本方向的控制

内容分区的组织

内容分区的概念

常用分区元素

`<header>`元素

`<nav>`元素

`<main>`元素

`<article>`元素

`<section>`元素

`<aside>`元素

`<footer>`元素

分区嵌套规则

ARIA地标角色

实际应用案例

博客页面布局

电子商务网站产品页面

分区与CSS布局

可访问性考虑

常见错误与最佳实践

常见错误

最佳实践

分区与文档大纲

响应式设计中的分区

分区与微数据

动态内容分区

前端川

相关文章

PWA（渐进式Web应用）的基本概念

图像边框的设置

图像映射的应用

HTML5的表单事件与API

<var>-变量名

表格的基本结构(table, tr, td)

内容分区的组织

内容分区的概念

常用分区元素

<header>元素

<nav>元素

<main>元素

<article>元素

<section>元素

<aside>元素

<footer>元素

分区嵌套规则

ARIA地标角色

实际应用案例

博客页面布局

电子商务网站产品页面

分区与CSS布局

可访问性考虑

常见错误与最佳实践

常见错误

最佳实践

分区与文档大纲

响应式设计中的分区

分区与微数据

动态内容分区

前端川

相关文章

PWA（渐进式Web应用）的基本概念

图像边框的设置

图像映射的应用

HTML5的表单事件与API

<var>-变量名

表格的基本结构(table, tr, td)

`<header>`元素

`<nav>`元素

`<main>`元素

`<article>`元素

`<section>`元素

`<aside>`元素

`<footer>`元素