How to put a title into a header

HTML-CSS
1

This is the only error notice on W3 validator…
Error : Element head is missing a required instance of child element title .
But when I put a title in like this it rejects it

<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>


  <header id="header">
    
   <img id="header-img" src="https://i.pinimg.com/236x/a3/2b/99/a32b996da40f37f58d1e3e669c994ba1.jpg" alt="Anti-ageing-logo">

  <nav id="nav-bar">
            
                <div>
         
                    <a class="nav-link" href="#section1">Creams</a>
                    <a class="nav-link" href="#section2">Serums</a>
                    <a class="nav-link" href="#section3">Face masks</a>
                </div>
            </nav>
    
        </header>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

The title tells the browser what to put on the tab. It belongs in the head, but you don’t have one. The head contains meta data about the page. You can read about it here. [Edit: fixed link]

3

Thank you. I have passed all the tests on fcc as I have a header with a corresponding id and id header-img

4

The header and the head are two different things - the first is visible at the top of your page and the other is metadata that is invisible on your page (but the title shows up in the browser tab, just not the page). You may not need a head to pass the test, but if you want to be a developer, you need to learn what it is.

5

So the w3c validator is just getting mad that your HTML isn’t properly structured. The weird thing about browsers is that even if you give them bad HTML they’ll just make their best guess about how to render it. Best practice is to write valid HTML (with the help of an HTML validator) so that browsers aren’t guessing the structure since some browsers guess differently than others.

The structure of your HTML should be like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags go here -->
</head>
<body>
    <!-- The rest of your tags go here -->
</body>
</html>

The w3c validator is saying you’re missing your <title> tag (which is a type of meta tag) inside the <head> tag of your document.

6

Sorry, I put the wrong link above, it should be this:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head

8

Your html structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags and stylesheets links -->
</head>
<body>
    <!-- The rest of your tags go here -->
</body>
</html>

:arrow_down:

eg:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example Site</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Some text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
</body>
</html>
9

I’m not sure if you are using vscode as your editior or not but if you are you can start typing an ! Mark then hit tab,within an HTML file and it will automatically give you a default structure to your HTML file. You will see the title element included and typically it will default to “document”. I hope this little trick is helpful!

11

what are you talking about? what Insert menu? I’m confused on the context of your answer

13

Yes, I am also confused may be he is talking about MS word?

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.