Structural Tags

Most pages have these

 

Most HTML documents have the following structural tags inside the body tags.

<header>

The <header> tags contain information about the website as a whole. This is often the information at the top of the page that stays exactly the same as you go from page to page on a website. The logo, tagline, and navigation are usually found here.

<nav>

The <nav> tags hold main navigational items for the website. This is usually found inside the <header> tags, or directly underneath these tags. These are the links that take you to the main pages of the site.

<main>

The <main> tags hold the main information about the current page. This content is usually the information that changes from page to page.

<footer>

The <footer> tags contain information about the website as a whole. This is often the information at the bottom of the page that stays exactly the same as you go from page to page on a website. The copyright info, address, and sometimes contact information is usually found here.


These tags are found between the body tags, and this is the order these structural tags are usually found:
<body>

<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>

</body>

Activity

Here you can test out what you read, and achieve badges.

Hint

Use the shortcut keys to cut and paste these tags into different locations. The shortcut for cut is cmd+x (PC = ctrl+x). The shortcut for paste is cmd+v (PC = ctrl+v).

Instructions


Arrange the tags in this activity into the correct order.

  1. Cut and paste the tags to be in the correct order. See the hint for cut/paste instructions. Refer to the information above for help.

HTML

CSS

JavaScript

Output