- HTML5 Multimedia Development Cookbook
- Dale Cruse Lee Jordan
- 745字
- 2021-04-02 19:27:35
Using the header tag for logos and site titles
"The
<header>element represents a group of introductory or navigational aids. A<header>element is intended to usually contain the section's heading (an<h1> - <h6>element or an<hgroup>element), but this is not required. The<header>element can also be used to wrap a section's table of contents, a search form, or any relevant logos." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
Getting ready
The first thing you'll notice about HTML5 is the DOCTYPE. If you're a veteran of web development, you'll be glad to know we no longer have to use such long, convoluted DOCTYPEs as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5 eliminates the need for Strict, Transitional, and Frameset DOCTYPEs. Actually, it eliminates the need for DOCTYPES altogether. Without one, older versions of Internet Explorer slip into Quirks mode and no one wants that. Instead, we can use the simple:
<!DOCTYPE html>
Finally, one DOCTYPE to rule them all.
Let's start with a basic bare bones page structure with which we should all be familiar:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> </body> </html>
Quotes were necessary to create valid XHTML, but because HTML5 is not coupled to XML, those are optional in the HTML5 specification. However, the author would recommend quoting attributes whenever possible.
Keen eyes will also note the <meta name="viewport" content="width=device-width, initial-scale=1.0">. That isn't going to do much for us just yet, but will be vital when previewing your work on mobile devices.
Closing our tags is optional as well. Though it's a good practice, you should weigh whether it's worth the development time and added page weight.
You'll also notice a conditional comment checking to see if the user is using Internet Explorer. If so, we tell the browser to execute Remy Sharp's "HTML5 Shiv" script, which simply tells IE to behave: <article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <ruby>, <section>, <source>, <summary>, <time>, <video>, <wbr>.
Darn that Internet Explorer. It lacks discipline.
How to do it...
We're going to create a single-page professional web portfolio for a young developer named Roxane. Let's say that Roxane is a talented web developer with a lot of skill, just like you. She deserves a professional single-page portfolio site worthy of her talent and so do you. Feel free to substitute your information for hers in the following examples.
Let's start by using the first new <header> tag to define the topmost area of our overall page.
While we're at it, we're going to incorporate the new <hgroup> tag to contain the headers in our new <header> tag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> </body> </html>
"The
<hgroup>element represents the heading of a section. The element is used to group a set of<h1> - <h6>elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
How it works...
The new <header> is where we often store things like logos, company slogans, and other types of branding usually associated with mastheads. It is often the first block-level element on an HTML5 page and is commonly used for headings like <h1>, <h2>, and so on. The result is a more semantically rich code base from which to build.
There's more...
Before HTML5, all <div>s were given equal weight by the browser software as well as by leading search engines like Google, Yahoo!, and Bing. But we know the intent of <div id="header"> just isn't as obvious as the new <header>. Instead, the HTML5 specification prefers to name things what they actually are. Now, HTML5 recognizes that not all <div>s are created equal by replacing some with more semantic terms like the new <header> and <nav> and <footer> for more data richness.
Use <header> elsewhere
Interestingly, the masthead isn't the only place you can use the new <header> tag. In HTML5, it's also perfectly acceptable to use the new <header> tag inside just about any block-level element.
Content, not position
The new <header> tag does most often appear at the top of a web page, but it doesn't always have to appear there. Remember that semantically, the new <header> tag is defined by its contents, not its position.
See also
We will continue to reference the WHATWG's HTML5 Draft Standard at http://whatwg.org/specs/web-apps/current-work/multipage, as it is an essential guide to the HTML5 evolution.
- 商用級AIGC繪畫創作與技巧（Midjourney+Stable Diffusion）
- JasperReports for Java Developers
- Photoshop CC摳圖+修圖+調色+合成+特效標準培訓教程（全視頻微課版）
- 從零開始：Flash CS6中文版基礎培訓教程
- 中文版CorelDRAW X6基礎培訓教程
- Photoshop CS6中文版從入門到精通（核心技法卷）：摳圖、修圖、Camera Raw、調色、銳化、合成
- After Effects影視特效立體化教程：After Effects 2021（微課版）
- Adobe創意大學Premiere Pro產品專家認證標準教材（CS6修訂版）
- 3ds Max 印象 影視粒子特效全解析
- 機械CAD軟件應用入門指導書
- Plone 3.3 Site Administration
- Joomla! E/Commerce with VirtueMart
- Photoshop CC圖形圖像處理實戰教程（微課版）
- SolidWorks 2020中文版入門、精通與實戰
- Open Source Identity Management Patterns and Practices Using OpenAM 10.x