- 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
toh6
) 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 & 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><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> <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>
- Puppet 4 Essentials(Second Edition)
- Embedded Linux Projects Using Yocto Project Cookbook
- Visual C++程序設計教程
- Modular Programming with Python
- 零基礎學C++程序設計
- PyTorch自動駕駛視覺感知算法實戰
- Mastering SVG
- 游戲程序設計教程
- Go并發編程實戰
- 數據結構案例教程(C/C++版)
- BIM概論及Revit精講
- Learning JavaScript Data Structures and Algorithms(Second Edition)
- 3ds Max印象 電視欄目包裝動畫與特效制作
- JavaScript機器人編程指南
- R語言數據挖掘:實用項目解析