Structure elements (header, nav, main and footer)

Hello, students! In this lesson, we will learn about structural elements.

Structural elements are HTML elements that provide information about the meaning of the content they contain.

Topics

• What are structural elements?
• Top-level structural elements
• Code examples

What are structural elements?

Structural elements are HTML elements that provide information about the meaning of the content they contain.

For example, the header element is used to indicate the header of a page.

Structural elements are important for creating web pages that are easier to understand for humans and search engines.

Top-level structural elements

There are four top-level structural elements: header, nav, main, and footer.

header Element

The header element is used to indicate the header of a page.

The header element usually contains important information about the page, such as the page title, site logo, and links to the main pages of the site.

Here is an example of code to use the header element:

<header>
  <h1>My Site</h1>
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</header>

This code will create a header with a title, a logo, and three links.

nav Element

The nav element is used to indicate the navigation of a page.

The nav element usually contains links to other pages on the site.

Here is an example of code to use the nav element:

<nav>
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</nav>

This code will create a navigation bar with three links.

main Element

The main element is used to indicate the main content of a page.

The main element usually contains the main content of the page, such as text, images, and videos.

Here is an example of code to use the main element:

<main>
  <h2>My Main Content</h2>
  <p>This is the main content of the page.</p>
  <img src="image.jpg" alt="Image">
</main>

This code will create main content with a title, a paragraph, and an image.

footer Element

The footer element is used to indicate the footer of a page.

The footer element usually contains copyright information, links to privacy policies, and other related links.

Here is an example of code to use the footer element:

<footer>
  <p>Copyright &copy; 2023 My Site</p>
  <a href="#">Privacy Policy</a>
  <a href="#">Terms of Use</a>
</footer>

This code will create a footer with copyright information and links to privacy policy and terms of use.

Exercises

• Create a web page using the top-level structural elements.
• Include relevant information in the header, navigation, main content, and footer.
• Save the document and open it in a browser.

Observe how the browser displays the page.

Good luck!

Conclusion

Structural elements are an important tool for creating web pages that are easier to understand for humans and search engines.

Understanding structural elements is essential for creating well-structured and informative web pages.

In the next topic, we will learn about the section element.