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
footer, and the
Elements can sit inside other elements (just like the
body sit inside the
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.
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
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
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