HTML5: a few basics 0

Dec 15, 2011 by heidi in Blog, Technical Tags: , , , , , , , , , , ,

Web browsers, generally, only support certain features of HTML5. An easy way to determine which features are supported in a browser, is to use the Modernizr tool.

A few general tag changes:

  1. Simple doc type: <!DOCTYPE html>
  2. Simple encoding scheme: <meta charset=”utf-8″>
  3. The type attribute is no longer required:
    <script src=”js/main.js”></script>
    <script> var now = new Date(); </script>
    <style> body { margin: 0px; } </style>
    <link rel=”stylesheet” href=”css/main.css” media=”screen”>

A few new semantic tags:

  1. <article> = an on-its-own-feet-standing piece of content.
    Ask yourself: would this information make sense if I cut it out of the page and pasted it somewhere else completely?
  2. <section> = used to divide up content (of an article or page) in a logical way.
  3. <aside> = content that is useful, but could be removed while the rest of the content would still make sense.

A few new hierarchical tags:

  1. <hgroup> = used to group multiple <h#> tags into one headline.
    <hgroup>
    <h1>This is my title</h1>
    <h2>This is my smart-ass tag line</h2>
    </hgroup> 
    In this case, only the <h1> element will be considered in the page’s hierarchy. Meaning that everything below this <hgroup> is represented by the <h1>. The information in <h2> is secondary.
  2. <figure> and <figcaption> = groups together an image, table, quote, … and its caption on the page
    <figure>
    <img src=”images/myimage.php”>
    <figcaption>Caption of my image</figcaption>
    </figure>