FAQ: Semantic HTML - Header and Nav

This community-built FAQ covers the “Header and Nav” exercise from the lesson “Semantic HTML”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction to HTML

FAQs on the exercise Header and Nav

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2 posts were split to a new topic: With semantic HTML, do we no longer use the div element?

2 posts were split to a new topic: Why is header inside the body tag?

3 posts were split to a new topic: Should non-semantic elements be replaced by semantic wherever possible?

2 posts were split to a new topic: Why should we use tags?

hi, in this code example from the “Form a story” project, the formAStorylogo.svg is placed inside of a section element. Is it better to use the header element instead?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>Form a Story</title>
  </head>
  <body>
    <section id="top">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">
    </section>

If the svg represents the header of the page, then yes. Always prefer descriptive, semantic elements whenever it makes sense to use them.

Prefer <header> to <section id="header"> or <div id="header">, as well as all the other semantic elements that are available to you.

Why can’t I use instead of

in the second lesson of this course we were introduced to the tag where we put the info displayed in the top of the page, so why donts use it instead of ? do they have different functionalities?