HTML5 - The Next Generation

Authors
  • avatar
    Name
    Paul Bonnette
    Twitter

HTML5 - Rethinking things

Although HTML, CSS and JavaScript evolved in parallel they really serve distinctly different functions.

  • HTML - content
  • CSS - design
  • JavaScript - functionality/interaction

So a better way ...

  • Separate content from design and functionality
  • Encourage semantic (meaningful) markup
  • Promote accessibility and design responsiveness
  • Avoid overlap between HTML, CSS, and JavaScript
  • Eliminate Flash and Java while still supporting rich media content

div was great but not descriptive

We need new elements which tell us about the data inside:

  • <header>
  • <nav>
  • <main>
  • <article>
  • <aside>
  • <section>
  • <footer>

Now search engines and devices know where to look for the content they want and can ignore what they don't.

Inline elements

These new inline elements tell search engines exactly what is contained inside:

  • <address>
  • <time>

Avoiding Plugins and Java

New elements were added to avoid plugins, such as:

  • <video>
  • <audio>
  • <canvas>

Separating Design From content

HTML which sets fonts, colors, alignment, borders and text wrapping are discouraged. This should be done in CSS!

New DOCTYPE Declaration

<!DOCTYPE html>

Promoting accessibility

Because content is separated from design it is now easier for devices to pick out what they want and display it the way they want. Visually impaired browsers are a good example. Websites are encouraged to support keyboard navigation.

Tags without content need not be closed

<img src="">
<br>
<hr>

HTML5 Markup Validation Service

Validation Service

You can test any website for HTML5 validation.

Here are my test results. test results.

Ouch! That checker sure is picky! Before you criticize check your own website. Painful, eh?

Cheers.