HTML5新增（section和article以及aside标签）

HTML学习 本文总阅读量次

HTML5

HTML5

HTML <section>元素

  • <section>元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
  • 例如，导航菜单应该包含在<nav>元素中，但搜索结果列表和地图显示及其控件没有特定元素，可以放在<section>里。
  • MDN 关于<section>元素
  • 例子：在“百度前端技术学院 第七天学习笔记（CSS position）”的例子1中有所使用。

注意：

  1. 如果元素的内容作为一个独立的有意义的集合，即元素内容可以分为几个部分的话，应该**使用<article>**而不是 <section>。
  2. 不要把 <section> 元素作为一个普通的容器来使用，这本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。
  3. 一般来说，在文档大纲中应该出现**不少于一个 <section>**。

HTML <article>元素

  • <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
  • 例如: 阅读器在博客上滚动时一个接一个地显示每篇文章的文本，每个帖子将包含在<article>元素中，可能包含一个或多个<section>。
  • 每个<article>通常包括标题（<h1> - <h6>元素）作为<article>元素的子元素。
  • 当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
  • <article>元素的作者信息可通过<address>元素提供，但是不适用于嵌套的<article>元素。
  • <article>元素的发布日期和时间可通过<time>元素的pubdate属性表示,但请注意<time>的pubdate 属性不再是W3C HTML5标准。
  • MDN 关于<article>元素
  • 例子：在“百度前端技术学院 第七天学习笔记（CSS position）”的例子1中有所使用。

HTML <aside> 元素

  • HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
  • 不要使用 <aside> 元素去尾随括号内的文本 ，因为这种文本被认为是主要流内容的一部分。
  • MDN 关于<aside> 元素
  • 例子：在“百度前端技术学院 第七天学习笔记（CSS position）”的例子3中有所使用。
HTML学习