Overview
If you are new to HTML, it is best to get the basics first. You can learn the basics of HTML by going to our HTML tutorial section. Once you are knowledgeable with the basics then this HTML5 tutorial will show you how to use the new elements that were introduced for this version.
HTML5 was created with the view that it will use less scripting, less plugins and comes with better error handling and better features. It is developed with the concept that it is device independent which makes it the tool of choice when developing for mobile phones.
This HTML5 tutorial is designed by creating a basic layout in mind and then populating the layout using the new elements introduced in HTML5.
The first tag that is in an HTML5 web page is the doctype tag <!doctype html>. This tells the browser that it is dealing with an HTML document.
Figure 1
The image above shows a simple and contemporary web page layout that is easy to read by users. It’s also one of the more common layout especially for blogs. To create this type of layout in HTML5 is very simple as explained in the succeeding sections of this tutorial.
Header
The header tag appears after the <body> tag in HTML. Its purpose is to give an introduction or contain a group of navigation elements. The introduction can be the banner of the web page or website itself. Typically a header contains <h1> to <h6> tags. In WordPress themes, the header tag can usually be found in the header.php file if the theme comes with one.
The header tag cannot appear within another <header> tag, a <footer> tag and an <address> tag.
Note: Do not confuse the header tag with the head tag. The latter still functions the same way as it did in the previous version of HTML which is displaying the text on top of the browser bar / browser tab. As an example, you can create an html file with the following code below:
<!doctype html>
<html>
<head>
<title>My HTML5 Web Page</title>
</head>
<body>
<header>
<h1>Website Tutorial</h1>
</header>
</body>
</html>
The code above can be used to form the Header shown in figure 1.
Nav
The <nav> tag is used to indicate the unordered list inside the tag is the main navigation menu. The list contains menu links. Using the code above, all you need to do is add the following code after the </header> tag.
<nav>
<ul>
<li><a href="http://htmlpress.net/wordpress-tutorial/">WordPress</a></li>
<li><a href="http://htmlpress.net/html-tutorial/">HTML5></a></li>
</ul>
</nav>
The code above can be used to form the Navigation in figure 1. This navigation code can be improved by making the navigation menu flow in a horizontal layout. Tip: use CSS.
Section
As the name of the tag indicates, the <section> tag defines a section in a HTML document such as header and footer. To complete the header section given in the example above, just enclosed this with the section tag.
<section id="header-banner">
<header>
<h1>Website Tutorial</h1>
</header>
</section>
The id attribute in the <section> tag will be useful later on for identification purposes and when using CSS in your coding. In keeping with the KISS principle, the above code is a bit redundant. The <header> tag can stand on its own without it being contained in the <section> tag. Same goes with the <footer> tag which will be explained later on.
The <section> tag can also be used for the Feature section and the Main content area as shown in figure 1. The coding will be as follows:
<section id="feature-banner" style="width:100%; float:left; border: 1px solid black;" >
<h1>Feature</h1>
</section>
<section id="main-content" style="width:50%; float:left; border: 1px solid black;" >
<h1>First Post</h1>
</section>
The width attribute has a value of 100% which means it will take up the whole page. The border attribute is included so that it is easier to visualize the area that the div tag occupies. This attribute will be used through out this tutorial. In practice it is good to have the border attribute when developing the web page so that you can see the area defined for your div tags. Then when it comes to putting your web page live or in production, all you need to do is remove the border attributes.
Aside
The <aside> tag is used to contain contents that belong to the side bar. More side bars are found on the right hand side of the page but there are side bars that are found on the left hand side of the main content. Still working with figure 1, the coding for the side bar will be as follows:
<section id="side-bar" style="width:40%"; float:right; border: 1px solid black;" >
<h1>Side Bar</h1>
</section>
The <div> tag is still one of the key tags when it comes to defining your web page’s layout which means you can use this tag within the <section> tag if it’s needed. Be sure to visit our basic tutorial for div tags if you need to refresh your memory.
Article
The <article> tag specifies self-contained content. This content is independent entry in a web page. To illustrate this, we’ll use the existing code above and have an article posted in the main section.
<section id="main-content" style="width:50%; float:left; border: 1px solid black;" >
<article>
<header>
<h1>First Post</h1>
<p>By Me</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum,...
</article>
</section>
Email Us
Skype Us
Webhosting