HTML5: Important Tags
In this article, some of the crucial tags that are used in HTML5 but were absent in the previous versions are discussed.
The <address> tag defines the contact information for the author or owner of a document.
If the <address> element is inside an <article> element, it represents the contact information of the author/owner of that article.
The address element is usually added to the header or footer of a webpage. Consider an example:
|
1 2 3 4 5 6 |
<address> Some address <br /> <a href="mailto:us@example.org">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address> |
The address usually renders in italic. Most browsers will add a line break before and after the address element.
The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).
The area element is always nested inside a <map> tag. For example:
|
1 2 3 4 5 6 7 |
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" /> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" /> </map> |
The <embed> tag defines embedded content, such as a plug-in.
|
1 |
<embed src="helloworld.swf" /> |
This tag is absent in all the previous versions of HTML and is an exclusive property of HTML5.
The <figure> tag specifies self-contained flow content (like images, diagrams, photos, code, etc). For example:
|
1 2 3 4 |
<figure> <p>A view of the pulpit rock in Norway</p> <img src="img_pulpit.jpg" width="304" height="228" /> </figure> |
The content of the figure element should be relevant to the main content, but if removed it should not affect the flow of the document.
The iframe element creates an inline frame that contains another document. For example:
|
1 |
<iframe src="http://www.wwf.org"></iframe> |
The <progress> tag defines work-in-progress. For example, following piece of code specifies downloading in progress:
|
1 2 3 |
<progress> <span id="objprogress">76</span>% </progress> |
The <video> tag specifies video, such as a movie clip or other video streams:
|
1 2 3 |
<video src="movie.ogg" controls="controls"> your browser does not support the video tag </video> |
In another article, we would discuss some more important tags that are exclusively used in HTML5 and were absent in the previous versions.
BlueHost | HostGator | Media Temple
