- Mastering Responsive Web Design
- Ricardo Zea
- 187字
- 2021-07-16 20:33:20
The <section> element
The HTML Section Element (
<section>
) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each<section>
should be identified, typically by including a heading(<h1>
-<h6>
element) as a child of the<section>
element.
Here are a few important points to remember about the <section>
element:
- The
<section>
element can be used to encapsulate a group of related content. This related content doesn't necessarily have to make sense if we take it out of the page's context. - A safe and valid way to use the
<section>
element is to place it inside an<article>
element. You can certainly use the<article>
element without a<section>
element. It's recommended, although not required, to include a heading element(<h1>
,<h2>
,<h3>
, and so on) when using the<section>
element. - It can be confusing to know when to use the
<section>
element and when to use the<article>
element. If you're in doubt, you can choose either element. - There can be more than one
<section>
in a single page.
Consider the following example:
<body> <main class="main-container" role="main"> <article class="article-container flex-container"> <section class="main-content"> <header> <h1>The <code><main></code> element </h1> </header> <p>As per the MDN definition:</p> <blockquote> <p>The HTML Main Element (<code><main></code>) represents…</p> </blockquote> </section> </article> </main> </body>
推薦閱讀
- iOS Game Programming Cookbook
- 機器人Python青少年編程開發實例
- Expert Android Programming
- Mastering KnockoutJS
- Android 應用案例開發大全(第3版)
- Unity 2D Game Development Cookbook
- Bootstrap 4 Cookbook
- NGINX Cookbook
- Python爬蟲、數據分析與可視化:工具詳解與案例實戰
- HTML+CSS+JavaScript編程入門指南(全2冊)
- Python數據可視化之美:專業圖表繪制指南(全彩)
- OpenCV 3.0 Computer Vision with Java
- 大學計算機應用基礎(Windows 7+Office 2010)(IC3)
- 數字媒體技術概論
- 你必須知道的.NET(第2版)