HTML5 is the latest specification of the HTML language, and represented a major break with previous markup practices. The purpose of the profound changes to the language was to standardize the many new ways in which developers were using it, as well as to encourage a single set of best practices with regards to web development.

Most of the individual changes are a result of larger objectives in the design of the language. These objectives primarily include:

• Encouraging semantic (meaningful) markup
• Separating design from content
• Promoting accessibility and design responsiveness
• Reducing the overlap between HTML, CSS, and JavaScript
• Supporting rich media experiences while eliminating the need for plugins such as Flash or Java

Getting a handle on HTML5 isn’t just about learning which CSS features replace old HTML features. If you want to get an intuitive sense of HTML5, it is best to understand how these objectives affected the development of the language.

Encouraging Semantic Markup

Semantic markup means markup which has meaning, rather than markup which simply looks a certain way. For example, the <h1> tag implies that the content of the element is the title or headline of the entire document. That semantic meaning would be lost if we just made the text bold and large without using the appropriate tag.

HTML has always had a little bit of semantic markup available to it: heading tags, the link rel attribute, and document metadata. But it wasn’t enough.

In previous versions of the language, common structural elements like page headers, navigation menus, and main content sections were all indicated with the same HTML element, the <div> tag. In HTML, there are a host of new semantic elements intended to indicate the basic structure of a page:

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

New text-level (inline) elements have also been introduced, such as <address> and <time>. These help search engines and other services to easily find information on a page, for display in other contexts. At the same time, existing inline elements which produce various effects like bold, italic, and underline have been refined or redefined to imply specific semantic meaning.

Separating Design From Content

Along with strongly encouraging semantic (meaningful) markup, the HTML5 specification strongly discourages non-meaningful markup — markup intended only to tell the browser how to display things. This includes things like:

• declaring fonts and text colors
• setting text alignment or justification
• placing borders on tables
• defining how text wraps around images

Most of the HTML features that allowed for these sorts of things have been completely deprecated. The few that are still officially supported come with warnings that they are usually not recommended practices.

There are primarily two reasons to prefer this separation:

• It is easier to maintain and redesign a site if the style declarations are confined to CSS
• Users view web content in a lot of different contexts — desktops, laptops, tablets, mobile phones, RSS readers, and many others. Styles and design decisions that make sense in one environment don’t always make sense in another. So it is much better to provide semantic information and let the content be adapted to the context.

This last point is closely tied to…

Promoting Accessibility and Design Responsiveness

Not everyone interacts with the web the same way you do.

“Conventional” devices — desktops, laptops, tablets, and phones — present a wide range of screen sizes, screen aspect ratios, display resolutions, and user interaction experiences. This variety alone should be enough to encourage semantic and responsive design practices. But not everyone uses a “conventional” browser.

Blind and visually impaired persons browse the web also, and they use a variety of assistive technologies to do so. Screen readers that translate a site’s content into speech, specialized browsers that strip out styling and present highly magnified or high-contrast text, braille interpreters, and keyboard-based navigation all allow those with non-standard vision to interact with websites.

And all of these technologies are hindered by markup which tries to “hard-code” design and styling into the content of a page.

Reducing the Overlap Between HTML, CSS, and JavaScript

Three languages define front-end web development — HTML, CSS, and JavaScript.

No one sat down at the beginning of the internet and figured what types of things belong to each language. They each evolved in parallel to each other, often overlapping in functionality and scope.

Besides the practical considerations enumerated above, there has also been a focus on defining the nature and purpose of these languages, and limiting them (or expanding them) so that they do what is in their nature to do:

• HTML — Content
• CSS — Design
• JS — Interactivity

Remembering this can help one determine which language to use, especially in cases where it is possible to do something in more than one way. For example, if you want to change the color of something, your very first thought should be to use CSS. On the other hand, if you want to change the color of something in response to a user input, you probably want to use JavaScript.

Supporting Rich Media Experiences While Eliminating the Need for Plugins Such as Flash or Java

As bandwidth and internet speed have increased, we have moved more and more toward using the internet as a media platform. HTML was originally created for (hyper-)text documents, with perhaps a few images, not rich media pages with audio and video.

When people first started adding these types of experiences to web pages, they required users to add special plugins to their browsers. These performed poorly, limited user options, and opened up security holes. They required developers to write core web page functionality in other languages like Flash or Java. The content was hidden from search engines and screen readers.

It was a mess.

Now, HTML5 provides support for media with elements like <video> and <audio>, while <canvas> provides a defined space for JavaScript-created drawing and graphics. New form elements, along with better integration between HTML5, CSS, and JavaScript has made it possible to create full-scale web applications using the three languages that are native to the web browser, without plugins or add-ons.