The Ashes

Technology, Science and other news
September 17, 2009

Walking through an HTML5 blog site

Posted by : admin
Filed under : General

Edward O’Connor has created a nice tutorial of HTML5 through the lens of his blog site use case.

The HTML5 spec introduces several new sectioning elements to HTML: <article>, <section>, <header> & <footer>, <nav>, <aside>, and <hgroup>.

There’s widespread confusion about when to use these elements. I’d like to write a little bit about these elements and how to use them appropriately, using blog template markup as a motivating example.

Go through the post and you will quickly grok all of:

PLAIN TEXT
HTML:

  1.  
  2. <!DOCTYPE html>
  3. <html lang=“en-US-x-Hixie”>
  4.     <title>My Blog: Adventures in cat pictures</title>
  5.   </head>
  6.     <header> <!– site header –>
  7.       <hgroup> <!– squashes subtitle in doc outline –>
  8.         <h1>My Blog</h1>
  9.         <h2>Adventures in cat pictures</h2>
  10.       </hgroup>
  11.       <nav> <!– main blog navigation links –>
  12.         <ul>
  13.           <li><a href=“…”>Front page</a></li>
  14.           <li><a href=“…”>About My Blog</a></li>
  15.           … other navigation links …
  16.         </ul>
  17.       </nav>
  18.     </header>
  19.  
  20.     … main content goes here …
  21.  
  22.     <aside> <!– sidebar –>
  23.       <section>
  24.         <h1>Search My Blog</h1>
  25.         <form action=“…”>
  26.           <input name=“q” type=“search”
  27.           placeholder=“To search, type and hit enter” />
  28.         </form>
  29.       </section>
  30.       <section>
  31.         <h1>Blogroll</h1>
  32.         <ul>
  33.           <li><a href=“…”>My other blog</a></li>
  34.           <li><a href=“…”>Your blog</a></li>
  35.           <li><a href=“…”>Your friend’s blog</a></li>
  36.         </ul>
  37.       </section>
  38.     </aside>
  39.     <footer> <!– site footer –>
  40.       <p>Copyright © 2009 You. All rights reserved.</p>
  41.       <address>
  42.         <a href=“mailto:you@example.org”>you@example.org</a>
  43.       </address>
  44.     </footer>
  45.   </body>
  46. </html>
  47.  
Tags :

No Comments

(required)
(will not be published) (required)
(opitional)

cciash.com EN ES IT DE PT CZ FR RU
May 2017
M T W T F S S
« Sep    
1234567
891011121314
15161718192021
22232425262728
293031  

Pages

Categories

Resources

There are many online poker site where you can play but at poker.hk you can play the poker games with all the knowledge you need related to the game with the poker school available in both the English and Chinese language.

Super Casino

Now you can bet on any sports and any sporting events from all the comfort from your home. Bet770 allows you to bet on any events and match with in just 3 clicks. They also offers great odds on football betting for every premier and champions league match. Get £50 free in bets when you register.

Bingo770, offering best online bingo games with £7.70 free no deposit Bonus!