Basic HTML5 Tags

Basic HTML5 Tags

Long time ago people were used to display contents using HTML table tags and align logo on top and layout etc… Now, people are using dives instead of table tags.

Dives and tables are not enough to identify different parts of the body like header section footer section or side panels or article contents etc etc..

HTML5 come up with solution to let browser and crawlers understand the important part of your html body.

HTML5 Header Tag

Header tag is newly introduced tag in HTML5. Don’t get confused with html head tag which is used to display title and add css and JavaScripts. HEADER in HTML5 is used to show logo and title of the content.

HTML5 Header Tag Example

<!document html>
<Html>
<Head>
<Title> Html5 Basics Tag. </Title>
</Head>

<Body>
    <Header>
    <H1> This is H1 tag inside HTML5 Header tag. </H1>
    </Header>
</Body>
</Html>

You can also add logo of your website inside HEADER tag.

Html5 Nav Tag

It’s known as Navigation tag. You may have seen links in html to let the user navigate through web pages. That’s what you can put inside the navigation tag.

HTML5 Nav Tag Example.

<!document html>
<Html>
<Head>
<Title> Html5 Basics Tag. </Title>
</Head>

<Body>
    <Header>
    <H1> This is H1 tag inside HTML5 Header tag. </H1>
    </Header>
    <Nav>
        <ul>
            <li><a href="link1.html" >Home</a> </li>
            <li><a href="link2.html" >Archive</a> </li>
            <li><a href="link3.html" >Popular</a> </li>
            <li><a href="link4.html" >Blog</a> </li>
            <li><a href="link5.html" >Contact US</a> </li>
        </ul>
    </Nav>
</Body>
</Html>

HTML5 Section Tag

The main content or important content you can put into the section tag as shown in below code.

<Section>
    This is important content of your page.
</Section>

HTML5 Aside Tag

The content related to your main content you can put into the side bar known as aside. Let’s see the example of HTML5 aside tag.

<aside>

<h2>Related post.</h2>
    This is less important content but it's related to the main content.
</aside>

HTML5 footer Tag

Almost all website has footer tag at the bottom where they put copyright information and other useful links for navigation. HTML5 directly supports footer tag as shown in below example.

<Footer>
    Copyright information. 2013-2014.
</Footer>

How to remove Security TagsHTML5 TutorialASP.net HTML5 Generate Article TagHTML5 With DataBaseHTML5 Video Player TutorialRegularExpression remove html tagsHtml5 Doctype HeaderHTML5 Slider control and JavaScriptBasics of jqueryHTML5 audio player tutorialHTML5 Canvas Animation

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.