HTML5 is the fifth revision of the well-known and loved markup language. There are many new features and abilities that HTML5 has to offer and this post will get you familiarized with them. I will not go into in-depth detail about every aspect of HTML5, but I will get you familiarized with its key aspects; after all, this is only an introduction to HTML5.
The New HTML Standard
Within HTML5 you will find new elements, new attributes, full CSS3 support, video and audio, 2D/3D graphics, local storage, local SQL databases and web applications to name a few things. Basically what this means is that HTML5 is packed with awesome features that are going to make life easier for developers and, therefore, also for users.
HTML5 Documents
The developers of HTML5 decided that things didn’t need to get more complex, so they decided on a very simple and minimal document approach. Below you’ll find that this is all the code necessary to create an HTML5 document. That is it. What makes this documentation amazing is that its simplicity doesn’t require you to worry that you have the right DOCTYPE or the right anything else.
[html]< !DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
[/html]
New Elements
HTML 4 became a standard in 1999 – that’s a very long time ago. Unfortunately, that has also been too long as so many things have changed in the way the web is built and used. Today, many HTML 4 elements are either obsolete or used in the way they were not intended to be used. To make things easier for everyone HTML5 has done away with rid the following elements:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
However, it has also added a bunch more. Here are some examples of the new elements:
<article>
The article tag is a little bit self-explanatory. It is to contain independent and self-contained information – meaning that the content can stand on its own and make sense on its own. An article or a post on a blog would be a perfect example. You can have multiple article tags within one page.
[html]<article>
<h1>Web typography trends in 2013</h1>
<p>From a user’s perspective web-safe fonts were great but from a designer’s perspective it was a creative disaster.</p>
</article>
[/html]
<figure> and <figcaption>
The figure tag is responsible for content such as images, illustrations or diagrams while figcaption, like the name suggests, provides a caption to the figure. The caption can be placed before or after the image within the figure tag. Once again figure is a self-contained element which means that if it is removed it will not affect the comprehension of the remaining content. Yes, images within the figure tag are related to the overall content of the page but – like I said – they are not crucial to it.
[html]<figure>
<img src="myIMG.png" alt="NYC Skyline" width="300" height="200"/>
<figcaption>Fig1. – A paronamic view of NYC’s skyline at night.</figcaption>
[/html]
<hgroup>
The hgroup tag is used to group headings – it should only be used to group h1 through h6 and nothing else. It is a very SEO friendly element as it clearly showcases the headings form the particular section. Of course, you are free to have as many hgroups as you like but I wouldn’t recommend it if you are SEO conscious. The hgroup tag can be used on one or more headings.
[html]<hgroup>
<h1>Web typography trends in 2013</h1>
<h2>by Paula borowska</h2>
</hgroup>
<p>From a user’s perspective web-safe fonts were great but from a designer’s perspective it was a creative disaster.</p><p>
</p>
[/html]
<header> and <footer>
The header element is used to specify the header of either the page or a section which is why you can have multiple header tags within one page. At the same time the footer element is playing a similar role as it is to be treated as the footer section of the whole document or a section. You can have multiple footers per page as well.
A header should at least contain an h1 element; it can also contain the nav element which will be discussed next. While the footer element is usually dedicated to authorship and copyright information as well as links to informative pages such as terms of use or privacy policy.
[html]<article>
<header>
<h1>Web typography trends in 2013</h1>
<p>Published Match 23, 2013</p>
</header>
<p>From a user’s perspective web-safe fonts were great but from a designer’s perspective it was a creative disaster.</p>
</article>
</pre>
<pre><code><footer>
<p>Copyright Paula Borowska</p>
<p>Published Match 23, 2013</p>
</footer>
[/html]
<nav>
The nav tag is also one of the intuitive ones as it is an element dedicated to navigation links. It is not supposed to be used by every possible link, but navigation links such as in the a page’s main/top navigation or footer navigation links.
[html]<nav>
<a href="#/">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
[/html]
Canvas
This is one amazing and interesting element. Canvas is used to create graphics – right there on the webpage. The actual creation is done with JavaScript but the element is placed via HTML5. There are of course advantages and disadvantages of this tag like with any other, however, if you just need to create a simple shape or manipulate some text you can without ever opening Photoshop. This element in itself is very vast and has many components to it but one of the first things you need to know is that it is based on coordinates – just like websites are – and – just like websites – the top left corner is 0, 0; it is a 2D grid.
By default, the canvas tag doesn’t have any borders, size or content – it is practically invisible. You need to define those when placing the canvas tag within your HTML5 page. The second thing you need to know is that in order for JavaScript to actually work with the canvas element, it has to have an ID. Lastly, just like with most other elements, you can have multiple canvases on the same page.
The code below is taken straight from w3schools examples and it will create a diagonal black line within the canvas.
[html]<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
[/html]
Video and Audio
Neither video nor audio is new to HTML5 however, controls of both audio and video are. What HTML5 is doing is providing a standard for showing video and playing audio. They alleviate the need for a plugin and provide typical controls such as pause and play. Please keep in mind that it is a good idea to define width and height for videos as there is no ‘reserved’ space, if you will, for when the video is loading and therefore the layout shifts when it changes form the video not being there and for when it is actually there once loaded. Lastly, for both video and audio you can have multiple sources linked to different files. They will play in order with the typical hierarchy ruling that the first file is played first.
[html]<video width="400" height="300" controls>
<source src="movie.mp4" type="video/mp4"/>
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg"/>
</audio>
[/html]
New Input Types and Form Attributes
HTML5 has made a big improvement on form elements. There are two big things being done to them, one of them being new input types and the other is new form attributes. With input types what happens is that the input is customized to the information required. For instance, if you specify the input to be date type the input will anticipate a date and throw an error otherwise. Additionally, on smartphones, the appropriate UI elements will show; if you specify for the input type to be a number on a smartphone you will only see number keys. Here is a list of all new input types:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
[html]<input type="email" name="usremail"/>
<input type="range" name="points" min="1" max="10"/>
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"/>
<input type="date" name="bday"/>
<input type="date" name="bday"/>
<input type="url" name="homepage"/>
[/html]
On top of that, there are new attributes for forms. For the form element you can have an attribute of:
- autocomplete
- novalidate
While for the input element you can add an attribute of:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
I know, that is a lot! But as with the input types, the attributes will help make the form filling experience better for the users – if you choose to include the awesome attribute of course. Most of the attributes are self explanatory. Some of them are more useful than others and will be more used by developers then others. I suggest just taking a good look at the list and seeing what can be handy for you and your visitors and just include it. Some of these attributes can come in very handy.
[html]<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"/><br />
Last name: <input type="text" name="lname"/><br />
E-mail: <input type="email" name="email" autocomplete="off"/><br />
<input type="submit"/>
</form>
[/html]
That is it!
Yup, that sums it up. HTML5 is a very interesting language and has many new fun features. Personally, I believe that most of the features are more useful than confusing and you should truly take your time to learn about them in greater detail. HTML5 is going forward in helping both developers and users to have a much simpler and easier experience which is the only reason you need in order to use this language. (Okay fine, it is also very hip to use it too!)
