HTML5 reinforces the notion of semantic markup in building web pages, meaning that tags describe the meaning of the section in the page context and not how the page looks.
How browsers format the text in these tags ranges from standard italics for the <address> tag to no formatting whatsoever. Use CSS to determine exactly how you want the content to appear. Note that Firefox 3 supports most of the semantic tags, but you need to add display:block in CSS so that the content appears as expected.
Key tags include:
<address>: This holds contact information for the author of a page or section and is intended to be used either inside the entire page content or inside a section or article to indicate the author of that section. Other tags (especially anchors to e-mail addresses or page links) can be embedded in the address. For example:
<address>
10475 Crosspoint Blvd <br />
Indianapolis, IN 46526
</address>Most browsers render addresses as italics, but this is not guaranteed. You can dictate exactly how the content of the address appears with CSS.
<article>: An article is a subset of a page. Use the <article> tag to indicate content that came from an outside source or is somehow independent of the main page contents. Typically, articles are used to mark sections of the page that are brought in from some sort of aggregation system. An example of the <article> tag in use:
<article>
<header>
<h1>From
<em>
<a href = "http://aharrisboks.net/jad">
JavaScript and AJAX for Dummies
</a>
</em>
</h1>
</header>
<p>
Every once in a while, a technology comes along that
threatens to change everything. AJAX is one such
technology. In this book, you learn what all the fuss
is about and why AJAX is such a big deal.
</p>
</article>Most articles include a link to the original page if the article is from an online document. The <article> tag does not import data from an external source, it simply indicates that the relationship is external.
<aside>: This indicates a page fragment that's related to but separate from the main content. Aside text is typically formatted as a sidebar, as in this code:
<aside>
This is a secondary comment
</aside>
<footer>: Used to represent the footer content of a page, which normally contains author contact information (commonly in an <address> tag). Code for a footer may look like this:
<footer>
<h2>Footer</h2>
<address>
Andy Harris <br />
<a href = "mailto:andy@aharrisbooks.net">
andy@aharrisbooks.net</a>
</address>
</footer>This tag is mainly intended to replace the <div id = "footer"></div> idiom commonly used in HTML 4 and XHTML.
<header>: Primarily used to specify a page header, this tag replaces the <div id = "header"> idiom frequently used in HTML 4 and XHTML. Sample <header> code:
<header>
<h1>This is my header</h1>
</header>The header normally contains an h1 and other information that belongs in the visual masthead of the page. Don't confuse the <header> element (which is a visible section of the page) with the <head> element (which contains metadata the user doesn't see). Also note that the <header> element does not replace the <h1> through <h6> elements, but usually contains them.
The <header> element can also be used inside a section or article to indicate that an h1 inside that element is a level-one heading for the element, not for the page. This is useful because a page should have only one level-one element. Many pages are built by aggregators or content management systems, so each article and section can have a level-one heading without conflicting with the page's primary heading.
<hgroup>: Use this to combine a heading and one or more subheadings into a group. The normal heading structure is intended to serve as an outline for the page. Using an h1 heading with an immediate h2 as a subhead interferes with the outlining capabilities. You can put multiple headings in an hgroup, and only the initial heading is considered by automatic outlining tools, as in the following:
<hgroup>
<h1>History of the world</h1>
<h2>(without all the icky stuff)</h2>
</hgroup>
<menu>: With the associated <command> element, this tag helps you add various types of menu systems. For example:
<menu>
<command label = "one"
onclick = "alert('uno')">
<command label = "two"
onclick = "alert('dos')">
<command label = "three"
onclick = "alert('tres')">
</menu>The <menu> tag supports a type attribute that indicates the menu's behavior:
list: Present the commands much like a list.
context: Expected to act like a pop-up menu when the user right-clicks an element.
toolbar: Presents the commands as a toolbar.
The menu element has an entirely different meaning in HTML5 than it did in HTML 4, where it was a type of list.
<nav>: Indicating a part of the page set aside for page navigation, this tag replaces the <div id = "nav"> idiom frequently used in HTML 4 and XHTML. Sample code:
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#">link a</a></li>
<li><a href="#">link b</a></li>
<li><a href="#">link c</a></li>
<li><a href="#">link d</a></li>
<li><a href="#">link e</a></li>
</ul>
</nav>
<section>: Indicates a division of a page or an article; A page can be broken into numerous sections. It's intended to be more specific than the <div> tag currently used in HTML 4 and XHTML markup. However, modern browsers offer little support for the <section> tag, so using the <article> or <div> tag makes sense until support kicks in. Sample <section> code:
<section id = "1">
<h2>Section 1</h2>
<p>Section body...</p>
</section>
dummies
Source:http://www.dummies.com/how-to/content/html5-and-semantic-page-elements.html
No comments:
Post a Comment