Teachers: HTML5 new tags

Tuesday, February 3, 2015

HTML5 new tags

Hai everyone today i will introduce some of the new tags or elements in html5 along with explanation. This HTML5 tags are also known as Semantic Elements. Html5 is a latest hyper text markup language and next level to html. Web design is going forward by integrating various types of technologies such as HTML5, CSS3 and Bootstrap. Some of the older tags have been eliminated and new tags have been added. Lets have a look on importance of html5.

Screenshot

Html5 header example

Regularly we are creating the header section in the document as shown in below.

<div id="header">
<h1> Hai, Welcome to Studywithdemo!</h1>
</div>

But in html5 a predefine tag for header section. Using this tag we can easily identify the header section of the document.

<header>
<h1>Hai, Welcome to Studywithdemo!</h1>
</header>

Html5 section example

If we want to create the section in the document, html5 has a special tag called <section>. Here we can also include header tag in the section tag. lets see the below example.

Regular Format

<div id="something">
<h2>Tutorials with Video Demo</h2>
<p>This website contains Intresting Articles</p>
</div>

In Html5

<section>
<header>
<h1>Section 1</h1>
</header>
<h2>Demo starts at 12pm</h2>
<p>This website contains Virtualization concepts</p>
</section>

Html5 nav example

For navigation purpose html5 has a <nav> tag is nothing but defining group of links which is useful for menus. Lets see the below example.

Previous

<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</div>

In Html5

<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</nav>

Html5 article example

If you want to write different types of articles, html5 has the <article> tag and a section can contain any number of articles. The article tag is used to define the main content of your website. Exact usage of the article tag is to write newspaper articles, user comments and various forum posts etc..

<section>
<header>
<h1>Section 1</h1>
</header>
<article>
<header>
<h2>Article 1</h2>
</header>
<p>hai welcome to article 1</p>
</article>
</section>

Html5 aside example

If we want to place the content on a side, html5 has the <aside> tag observe the below example carefully.

<article>
<header>
<h2>Article 1</h2>
</header>
<p>hai welcome to article 1</p>
<aside>
<h4>This is aside tag</h4>
</aside>
</article>

Html5 footer example

Another special tag for document footer is <footer> tag used for specifying the owner of the website and copyrights etc. The footer tag is placed at the bottom of the website or blog. Lets see the below example.

Regular Format

<div id="footer">
<h3>This is footer</h3>
<p>copyright @ Studywithdemo</p>
</div>

In Html5

<footer>
<h3>This is footer</h3>
<p>copyright @ Studywithdemo</p>
</footer>

Browser Support

Almost all the popular browsers can support this tags but the internet explorer should be above 9. We can also use modernizr to detect whether your browser supports particular feature in html5 or not.

Some of the other tags

Audio tag (to include audio content), Video Tag (to include video content), Canvas (to hold graphics), Datagrid (creates an interactive representation of tree, list, or tabular data), Meter (used for measurement purposes), Time (indicating a date or time) and Output (The Output tag is used to display the results of a calculation). These are the most usefull HTML5 tags at this time.

Thank You for Visiting StudywithDemo

Teachers