Introduction

In the previous chapter, we learned about the basics of HTML and CSS. In this chapter, we will consolidate this basic understanding and look at how web pages are structured with HTML and CSS. When creating web pages using HTML, it is imperative that you use the correct elements. This is because HTML is read by both humans and machines, and so the content of a web page should be associated with the most appropriate element. Additionally, any error in the code might be difficult to track if the code base is too large.

The HTML language offers a vast array of different tags that we can place at our disposal. In this chapter, we will focus on the structural elements that are used to divide the web page up into its key parts. You may be familiar with the concept of a page header or footer, and these would be examples of structural elements. We will be looking at these amongst many other HTML structural elements.

In this chapter, we will focus our attention on the HTML5 version of the language, which is the most current version of HTML. HTML5 offers us additional tags that enable us to make our markup more meaningful. The developer experience is more enjoyable compared to writing XHTML as the HTML5 language is less strict with regard to syntax.

Note

In this chapter, we will use the terms "tags" and "elements" synonymously.

Web pages are typically styled using CSS. Once we have our web pages marked up correctly, we need to know how to style these into a range of layouts. CSS offers us a range of options for laying out our pages, but the three most common methods are float, flex, and grid-based. In this chapter, we will explore each of these techniques in turn.

Just knowing the various layout methods is not enough to style web pages. We will investigate the box model, which is foundational to understanding how HTML elements are styled. We will break this down into the individual layers – content box, padding, border, and margin. With this knowledge in hand, you will be free to develop a host of different web page layouts.

We will now take a look at the structural elements provided by HTML and examine what the key elements are one by one.