HTML 章节与大纲

发表于

HTML4

HTML 4 用文档中章节和子章节的概念去描述文档结构,一个章节由一个包含着标题元素（h1-h6）的 div 元素表示。

HTML div 元素（<div> elements）并不强制性地定义一个章节。一个 HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节。

所以就造成如下问题：

  • 定义语义性章节的 <div> 元素的用法,如果没有为 class 属性赋以特殊的值，使生成自动生成大纲的算法变得不可能
  • 并多个文档是困难的
  • HTML4 中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的，就像广告块和解释区域。
  • 因为在 HTML4 中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如 logos,menus,目录或版权信息和法律声明。

HTML5

  • HTML5 在自动生成大纲算法的过程中去掉了 div 元素（<div>），并新增了一个元素，section 元素（<section>）

  • 新引入的元素（<article>、<section>、<nav> 和 <aside>）合并多个文档

    • article(页面结构) 页面中独立的结构它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目例如一个页面有文章和评论区可以用两个 article 。
      -​​ 通常包括标题（ <h1> - <h6> 元素）。
      • 素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的 <article> 元素可嵌套在代表博客文章的 <article> 元素中。
      • 可能包含一个或多个 <section>。
    • section（文档） 表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题,例如 h1-6 相关的级别只在一个 section 节段中起作用,每个 section 独立。
      • 如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。
      • 不要把 <section> 元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。 一般来说，一个<section>应该出现在文档大纲中。
    • nav 表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
    • aside 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。

  • HTML5 引入 aside 元素 <aside> 使得这样的节点不会插入到主纲要中例如广告。

  • HTML5 引入了三个特殊的节段 元素： 包含链接集合的 nav 元素 <nav> , 例如目录, 包含网站相关信息的 footer 元素 <footer> 和 header 元素 <header> 。