Lesson 4

Structural Tags

What are structural HTML tags?

These are the main tags you want on your website. These structural tags are like the main rooms of a house. Almost every website has them, but each website styles them differently. You can also add lots of other types of tags. Some that you’ve already seen, and others that you’ll get to know better as we keep going.

There are so many HTML tags to pick from when you’re building a website. Each one has a different job. Some are big and some are small.

Here are some important structure tags.

<header>

<nav>

<main>

<footer>

What is a <div>?

<div> is another important tag to use. It’s a pretty basic tag that’s used as a generic box when there isn’t another tag for the job. Most websites use lots of div tags. To tell them apart, most div tags also include class attributes that label them.

<div class=”special”>

What are tag attributes?

Earlier on you learned about the pieces that make up a tag. Some tags include attributes.

Some tags have required attributes, like links. Others are optional, like IDs and classes, but help make your code more descriptive. Here are some examples of tags.

Are you ready to learn?

Figure out the best order to place these basic structural tags in.

Change the order of the tags and see what happens when you do.
Once you put them in the right order, experiment with adding different class attributes to them.

Here’s a list of the different class attributes values you can test:

tall
purple
green
border
invisible