HTML5: The Basics (1 of 4)
The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:
1. New Elements
2. Semantic Changes
3. Getting it Working Today
This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Before we dive into the topics listed above, I want to take a minute to look at an extremely important feature that we won’t be covering in its own dedicated article: the new APIs. HTML5 includes several new APIs that are integrated with some of the new HTML5 elements (which we’ll be looking at later). Here’s the complete list straight from W3.org:
As you can see, the principal purpose of these APIs is to facilitate web application creation. Notice the third API enables offline web apps. This is excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment. You can expect to see many of your favorite applications follow Gmail in introducing offline access.
New Elements in HTML5
HTML5 introduces quite a few new elements. Article two in this series will look at a few of these in detail, but for now here’s the complete list with brief descriptions (source: w3schools):
Defines external content
Defines some content aside from the article it is placed in
Used to group some elements
Defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information
Defines the header of a section or document
Defines a section of navigation links
Defines sections in a document. Such as chapters, headers, footers, or any other sections of the document
Though we won’t have time to go over each of these in detail, we’ll be examining a few of the important ones such as
This is the part that should fundamentally change the way you structure your sites. Included in the list above are six new structural elements that will help bring consistency to the basic frame of sites all across the web. These six elements are: