Lesson 8

Building Blocks

Structural HTML elements explained

We've now learnt the basics of HTML and CSS. In this lesson we're going to structure our content by grouping elements together.

Some HTML elements for structuring content include header, section, article, nav, footer, and the div.

Elements can sit inside other elements (just like the head and body sit inside the html element).

Structural elements don't have a default style. You use CSS to give elements style, and here we've given the elements of our page some background colours to show the difference between them.

When dividing up your page, try to use as descriptive an element as possible. section and article are good examples of descriptive HTML elements. If you are grouping elements together for purely stylistic purposes (such as centering everything in the page, which we'll come to later), you can use a div.

A page can have lots of divs but we may want them to look different. We can do this by giving the div a name by setting an id and/or class attribute which we can target from the CSS. The id attribute is a unique identifier and there can only be one element with that id on a page. Classes can can be used as many times as we wish per element and per page. Classes are often used to set common styles that are the same across several elements.

IDs and classes can be applied to any HTML element, even the body.

Play
Go to the next lesson

index.html

style.css

the web page

New Window

Tasks

  • Change the width of the header
  • Change the background colour of article
Next Lesson
Practical understanding of  HTML images, structure and semantic HTML5 Badge

Intermediate HTML

Congratulations! You’ve just earned the Intermediate HTML badge!

If you'd like to send this badge to your Mozilla backpack, just fill out the form below.

This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.