HTML5 Tags
The new tags don't provide an advantage in terms of styling of pages; you can provide the structure you need for styling using <div> tags, IDs, and classes. The advantage of the new tags is that they provide a standard vocabulary for describing the structure of page. The basic structure of HTML5 documents is simple and should include the following minimum elements or tag:-
- Section Tag - Included in the page outline.
- Header Tag - Excluded from the page outline.
- Navigation Tag - Included in the page outline.
- Footer Tag - Excluded from the page outline.
- Article Tag - Included in the page outline.
- Aside Tag - Not included in the page outline.
<section> Tag
It's helpful to think of the structure of a web page as an outline. The <section> element is used to define a generic section of the document. The other structural tags in HTML5 are used to define document sections with more specific semantic meaning. A <section> tag is is expected to include a heading tag for that section.
Syntax
<section>
<h1>Web Site</h1>
<p> A Web Site is a location on the Web that publishes some kind of information </p>
</section>
<header> Tag
The header element, seen in the example HTML5 page that I showed earlier, is a container for elements that generally appear at the top of the page and carried across an entire site. The <header> element is excluded from the outline. You can also add <header> elements to other sectioning elements or even nest one <header> within another. So, the <body> element can have header, and each <section> can have its own <header>.
<navigation> Tag
HTML5 also provides a <nav> element, a sectioning element that is intended to contain groups of navigational links on the page. The element is primarily intended for section that consist of major navigation blocks. So, it's a judgment call for the creator of the page. You can use the <nav> element on all your navigation lists or only on the primary navigation for the page.
Syntax
<header>
<nav>
<ul>
<li> <a href = "#"> Home </a> </li>
<li> <a href = "#"> About us </a> </li>
<li> <a href = "#"> Services </a> </li>
<li> <a href = "#"> Products </a> </li>
<li> <a href = "#"> Contact </a> </li>
</ul>
</nav>
</header>
<footer> Tag
The <footer> element is just like the <header> element, except that it's a footer. The <footer> contains the footer material for the nearest sectioning ancestor. If a <footer> element is nested inside a <section> element, it is considered to be the footer of that section, not the footer for the page itself. Like the <header> element, the <footer> element is not considered part of the page outline.
You can probably imagine the sorts of things you might put in a <footer> element, and if you can't, most web pages are footers.
Syntax
<footer>
<p>Posted By ABC</p>
<p>I shared with you my experience about computer language information</p>
<p>
Contact Information:<a href = "mailto:abc1234@example.com"></a> abc1234@example.com
</p>
</footer>
<article> Tag
The <article> element is another sectioning element, but unlike <header> and <footer>, it is included in the document outline. It is equivalent to the <section> element, with special semantic meaning.
Syntax
<article>
<h2>Information Technology</h2>
<p>The modern age is being literally ruled by information technology. It has become part and parcel of modern life. There is a hardly any sphere of human life where IT as it is popularly called, has not entered. Information technology is the system or devices used for receiving, storing and analyse in all its forms and their application in almost all spheres of our life.
</p>
</article>
<aside> Tag
Asides are represented by the aside element. The aside tag can be used for any content that belongs in a section but isn't considered part of the main page flow. That means you can also use it for things like advertisements that you want to display but wouldn't want to treat as part of the page's content.
Syntax
<aside>
<h2>Information Technology Example</h2>
<p>It is used in all aspects of human life such as courts and office, mills and factories, schools, colleges, and universities, libraries and laboratories. Information Technology saves human labour and relieves man from the monotony of work.
</p>
</aside>
NOTES
If you're creating web pages for an audience that uses known browsers, you can use whichever tags those browsers support.
