Published on: 04 August, 2013

HTML5 Tags and Attributes

Posted by andy | 1403 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

In this tutorial, you will learn the new HTML5 tags and attributes. Those new tags are not available in the old version HTML.

Those are the new tags. Click the link to see the definition and example on how to use it.

<article>

This tag is used to define an indepent content (not related to other content) of a page. Return to HTML Tags Index List.

/* example of using <article> tag */
<article>
  <h1>Learn HTML5</h1>
  <p>Learn how to use HTML5 to build your new attractive website.</p>
</article>

<aside>

This tag is used to define main part of other content. Return to HTML Tags Index List.

/* example of using <aside> tag */
<h1>Visiting Sydney Australia</h1>
<p>There are many places to visit when you come to Sydney Australia.</p>
<aside>
	<p>Sydney Opera House is an iconic Australia building.</p>
</aside>

<figcaption>

This tag is used to define a caption of a figure/image. Return to HTML Tags Index List.

/* example of using <figure> and <figcaption> tag */
<figure>
	<img src="/contents/images/webkeet-online-learning.png" alt="Free tutorials to learn web technologies">
	<figcaption>Figure1. A sample logo</figcaption>
</figure>

<figure>

This tag is used to define a unit or figure of a content, usually comes with a figurecaption tag. See above example that use both figure and figurecaption tags. Return to HTML Tags Index List.

<footer>

This tag is used to define the footer of the document or section. Return to HTML Tags Index List.

/* example of using <footer> tag */
<footer>
	Copyright 2013, My Company
</footer>

<header>

This tag is used to define the header of the document or section. Return to HTML Tags Index List.

/* example of using lt;header> tag */
<section id="main">
	<header>
		Welcome to Sydney Opera House
	</header>
	<section id="content">
		This is a place that you have to go if you visit to Sydney Australia.
	</section>
</section>

<hgroup>

This tag is used to define a group of headings of a document or section. Return to HTML Tags Index List.

/* example of using <hgroup> tag */
<hgroup>
	<h1>Sydney Opera House</h1>
	<h2>Harbour Bridge</h2>
</hgroup>

<nav>

This tag is used to define a navigation section. Return to HTML Tags Index List.

/* example of using <nav> tag */
<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

<section>

This tag is used to define a section of a document. Alternatively, if you will use this tag if none of above tags can be used. Return to HTML Tags Index List.

/* example of using <section> tag */
<section>
<h1>Introduction to HTML5</h1>
<p>Learn the basic of HTML5 here.</p>
</section>

<details>

This tag is used to define an extra information of content or section of a document. Return to HTML Tags Index List.

/* example of using <details> tag */
<details>
<p>For more information please visit our site below.</p>
</details>

<mark>

This tag is used to mark or highlight a text or some words. Return to HTML Tags Index List.

/* example of using <mark> tag */
<p>See how easy to learn <mark>HTML5</mark> and how easy it is to build your first website.</p>

<meter>

This tag is used to measure data of a given range (scalar gauge). Return to HTML Tags Index List.

/* example of using meter tag */
<meter min="1" max="5" value="5" >Rating 5 out of 5</meter>

<output>

This tag is used for outputting script result. Return to HTML Tags Index List.

/* example of using <output> tag */
<output id="outputresult">This tag will output a result.</output>

<progress>

This tag is used for progress indicator. Return to HTML Tags Index List.

/* example of using <progress> tag */
<progress value="45" max="100"></progress>

<summary>

This tag is used for summary or legend of details element. Return to HTML Tags Index List.

/* example of using <summary> tag */
<details>
	<summary>To sum up, this example is easy to follow and recommended for all beginners.</summary>
</details>

<time>

This tag is used for date and time tagging. Return to HTML Tags Index List.

/* example of using <time> tag */
<p>The party is started at <time>10.30PM</time> tomorrow.</p>

<wbr>

This tag is used for optional word line break. Lets say you have a really long one wording, if there is not enough space, you can include this tag to break them and force them into new line. Return to HTML Tags Index List.

/* example of using <wbr> tag */
Monday<wbr>Tuesday<wbr>Wednesday<wbr>Thursday

Example of converting XHTML 4.0.1 document to HTML5 document

Below is the standard HTML 4.0.1 document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Learn how to convert HTML 4.01 to HTML5</title>
	</head>
	<body>
		<div id="navigation">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</div>
		<div id="mainbody">
			<p>Example of the content of our site will go in here.</p>
		</div>
		<div id="footer">
			Copyright 2013, My website
		</div>
	</body>
</html>

The below document has already been converted to HTML 5 document.

You can see that we have removed the doc type to !doctype html format and some of the tag attributes have already been applied like <nav>, <section>, <footer>.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Learn how to convert HTML 4.01 to HTML5</title>
	</head>
	<body>
		<nav id="navigation">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
		<section id="mainbody">
			<p>Example of the content of our site will go in here.</p>
		</section>
		<footer id="footer">
			Copyright 2013, My website
		</footer>
	</body>
</html>
Return to HTML Tags Index List.
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.