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
- 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:
New text-level (inline) elements have also been introduced, such as
<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.
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
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