MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How HTML 5 Structural tags build a web page

In this article we will see how we can build a sctructure of website with the HTML5 tags.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

HTML5 introduction has brought in good amount of tags to the web development. These are the tags that hold the potential to replace some of the commonly used tags used in web development.

Let us go through the structure of the structural tags. The structure of the tag can be defined as below.

<section>

What is a section? It is nothing but a content grouping which has header as its preceding which is then followed by footer. The best part of section is that it can be nested inside of each other in case this is required. This can as well hold a good amount of regular mark up.

The next in the list comes the turn of a <header> which is nothing but grouping of headlines. This also holds the potential to list some complementary details pertaining to the section. And then we have a <footer> that is known to contain the details about the section. The example includes who is the author of the footer, copyright related information etc.

<nav> tag is then made use of in order to define the navigation area which should be a sibling of section where the content lies, header as well as the footer.

Comes the turn of the next tag which is known by the name of <article> which in altogether is a entry in blogs, articles, magazines and so on. Last but not the least we have the tag that is used in order to indicate the content being related tangentially to it.

The time now is to bring in all these tags together and see how it works. The below Listing lists the way to put them together so as to form a blog making use of the structural tags:

Listing 1: Making use of all the tags

<!DOCTYPE html>
<html>
  <head>
    <title>A typical Blog - MrBool tutorial</title>
  </head>
  <body>
    <header>
      <h1><a href="#">A typical blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Who we areHome</a></li>
        <li><a href="#">What we doArchives</a></li>
        <li><a href="#">Our Products</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#"> Page Title</a></h1>
        </header>
        <section>
          <p>This is a content…</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Page Title</a></h1>
        </header>
        <section>
          <p>This is a content...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Page Title</a></h1>
        </header>
        <section>
          <p>This is a content...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2013 All Rights Reserved</p>
    </footer>
  </body>
</html>

From the above code or example, it is clear that the scenario described here is just to showcase the content’s simplicity. However let us go a bit further and try to see the complex working of these structural tags.

It can be seen clearly that the tags in them are a lot more descriptive rather than you providing them just with the id attribute and that took a div. Other than this, it holds the potential to provide you with the additional advantage of a closing tag (descriptive closing tag). This is due to the reason that the tag <article> is way good to understand rather than worrying about the <div> id.

The big question is that how to make use of the above mentioned tags? This can be made possible with few steps which works in majority of the browsers and that too the latest ones. Also it holds the capability of working in internet Explorer 6. However there are few hurdles that needs to be crosse so as to make this happen.

The very first hurdle is that majority of the web browsers do not hold the capability to understand the newly introduced HTML5 doctype. They actually are not aware about the new tags that HTML5 has brought it. The good thing is that they hold the capacity to deal well with the tags that are not known. This is made possible due to the browsers flexibility. But then again we have one issue here. We all know about the unknown tags that do not have any sort of default styling. Also due to the fact that that they do not have any default styling, they are looked upon as inline tags.

The new tags that we have discussed above are the structural ones. Also these are known to be block level attributes/elements thereby making it mandatory to include display:block in the attribute/element pairs whenever we make it to style with CSS. Therefore it is required to make use of the CSS which will make these tags very easy to use and at anytime. Due to the popularity of HTML5, we can remove display:block for the reason that this will already be included as a part of our browsers in the form of default styles.

At the time of defining of the tags in CSS, the same are being targeted directly. This is done without any class symbols or the id symbols.

Listing 2: Making use of CSS to define the tag

Section {
     width: 960px;
     margin: 0 auto;
}
 
header {
     padding: 10px;
     background: golden;
}
 
nav {
    /* nav needs to be defined here;*/
}
aside {
     float: right;
     width: 375px;
}

Few display the example of what we discussed above. We can incorporate the id to any of these in case more than one is required. Post this, that class or id in your CSS will be targeted. Below lists the example of the same:

Listing 3: Adding id or class to the CSS

#wrapper source src {
    /*This introduces the wrapper source;*/
} 
Nav content {
    /* Content needs to be defined here with sections as well;*/
}

Listing 4: Displays the CSS tags with an ID

#wrapper {
    /*Defining the wrapper;*/
}
 
.content {
     /*Content area, section or division to be defined;*/
}

Issues with internet Explorer Support

We need to understand the issue when it Internet Explorer support is required. IE is known to work just with the new tags. However this will not apprehend any CSS that is associated to them. This however is not going to solve the purpose. That is why the good thing is that the capability of Internet Explorer makes it very adaptable with even a soft push when Javascript is applied to the same.

All what is required to make this happen is to come with a node making use of the script which is required for each of the new tags. We will notice then the IE to be applying with the styles to these new tags with ease. How the code looks is displayed below. This can be put directly in the document’s header. Or this can also be placed in the content of the script tag that is usually placed into the file and then included in the same.

Listing 5: IE applying styles to the tags

<script>
  document.createAttribute('header');
  document.createAttribute('footer');
  document.createAttribute('section');
  document.createAttribute('aside');
  document.createAttribute('nav');
  document.createAttribute('article');
</script>

Prior to leaving this code, the thing that needs to be kept in mind about the HTML5 script tag is that the HTML5 always takes into account the assumption type =”text/javascript” and that too on any of the script element. That is why this is should not be included.

The following screenshot displays the structure which is normally used by the document.

Sctruture used

Figure 1: Sctruture used

Overcoming Internet Explorer Issues:

Listing 6: Defines IE bits and other technical details

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is a Template - MrBool tutorial</title>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div id="wrapper">
	<header>
		<hgroup>
			<h1>This is a HTML5 Template</h1>
			<h3>This is a standard template</h3>
		</hgroup>
		<nav>
			<ul>
				<li><a href="#">Who we are</a></li>
				<li><a href="#">Introduction to HTML5</a></li>
			</ul>
		</nav>
	</header>
	<section></section>

	<footer>
		<div class="footer_navigation">
			<ul>
				<li><a href="#">Who we are</a></li>
				<li><a href="#">Introduction to HTML5</a></li>
			</ul>
		</div>

		<hgroup>
			<h3>By ABC</h3>
			<h4>from XYZ, WI</h4>
		</hgroup>

		<address>
			<a href="mailto:abc@gmail.com">To be e-mailed to me</a>
		</address>

	</footer>

</body>
</html>

So what are you waiting for? This is the time now for documents structuring. This is done making use of new tags which are provided by HTML5. So we can begin, right now, to structure our documents using the new tags provided in HTML5. We need to make use of the few steps and make them work today. And then it will open the road for the future and get compatible with all the browsers.

Conclusion

It is always better considering going with the new structural tags whenever we thing to develop a new website.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login