HTML5 Fundamental Syntax

HTML5 Fundamental Syntax

1 Adding Document Structure with HTML5’s New Elements

1.1 header

Is used to contain the headline(s) for a page and/or section . It can also contain
supplemental information such as logos and navigational aids.

1.2 footer

Contains information about a page and/or section , such as who wrote it, links to
related information, and copyright statements.

1.3 nav

Contains the major navigation links for a page and, while not a requirement, is
often contained by header .

1.4 aside

Contains information that is related to the surrounding content but also exists
independently, such as a sidebar or pull-quotes.

1.5 section

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

1.6 article

Is used for self-contained content that could be consumed independently of the page as a whole, such as a blog entry.

1.7 Modifying the Document Outline

You have a primary page title and tagline marked up with headings ( h1 and h2 , respec-tively), but you don’t want the tagline included in your document outline.

<hgroup>
<h1>HTML5, for Fun &amp; Profit</h1>
<h2>Tips, Tricks and Resources</h2>
</hgroup>

In this example, only /h1/(the largest headline of those headlines) will be shown on the Document Outline.

2 Text

2.1 Emphasizing Text

You want to add emphasis or emphatic stress to text content.

<p>My name is <em>Jane</em>, not John.</p>

2.2 Adding Importance to Text

You want to indicate a span of text that is important.

<p><strong>Adding Importance to Text</strong></p>

2.3 Highlighting Text for Reference

You want to highlight the search term(s) in a list of search results.

<p><mark>Highlighting Text</mark></p>

2.4 Marking Up Small Print

You want to offset a legal disclaimer and copyright statement as small print.

<p><small>Small Print</small></p>

2.5 Defining Acronyms and Abbreviations

You want to provide expanded definitions for acronyms and abbreviations.

<p>I love working with <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Roles</p>
<p>I love working with <acronym title="Accessible Rich Internet Applications">ARIA</acronym> Roles</p><!--Not Support-->

3 Adding Links to Block-Level Content

You want to wrap your site logo and main heading with a single hyperlink.

<a href="http://www.baidu.com">
    <h1>HTML5, for Fun &amp; Profit</h1>
    <img src="img/logo.png" alt="HTML5 for Fun and Profit" />
</a>

4 Marking Up Figures and Captions

You want to include an illustration with a caption on your web page.

 <figure>
   <img src="img/logo.png" alt="The logo of HTML5" />
   <figcaption>The logo of HTML5</figcaption>
</figure>

5 Marking Up Dates and Times

You want to encode date-time content for machines, but still retain human readability.

<p>Published: <time datetime="2011-01-15" pubdate>January 15, 2011</time></p>
<p>The class starts at <time datetime="08:00">8:00 am</time>.</p>
<p>Registration opens on <time datetime="2011-01-15T08:00-07:00">January 15, 2011 at 8:00 am, Mountain Time</time>.</p>
<p>Published: <time>2011-01-15</time></p>

I don't see what the diffience within an without <time>.

6 Setting the Stage for Native Expanding and Collapsing

You want to provide content that can expand and collapse with user focus (once browsers support it).

<details>
<summary>Upcoming Topics</summary>
<p>For the new year, we have a great line up of articles!</p>
<ul>
<li>Understanding the Outline Algorithm</li>
<li>When to Use <code>hgroup</code></li>
<li>Machine Semantics with Microdata</li>
</ul>
</details>

7 Controlling the Numbering of Your Lists

You want an ordered list to have numbering different than the default of starting with 1.

<ol start="2">
   <li>Apple</li>
   <li>Bananas</li>
   <li>Oranges</li>
 </ol>

8 Hiding Content to Show Later

You have content that you want to hide until after a user logs in.

<p hidden>You wouldn't see me if  you don't log in.</p>

9 Making Portions of a Page Editable

You want to allow users to directly edit content in the browser.

<article contenteditable>
 <h2>Stop <code>section</code> Abuse!</h2>
   <p>As the most generic of the HTML5 structural elements, <code>section</code>
     is often incorrectly used as a styling container, when <code>div</code> is more appropriate.</p>
</article>

10 Setting the Stage for Native Drag-and-Drop

You want to allow users to drag and drop content on your web page.

<h2 draggable="true">Block-Level Links</h2>

Author: mlhy

Created: 2015-10-09 五 18:31

Emacs 24.5.1 (Org mode 8.2.10)