HTML5 isn’t that new – it has been around for a couple of years and all major browsers support it now. So, if you haven’t done it so far, it’s high time to familiarize yourself with HTML5 and start using it. This tutorial will help you get a quick idea of what HTML5 is.
What Is HTML5?
If you are a Web veteran, then for you HTML5 is just the latest version of the old beloved HTML. If you are new to Web design and coding, then you don’t have these sentiments and for you HTML5 is just the main Web language you need to master, if you want to be a pro. In the first case you will need to update your knowledge from HTML4.01 to HTML5, while in the second case you might want first to master the basics of HTML4 and then move to HTML5.
This tutorial concentrates mainly on the new stuff in HTML5 rather than on the basics that have been around since the beginning of time, so if you don’t have a solid foundation, you won’t be able to get very far.
HTML5 has been under development for many years (or way too many, as many of us would say) and its purpose is to respond to the changed Web environment. HTML5 is also intended to be more cross-platform, targeting the rapidly growing market of mobile applications in addition to the familiar landscape of desktop applications.
Without going too much into technical details, it’s safe to say that HTML5 is production-ready – i.e. you can use it for live sites without much worries that it’s work in development and the code you write today will need to be changed tomorrow. From this point of view, HTML5 isn’t expected to drastically change in the near future. Of course, there will be changes but most likely they will happen with HTML5.1 and later versions. HTML5.1 is work in progress and for now it’s not suitable for use on live sites.
Changed Tags in HTML5
HTML5 did introduce a lot of new tags. In addition to tags, such as
<div> that have been part of the HTML specification for decades, there are also many new (and a couple of changed) ones. Here are some of them:
Changed Doctype Declaration
One of the first changes you encounter in HTML5 is the doctype declaration. Now it’s as simplified as possible and is just this:
The New Role of the Old <p>, <b>, <u>, and <i> Tags
Probably one of the most important changes to preserved tags is the new role of the
<p> tag. The
<p> tag is still here but it doesn’t denote a paragraph anymore. Instead, it replaces the
</font> tag. This is certainly confusing but once you get used to it, it won’t bother you.
<b>, <u>, and
<i> tags that in previous HTML versions used to identify bold, underlined, and italics, respectively don’t do this anymore. Instead, they are used again to emphasize that the text enclosed within them is different from the rest but if you want to achieve bold, underlined, or italics, you need to do it in the CSS.
Major New HTML5 Tags to Know
In addition to old tags that have new functions, there are also totally new tags. For instance, almost all of the page structure tags and most of the multimedia ones fall into this group.
New Page Structure Tags
The biggest changes in HTML5 compared to its predecessor are to be found in the way page elements are identified. Now the standard includes tags for all major page elements and content types (such as articles, videos, menus, headers, etc.). Here are some of these tags:
<nav>, <menu>, <section>
Unlike some other HTML tags with cryptic names, most of these tags are self-explanatory. For instance,
<article>, <header>, <footer>, or
<menu> are obviously used to identify articles, headers, footers, and menus, respectively.
<section> can be used within articles or elsewhere to identify a separate section.
<aside> is not that obvious – it’s used to indicate a piece of content that is not directly related to the other content on the page (like lists of most popular articles or other sidebar stuff). There are some other page structure tags that are introduced in HTML5 but the ones mentioned here are the main ones.
New Multimedia Tags
In addition to page structure tags, new (or modified) multimedia tags also deserve mentioning. Here are a couple of them:
As you probably guess, the
<video> tags allow to add video to your pages. The
<canvas> tag is much more interesting and it is probably among the Top 5 novelties in HTML5.
<canvas> tag isn’t a powerful graphics program but it’s a great substitute for many occasions when you’d use Flash.
What’s Gone from HTML5?
In addition to the new tags, some of the other changes in HTML5 involve the removal of existing tags. Some of them, such as
<basefont>, <big>, <center>, <font>, <strike>, and
<tt> have been removed because their function is better handled by CSS. Others tags, such as
<frame>, <frameset>, and
<noframes> are gone because they were a usability disaster (couldn’t agree more on this!). A third group of tags, such as
<acronym>, <applet>, <isindex>, or
<dir> are gone simply because they don’t provide much value, or their functionality can be achieved in other ways.
These aren’t the only novelties in HTML5. There are many more differences between HTML4 and HTML5 and if you want to see them all, this document lists them all. The list of changes is a biggish one but don’t worry – you neither have to use them all, nor need to memorize them. You just need to get the idea and when you need a particular tag, you can always look its exact syntax online.