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">
    <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>
    <section id="top">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">

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?

The id= attributes were there for the sake of this exercise. In practice, wouldn’t an attribute have some potential to cause problems if it is referred to by another element ?

Hello! There doesn’t work the task in SEMANTIC HTML, part Header and Nav. I have an error-message “{“errors”:[{“detail”:“backend container expired, please create a new session”}]}” in the part, where my code renders in a browser

I’m a bit confused. When we create the header and we use nav as a menu, What is the difference between to choose li or span tag, or another one within the nav tag?

Why aren’t we closing the header and nav in the code? but no , and but no ?

Hi team, quick semantic question. Which one is more semantic

My finding, ( I welcome other points of view) WC3 is right:

  1. For the traditional links.
  2. accessibility both are doing the same
    1. I tested it with a screen reader, and both just say the link and the name of the link.
  3. semantic
    1. nav already says is a group of links that you can move for navigation
    2. : The Navigation Section element - HTML: HyperText Markup Language | MDN (mozilla.org)
  4. for bread crumb menu[image]