📖 HTML5

HTML5 is the new standard for HTML. The previous version of HTML came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

Learn more about HTML5 Semantic Tags at the W3 Schools.

HTML5 Development Rules

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

New Features of HTML5

  • New content specific elements, like article, footer, header, nav, section
  • New form controls, like calendar, date, time, email, url, search
  • The video and audio elements for media playback
  • The canvas element for drawing
  • Better support for local offline storage

HTML5 DOCTYPE and charset

  • <!DOCTYPE HTML>
  • <html lang="en">
  • <meta charset="UTF-8">

Obsolete Elements

  • frameset, frame and noframes
  • acronym
  • presentational elements such as font, big, center and strike
  • presentation attributes such as bgcolor, align, cellspacing, cellpadding

Elements That Have Changed

small
now means 'the small print' not small text size
b
is now 'stylistically offset this from the text around it', not bold
i
means 'in an alternate voice or mood', not italicize
cite
 
now is the title of a work
a
element may now be wrapped around multiple block elements

HTML5 Semantic Elements

HTML5 has added several new semantic elements that help structure your page.

  • provide a new way for browsers to understand your content
  • works as a kind of outlining tool for your site
  • may be helpful with SEO and accessibility (in the future if not yet)
  • not all elements supported by all browsers
  • included here are those supported by most major browsers

Semantic Block Elements

<section></section>

  • is used for content that can be grouped thematically.
  • all content contained by <section>is related</section>
  • should not be used just for styles (stick with a <div>tag</div> for that)
  • indicates major topics for outlining

<header></header>

  • typically contains the headline or grouping of headlines for a page
  • may also contain other supplemental information like logos and navigational aids
  • may also be used within a section

<footer></footer>

  • used for content about a page, such as who wrote it, links to related information and copyrights.

<nav></nav>

  • used to contain major navigation links for a page
  • often included in
    for the page

<article></article>

  • used for content that is self-contained and could be consumed independent of the page as a whole, such as a blog entry
  • An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Examples of Articles

  • forum post
  • newspaper article
  • blog entry
  • user comment

<aside></aside>

  • a portion of a page that is related to the content around it, but also separate from that content, such as a sidebar or pull-quotes.
  • if you can remove the content without affecting understanding of the page, use <aside></aside>
  • typically formatted as a sidebar

<address></address>

  • holds contact information for the author of a page or section
  • often displayed in italics

Semantic Inline Elements

<figure></figure>

  • specifies self-contained flow content such as images or code
  • content should be relevant to the main content, but if removed, should not affect the flow of the document.

<figcaption></figcaption>

  • contains a caption for the <figure>tag</figure>
  • should be first or last element in <figure>tag</figure>

<mark></mark>

  • defines marked text
  • use for text you want to be highlighted

Sample HTML5 Layout and Code

Sample HTML5 Page Layout