186666财神网站

書名： Mastering Responsive Web Design
作者名： Ricardo Zea
本章字數： 289字
更新時間： 2021-07-16 20:33:20

The <header> element

Usually, we think that the top section of our site/app is the header, and this is correct. The editorial name for that top section is the masthead.

However, from an HTML5 standpoint, there's a difference between a masthead and a header.

The masthead is the main header of our site/app and there can be only one. It usually contains the logo, some navigation, maybe a search field, and so on. The header can be considered the top area of any section and there can be more than one header.

Notice that we're not talking about the <header> element, at least not yet.

The masthead can be built using the <header> element, but the <header> element can also be used in other parts of the same page.

Here's the definition from MDN:

The HTML <header> Element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

Here are a few important points to remember about the <header> element:

A good rule of thumb is to use a <header> element inside a <section> element.
We can wrap a heading (h1 to h6) inside a <header> element if we think it is necessary, but this is not really a common practice or required.
There can be more than one <header> element in a single page.

In the following example, there are two highlighted <header> sections, the masthead and a header inside a <section> element:

<body>
   <header class="masthead" role="banner">
 <div class="logo">Mastering RWD with HTML5 &amp; CSS3</div>
 <div class="search" role="search">
 <form>
 <label>Search:
 <input type="text" class="field">
 <button>Search Now!</button>
 </label>
 </form>
 </div>
 </header>
   <main class="main-container" role="main">
      <article class="article-container flex-container">
         <section class="main-content">
            <header>
 <h1>The <code>&lt;main></code> element</h1>
 </header>
            <p>As per the MDN definition:</p>
            <blockquote>
               <p>The HTML Main Element (<code>&lt;main></code>) represents&hellip;</p>
            </blockquote>
         </section>
         <aside class="side-content" role="complementary">
            <h2>What Does "Semantic HTML" Mean?</h2>
            <p>Semantic markup basically means that we use HTML tags to describe what a specific piece of content is.</p>
         </aside>
      </article>
   </main>
</body>

官术网_书友最值得收藏!

Mastering Responsive Web Design

The <header> element