HTML since 1990s continue to develop their work and to grow on a better direction.
From HTML4 to HTML5 was a big step and a big HTML code evolution. There are some good friendly difference to HTML5, but still is not considered finished.
The HTML5 is largely compatible with html4 and xhtml1.
Let see the new elements added on html5, there are a lot of changes but in this article will see the principals.
The Doctype
On the old HTML4 the file began with
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
at HTML5 the new start text it is the shortest posible
<!DOCTYPE html>
A easy way to start a html file.
Scripts Include
On the HTML4 the script include
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
<script type=”text/javascript” src=”js/script.js”></script>
At the new HTML5 no need the type of the script, the new browser are smarter inaf to understand the kind of script . So the new code will look like:
<link rel=”stylesheet” href=”css/style.css” />
<script src=”js/script.js”></script>
At the new HTML5 if you do not close the paragraph, article, section etc tag will be not a problem. The code will be considered right and will not report a problem. So with this new feature you can write faster.
<p class=”myclass” id=”Myid”>The new text
If you create a contact form, or a submit form where need to write the email address no need any more to create extra code to validate the email if is correct or not.
If at the type input you write type=”email” the html will validate automatically if the email is correct or not.
Placeholder
At the old version we need to create a bit of javascript to create placeholder for textboxes. At the new HTML5 with a simply placeholder=”Write here your email please”, you can avoid the javascript , very simple. At the new HTML5 we can avoid the div id (header, footer,) now are new elements who represent footer and header
<header></header> and <footer></footer>
You can have multiple header and footer on your project.
Like usually internet explorer is always the last in functionality and need to have extra code to work corectly.
Internet Explorer
At the header of every HTML5 project need to add 3 line of code especially for IE
<!–[if IE]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
The new forms allow new required and autofocus attributes
<input type=”text” name=”someInput” required=”required”>
<input type=”text” name=”someInput” autofocus=”autofocus”>
Also we do not need video and audio plugins. The new html support both of them just with the simple elements
<audio></audio>
<video></video>
Where should i use div element? Absolutely the div element will be used also in HTML5 but only on that part no other element can be used, or you can use it to make a position or for a specific purpose. section represents a generic document or application section.
It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
article represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside represents a piece of content that is only slightly related to the rest of the page. hgroup represents the header of a section.
header represents a group of introductory or navigational aids.footer represents a footer for a section and can contain information about the author, copyright information, etc.
nav represents a section of the document intended for navigation.figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
figcaption can be used as caption (it is optional).
Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types. track provides text tracks for the video element.embed is used for plugin content.
mark represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. progress represents a completion of a task, such as downloading or when performing a series of expensive operations. meter represents a measurement, such as disk usage. time represents a date and/or time.
A new placeholder attribute can be specified on the input and textarea elements.
It represents a hint intended to aid the user with data entry.
<input type=email placeholder=”Write your email here”>
The input element has several new attributes to specify constraints: autocomplete, min, max, multiple, pattern and step.
It also now has the width and height attributes to specify the dimensions of the image when using type=image.
The input and textarea elements have a new attribute named dirname that causes the directionality of the control as set by the user to be submitted as well.
The textarea element also has two new attributes, maxlength and wrap which control max input length and submitted line wrapping behavior, respectively.
The form element has a novalidate attribute that can be used to disable form validation submission (i.e. the form can always be submitted).