Building HTML5 Pages That Mean Something …

The main benefit of HTML5 is to build a web page using cleaner code. HTML5 makes things more systematic. The code in HTML5 is written in such a way that even a novice can understand it. In a futuristic scenario, even machines will be able to understand

The main benefit of HTML5 is to build a web page using cleaner code. HTML5 makes things more systematic. The code in HTML5 is written in such a way that even a novice can understand it. In a futuristic scenario, even machines will be able to understand HTML5 in such a way that they will be able to analyze data on the web. Contrary to historical HTML (that was in many ways design and structure oriented), the new HTML or as it is known – HTML5 – we are striving to markup HTML in such a way that it is clear to what type of content is in elements (header area, menu, article and so forth).

This post is derived out of Chapter 2 of the book HTML5 and CSS3 Transition, Transformation, and Animation
Want the full Chapter 2 as a PDF – No worries here it is

Easier and Faster Syntax

Sectioning is an important part of HTML5. The sectioning elements are used in HTML5 to build a semantic web page in a quicker way. The elements used in HTML5 for sectioning are as follows: header, footer, nav, article, and aside.

Header

A crucial reason for using semantics is to increase accessibility. Prior to HTML5, there was no specific way to tag content based on its definitions. HTML5 changed all that. The <div> tag was used extensively along with headings to create a header for the web page. However, now we have the header tag. A header tag may contain headings nested into it but that is not a necessity.

Searching stuff on the internet is possible due to the search engines such as Google Search and Bing. SEO [Search Engine Optimization] is a concept that is crucial and imperative for a website. For example, search engines with the help of crawlers can access a web page content based on the elements that contain them.

Hence, the header element is very important, it provides more accessibility than other elements, like the footer. The search engine finds the content in the header tag quite easily. Moreover, using the header element accounts for an appropriate way of web designing. The header can be used to denote the heading of a blog, a web page, or an article.

Let’s look at an example of a header element using the following code snippet:

<!DOCTYPE html>
<html>
<body>
<header>
<h2> Importance of the Header element </h2><hr>
</header>
<p> The header element tells the crawler about the content
inside it </p>
</body>
</html>

 

Footer

The footer element is used to denote things like the author’s name, contact
information, and copyright patent to mention a few. A footer allows the programmer
to give a general idea about the website. However, footers can be used more than
once in a document. An article can have its own independent footer in addition to
another footer element in the source code for a specific web page. It completes the
information in the document and makes it more meaningful.

Let’s look at an example of a footer element using the following code snippet:

<!DOCTYPE html>
<html>
<body>
<header>
<h2> Importance of the Footer element </h2><hr>
</header>
<p> Footer element gives additional info about the website or
any blog </p>
<footer>
<a href="http://www.packtpub.com"> Packt Publishing </a>
<br>
<p> Copyright by Packt </p>
<a HREF="/index.html">Index</a>
</footer>
</body>
</html>

The output of the code upon execution would look like this:

Nav

The nav element is an important part of HTML5 and is used extensively for navigation purposes. It doesn’t mean that all links on a page have to be in the nav tag. For example, the footer element has links to varied content and the nav tag is not mandatory for these links.

The nav element is used when there is a group of navigation links contained in a specific section of the page. It is also used extensively where there are links to other pages or a part of the same page. Prior to HTML5, we used something like the following code snippet for navigation purposes:

<div id="nav">
<ul>
<li>…

However, with the nav tag, we can use more realistic code where we group the links in a nav element. Let’s look at an example of a nav element using the following code snippet:

<!DOCTYPE html>
<html>
<body>
<header>
<h2> Importance of the Navigation element </h2>
</header>
<p> Use of the Nav element </p>
<hr>
<p> We can go to forums or refer to the articles on this page
<nav>
<ul>
<li> <a href="http://www.packtpub.com"> Packt Publishing
</li>
<li> <a href="http://www.packtpub.com/books/ajax"> Books on
AJAX </li>
<li> <a href="http://www.packtpub.com/latest_articles">
Latest Articles </li>
<li> <a href="http://packtlib.packtpub.com/"> Packt Online
Library </li>
<li> <a href="http://www.packtpub.com/news-center"> News
</li>
</nav>
<br>
<footer>
<p> <a href ="http://www.packtpub.com/contact?r=1"> Contact
us </a> <p>
<a href="http://www.packtpub.com/about">About us</a>
</footer>
</body>
</html>

The output of the code upon execution would look like this:

If you observe the code, you will find that there are links between the <nav> and</nav> tags as well as links in the footer tags. The content and links between the nav tags are for major navigation purposes, whereas the links in the footer tag are for some additional information.

Want more …  get the full second chapter totally FREE

This post is derived out of Chapter 2 of the book HTML5 and CSS3 Transition, Transformation, and Animation
Want the full Chapter 2 as a PDF – No worries here it is


– go from a “zero to geek” | 02Geek.com – ©

Leave a Reply

Be the First to Comment!

Notify of
avatar

wpDiscuz