HTML5 Website Layout with Example: So far, we have discussed how to add lists, tables, images, links, and media to web pages using HTML 5. However, we need to learn about a few more elements that are essential to HTML 5. These elements will help you to further boost the structure and semantics of your website, making it easier for web browsers to understand the markup and render your website correctly.
HTML5 Website Layout:
The <nav> Element
The <nav> element is exclusive to HTML 5 and allows you to group different links together, resulting in extra structure and stronger semantics which may help screen readers and web browsers. Although the definition of the <nav> element is pretty simple, no one has been able to fully explain how to use it properly.
However, a simple markup using an <nav> element is as follows
The <nav> element Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Using Navigation Element</title> </head> <body> <h1>How to use nav element in HTML 5</h1> <nav> <a href="blog.html"> Blog</a> <a href="about.html">About Us</a> <a href="contact.html">Contact Us</a> </nav> </body> </html>
The web browser will represent the above markup as follows:
Web developers normally use navigation elements for main navigation bars or just above the footer. There are also other places where you can use this element, such as Table of Contents, Previous/Next Buttons, Search Forms, and Breadcrumbs.
The <header> Element
Just like the navigation element, the header element is exclusive to HTML 5. The header element is actually a “group of introductory or navigation aids.” It is mostly used at the beginning or top of the web page, but you can also use it at the start of any new section or division. Similarly, it usually contains an introductory heading, but you can also insert logos, navigation menus, or a search form.
A simple markup for a header element is shown in the following example:
The <header> Element Example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Using Header Element</title>
<style>
#head {
background-color: #F1F1F1;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<header id="head">
<h1>How to use header element in HTML 5</h1>
<nav>
<a href="blog.html">Blog</a>
<a href="about.html">About us</a>
<a href="contact.html">Contact Us</a>
</nav>
</header>
</body>
</html>
Now we have a header at the top of your web page.
The grey background, as well as the height and the width of the header, is a result of certain CSS codes which we shall study in the CSS section of this course.
The <div> Element
The division element is perhaps one of the most important and widely used elements in HTML 5. The division element does not represent anything like the paragraph <p> or image <img> elements do; rather, it is a “generic container” which maintains the flow of content and provides extra structuring and semantics. For instance, if you want to style a particular chunk of content, the <div> will do the job perfectly.
Take a look at the following example.
The <div> Element Example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Using Header Element</title>
<style>
#wrapper {
background-color: #F1F1F1;
height: 80px;
width: 500px;
color: red;
}
</style>
</head>
<body>
<h1>How to use div element in HTML 5</h1>
<div id="wrapper">
<p>The div element has no special meaning at all.
It represents its children.<br />
It can be used with the class, lang, and title attributes to mark up semantics<br />
common to a group of consecutive elements.</br>
W3C Specification</p>
</div>
</body>
</html>
Similarly, you can use <div> to create and style different sections, divisions, headers, footers, and almost anything else you like.
The <footer> Element
Finally, another important semantic element of HTML 5 is the footer <footer>. As the name suggests, this element defines the footer of a page or section. This particular element should contain as much information as possible about its containing element.
Normally, it contains:
- Contact information
- Authorship and copyright information
- Back to top links (see the previous chapter)
- Related documents
- Site maps
The following example demonstrates how to use footer in HTML 5.
The <footer> Element Example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Using Header Element</title>
<style>
#wrapper {
background-color: #F1F1F1;
height: 70px;
width: 550px;
color: red;
}
</style>
</head>
<body>
<h1>How to use footer element in HTML 5</h1>
<div id="wrapper">
<p>The footer element represents a footer for its nearest ancestor sectioning content.<br />
A footer typically contains information about its section such as who wrote it, links to<br /> ,copyright data, postal and email addresses and the like.</p>
</div>
<footer>
<p>Witten by: David Sinclair<br />
Visit us at: xyz.com, </br />
mail to: <ahref="mailto:david@xyz.com">david@xyz.com<
/a>.<br />
P.O. Box No. 111, New York, <br />
United States of America</p>
</footer>
</body>
</html>
The <footer> Element Example Output
Remember that footers will not magically go to the bottom of the page. You still have to style them using CSS as you would do for all other elements. It only has semantic value, as it tells the browser that the data inside the element is footer data.
Exercise
Task:
Create a navigation bar containing four different links. The first link will lead you to Google, the second will go to the home page of www.example.com, the third one will go to Twitter, and the fourth one will take you to the home page of the website of your choice.
Solution:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Exercise</title> </head> <body> <h1>Exercise 9</h1> <nav> <a href="https://www.google.com">Google</a> <a href="http://example.com/">Example.com</a> <a href="https://www.facebook.com/">Facebook</a> <a href="http://www.imdb.com/">Internet Movie Database</a> </nav> </body> </html>