HTML 5 is the latest version of the popular markup language. HTML has not changed significantly over the last 10 years.
This is strange, for rapidly developing web technologies, and finally, we got a brand new HTML 5.
o specify the type of the current document in HTML 5 use: <! DOCTYPE HTML> HTML5 does not have such strict rules as its predecessor XHTML:
# you may not use closing tags;
# do not use quotation marks in attribute values;
# use uppercase characters in elements and attributes.
The new tags in HTML 5
HTML 5 introduces the following new tags:
<header> <footer> <nav> <menu> <section> <article > <aside> <figure> <dialog> <m> (mark) <time> <meter> <progress> <video> <audio> <details> <canvas> <command>
The rest remains the same, except for some tags which are not relevant and are not recommended for use:
<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <isindex> <noframes> <s> <strike> <tt> <u>
So if you’re familiar with HTML 4 and XHTML, then you will not have any problems in learning HTML 5. New tags and attributes will certainly help you in creating new and upgrading old sites with new features it will be much easier than it was with old good HTML 4.
Okay, but will HTML 5 work with older browsers? The answer is “YES”, in addition to the new tags, of course. The new page is made in HTML 5 will display in all browsers, but users of the new browsers will see a little more, and in some cases, the page will actually look different.
Structural tags
Let’s see how we can create a document structure with HTML 5. In HTML 4 usually, use the tags <table> and <div> to create the structure of the entire page, regardless of which part of the page: the header, footer, menu, or other common topics. It’s not a very good way to structure pages, that is why HTML 5 introduced new tags for each part of the document.
Now we have available the following structural elements:
<section> the Goal is to identify the sections within specific text content, for example, to divide the whole text into smaller sections.
<header> the Purpose of it is to define the upper part of the HTML document.
<footer> This tag is used to define the lower part of the document.
<nav> the Purpose of it is to determine the list of links to other HTML pages.
<article> This tag is used to define some part of the test content of the document.
So for example, the HTML code with new tags.
<html> <body> <header> <h1>Title </ h1> </ header> <section> <article> <h2>Title 1 </ h2> <p> Some text ... </ p> </ article> <article> <h2>Title 2 </ h2> <p> Some text .. </ p> </ article> <nav> <a href="/someURL"> Link 1 </a> <a href = "/ someURL"> Link 2 </a> </ nav> </ section> <footer> <p> Copyright 2010 My Company </ p> </ footer> </ body> </ html>
As you can see we have placed the title of our document in the <header>. Then we added a section to our page with the tag <section> and put him in 2 of the <article> to mark the two main parts of our text content. After that, we determined our list of links using the tag <nav>. And finally, we have created the footer of our page with <footer>.
So what’s so special? We could do the same thing using good old <div>. Sure, but the advantage of using the new tags is in the clear and understandable structure of HTML documents. Understandable not only for humans but also for search engines.
New block tags in HTML 5
In addition to the existing block tags from HTML 5 added 3 new tags:
<aside> <dialog> <figure>
The <aside> tag is used to denote some part of the text within the main text, such as citations or footnotes. …
... <section> The main text ... <aside> Quote ... </ aside> </ section> ...
The web browser does not select the text enclosed in the tag <aside>, it is used to create a good structure of the HTML document. It will appreciate the developers of search engines.
The next tag <dialog> is used to create conversations between users:
... <dialog> <dt> User 1 </dt> <dd> User Message 1 </dd> <dt> User 2 </dt> <dd> User Message 2 </dd> </dialog> ...
The <dialog> element, we invested two tags: <dt> – contains the user name and <dd> to display messages to the user.
Third, the <figure> tag is used to specify the name of the image.
... <figure> <legend> Image Title </legend> <img alt = "Some Image" src = "/ image.jpg" width = "200" height = "200"> </figure> ...
We used the tag <legend> to specify the name of the image tag <img> to paste the specific image and the tag <figure> to associate them together.
What to consider when using structural and block tags in HTML 5
We can begin to use the new tags immediately, but after applying some techniques in order to work around some inconsistencies with older browsers. New block tags in older browsers will be treated as inline elements, so we need to define in our CSS for the new block tags property display: block; so they are properly displayed. As for older versions of Internet Explorer, then you need to add the following:
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('article');
document.createElement('nav');
</script>
To add this is because IE doesn’t understand CSS, attached to unknown tags. HTML 5 assumes that the <script> tag have type=”text/javascript” by default, so we can not add.
Inline tags
From HTML 4 there are a lot of tags for various text formatting, but there are no tags, for example, to show the time and date. So now in HTML 5, these tags are present:
<mark> <time> <meter> <progress>
The tag <m> is used to denote some part of the text for specific purposes, for example, to show an important part of the text:
... <p> Some <m> very important part </ m> of the text ... </ p> ...
We put some important part in a tag <m>.
The tag <time> is used to denote time and date in any text, for example:
... <p> Today at <time> 6:30 pm on November 24, 2010 </ time> ... </ p> ...
The <meter> is used to show some numbers in a specific format, for example:
... <p> monthly income of <meter> $ 15,000 </ meter> ... </ p> ...
The <meter> there are 6 useful attributes:
value – specifies the actual value of something;
min – sets the minimum value of something;
low – defines the limit at which the value is considered low;
high defines the limit at which the value is considered low;
max – determines the maximum value of something;
optimum – determines the optimal value of something.
For example:
... <p> Sugar concentration: <meter value="8.2" min="0" max="10.0" low="5.0" high="9.0" optimum="8.0">8.2</meter>. </p> ...
The latest new tag <progress> is used to show some point some progress, for example, the percentage of completion of something:
... <p>Completion: <progress value="100" max="500">20%</progress> </p> ...
The <progress> has two attributes: value – the current progress value and max – the maximum progress value.
Multimedia tags
In HTML 5 there are two new tag is designed to display multimedia <audio> and <video>.
Here is an example of the use of the <audio>tag:
... <audio src="/music.mp3" autoplay="autoplay" loop="1"> <p>Now playing ...</p> </audio> ...
This tag has three attributes:
src – the path to the sound file;
* autoplay – determines whether to start playing the file immediately after loading the page in the browser.
loop – specifies how many times the audio should be played.
The <audio> tag can be placed inside other tags containing some information.
The <video> tag is used to display video files on a page.
... <video src="/clip.avi">Clip...</video> ...
The src attribute specifies the path to the video file.
Multimedia tags allow display audio and video files directly in the HTML document and facilitate their indexing by search engines.
Interactive tags
In HTML 5 there are several interactive tags that allow you to modify some content without reloading the entire HTML page:
<menu> <command> <details> <canvas>
The <menu> tag is quite interesting since it already existed in earlier versions of HTML, and now it is back. The <menu> tag in HTML 5 acts as a container for <command>, which, in turn, creates a command in the form of a switch, checkbox, or regular button.
...
<menu>
<command onclick="alert('first action')" label=" first act"/>
<command onclick="alert('second action')" label=" second action"/>
</menu>
...
Using these tags, we can create various interactive menus.
Tag <details> is used to show some additional information, for example, a field reference.
... <p>Some content <details> Help info </details> ... </p> ...
The <canvas> tag is used to automatically render a variety of 2D shapes and bitmap images. It defines the selected region of the HTML document, in which you can make a variety of objects, display images, and transform them with the help of JavaScript.
<script>
var example = document.getElementById('sample');
var context = example.getContext('2d');
ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);
</script>
... <canvas id = "sample" width = "300" height = "300"> Your browser does not support HTML 5.</ canvas> ...
The ID attribute is used to identify the <canvas> tag as the DOM (Document Object Model). Next, specify the attribute’s width and height. The text enclosed between the tags <canvas> will be displayed in browsers that do not support HTML 5. It is intended for use in combination with the 2D APIs to display dynamic graphics like Flash.
We can begin to use the new features of HTML 5 today. Some simple techniques will work even in older browsers. If you are planning to build a new website, you can consider using HTML 5 to make your site more competent and reasonable structure with new features.