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
March 2017
M T W T F S S
« Sep    
 12345
6789101112
13141516171819
20212223242526
2728293031  

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!