Structural Elements
HTML5 provides us with a variety of tags that we can use when dividing our page into different parts. When browsing the web, you would have noticed that web pages typically have a few common things to them. For example, a web page will typically have a logo and page navigation area at the top of the page. We would call this area of the page the header. You may also have noticed that the bottom of the page may include a list of links and copyright information. We would call this area the footer. The following diagram shows the representation of a few of the main elements of a web page:
Figure 2.1: HTML5 page elements
In this topic, we will be looking at the following HTML5 page elements:
- header
- footer
- section
- article
- nav
- aside
- div
The header Tag
The header tag is used to describe the header or top area of a web page. Typically, inside this tag, you would have the page heading, a logo, and, possibly, the page navigation. Prior to HTML5, you would use a div tag with a class name so that the header could be styled, and its intention was clear to developers. HTML5 improves on this by giving us a tag specifically for this very task. You will learn more about this improvement under the section, Semantic Markup in Chapter 3, Text and Typography. Now, examine the following codes that show the differences between the old and new way of writing the markup for the header area:
<!-- old way -->
<div class="header">
… heading, logo, nav goes here
</div>
<!-- new way -->
<header>
… heading, logo, nav goes here
<header>
Now, let's open the Packt website at https://www.packtpub.com/ to see how a header is represented in an actual website. In the following diagram, you can see that the header element is highlighted via a box, illustrating where a header element is typically placed on a web page:
Figure 2.2: The header element
In the following figure, you can see that the header element is highlighted via a box. As this is an example taken from the Packt website, you will notice that it contains items such as the company logo, search bar, and the Sign In button:
Figure 2.3: The header element on the Packt site
The footer Tag
The footer tag is very similar to the header tag but is used at the bottom of a web page. You would typically have the copyright information and website links inside the footer. Similarly, with the header tag in the previous version of HTML, you would use a div tag with a class name. Since the use of footers on web pages is so common, HTML5 provides a new tag solely for this purpose. The following codes show the differences between the old and new way of writing the markup for the footer area:
<!-- old way -->
<div class="footer">
… copyright, list of links go here
</div>
<!— new way -->
<footer>
… copyright, list of links go here
<footer>
In the following figure, you can see that the footer element is highlighted via a box, illustrating where a footer element is typically placed on a web page:
Figure 2.4: The footer element
In the following figure, you can see that the footer element is highlighted via a box. As this is an example taken from the Packt website, you will notice it contains items such as useful links and social media icons:
Figure 2.5: The footer element on Packt site
The section Tag
The section tag is different from the header and footer tags as it can be used in many different places on a web page. Some examples of when you would use a section tag could be for the main content area of a page or to group a list of related images together. You use this tag anytime you want to divide some of the markup into a logical section of the page. Again, prior to HTML5, you would most likely use a div tag with a class name to divide a section of the page. The following codes show the differences between the old and new way of writing the markup for the section area:
<!-- old way -->
<div class="main-content-section">
… main content
</div>
<!— new way -->
<section>
… main content
</section>
In the following figure, you can see that the section element is highlighted via a box, illustrating where a section element is typically placed on a web page:
Figure 2.6: The section element
The article Tag
The article tag is used for the self-contained part of a web page. Some examples of an article could be an individual news article or blog post. You can have multiple articles on a page, but each must be self-contained and not dependent on any other context within the page. It is common to see the article tag used in conjunction with section tags to divide up an article into discrete sections. The following code shows this:
<article>
<section>
...primary blog content
</section>
<section>
...secondary blog content
</section>
</article>
In the following figure, you can see that the article element is highlighted via a box, illustrating where an article element is typically placed on a web page:
Figure 2.7: The article element
The nav Tag
Inside the navigation area, you will have a list of page links for the different pages of the website. Prior to HTML5, you would again use a div tag with a class name. The following codes show the differences between the old and new way of writing the markup for the navigation area:
<!-- old way -->
<div class="navigation">
… list of links go here
</div>
<!-- new way -->
<navigation>
… list of links go here
</navigation>
In the following figure, you can see that the nav element is highlighted via a box, illustrating where a nav element is typically placed on a web page:
Figure 2.8: The nav element
In the following figure, you can see that the nav element is highlighted via a box. As this is an example taken from the Packt website, you will notice it contains a list of page links:
Figure 2.9: The nav element on the Packt site
The aside Tag
The aside tag is used to show content that is indirectly related to the main content of a document. You will typically see this tag used for sidebars or for showing notes relating to some content. Again, before the advent of HTML5, developers would use a div tag with a class name for this type of content. The following codes show the differences between the old and new way of writing the markup for the aside element:
<!-- old way -->
<div class="sidebar">
… indirectly related content goes here
</div>
<!—new way -->
<aside>
… indirectly related content goes here
</aside>
In the following figure, you can see that the aside element is highlighted via a box, illustrating where an aside element is typically placed on a web page:
Figure 2.10: The aside element
The div Tag
The div tag is probably the most widely used tag on the World Wide Web. In fact, if you view the source code of your favorite website, most of the HTML elements you see will be div elements. This tag actually stands for division and is used to divide or group content together. Although HTML5 provides specialist elements for the most common types of page groups, you will still find many uses for using div tags. It might help to think of this element as a generic way to group the markup into logical parts. The following are a few example codes of how a div tag may be used:
<div class="sidebar">
… indirectly related content goes here
</div>
<div class="navigation">
<div class="navigation-inner">... navigation links go here</div>
</div>
That concludes our tour of the structural HTML elements that are important to us. We will now apply some of this theory with the help of an exercise.
A News Article Web Page
Now that we have an understanding of the structural elements provided by HTML5, let's put our newly acquired knowledge into practice by writing the structural HTML for a news article page. You can get a sense of what this type of page will look like by visiting a popular online news website such as https://theguardian.com or https://bbc.co.uk/news and clicking on an article.
Exercise 2.01: Marking up the Page
In this exercise, we will create the markup for our HTML5 page. Our aim will be to produce a page with output, similar to that of Figure 2.10 without the <section> element in it.
Let's complete the exercise with the following steps:
- Create a file named news.html in VSCode.
- We will use the following starter HTML document, which contains some basic styling for our structural elements. Don't worry if you don't understand the CSS just yet; you will by the end of this book:
<!DOCTYPE html>
<html>
<head>
<title>News article page</title>
<style>
header,
nav,
article,
aside,
footer {
background: #659494;
border-radius: 5px;
color: white;
font-family: arial, san-serif;
font-size: 30px;
text-align: center;
padding: 30px;
margin-bottom: 20px;
}
header:before,
nav:before,
article:before,
aside:before,
footer:before {
content: '<';
}
header:after,
nav:after,
article:after,
aside:after,
footer:after {
content: '>';
}
article {
float: left;
margin-right: 20px;
width: 60%;
}
aside {
float: left;
width: calc(40% - 140px);
}
footer {
clear: both;
}
</style>
</head>
<body>
<!-- your code will go here -->
</body>
</html>
- First, let's add our first structural element, which is the header tag. We will place it in between the opening and closing body tags. In this example, we will just add some text as content but, when building a real web page, you would include things such as logos, search bars, and links:
<body>
<header>header</header>
</body>
- After our header tag comes the navigation area, which is used for including links to different pages of the website. Once again, we will just add some text for the content but, when building a real web page, you would include a list of links:
<body>
<header>header</header>
<nav>nav</nav>
</body>
- For the main news article content, we will use an article tag. Once again, we will just add some text for the content but, when building a real web page, you would include the content of the articles:
<body>
<header>header</header>
<nav>nav</nav>
<article>article</article>
</body>
- To the right of the article tag, we have an aside tag, which will typically contain content such as advertising images or related content links:
<body>
<header>header</header>
<nav>nav</nav>
<article>article</article>
<aside>aside</aside>
</body>
- Finally, we can finish off the markup for our web page by adding the footer tag at the bottom of the page. For now, we will just add some text as content but, in real life, you would include elements such as copyright information, and links to other pages:
<body>
<header>header</header>
<nav>nav</nav>
<article>article</article>
<aside>aside</aside>
<footer>footer</footer>
</body>
If you now right-click on the filename in VSCode on the left-hand side of the screen and select open in default browser, you will see the following web page in your browser:
Figure 2.11: Output for the product page
If you look at this page in your browser, you may not be impressed with what you see, but you actually have the foundations in place for a web page.