Fix HTML Validator Errors

Hi, Good Day! I just want to know what how to fix these 2 errors in my HTML Code. I’m a beginner and practising to code. Please help me fix this.

It says:

  1. Start tag “body” seen but an element of the same type was already open.
    From line 14, column 1 to line 14, column 6

  2. Stray start tag “footer”.
    From line 18, column 1 to line 18, column 8

This is my HTML Code…

Two things:

  1. You need to close the <head> element with a </head> tag after the title.
  2. The <body> must enclose everything after the end of the <head>, not just that one paragraph.

As the the MDN documentation for <html> says:

Permitted content: One <head> element, followed by one <body> element.

As you’re using HTML5, the body element is optional in most cases

In practice this means that as soon as the browser sees content that’s a child of the body element it opens the body. In this case it infers an opening body element before the header element. The thing’s squawking because you’ve essentially created a second opening body element. (This is also why it’s not squawking about the lack of a closing head tag. That’s also optional in most cases and it inferred it.) Most people do use optional tags to keep things neat for indentation etc. though and if leaving them out, would not generally have an optional opening tag without its partner closing tag or a closing tag without the opener. You either leave both out or use both. Note, not all tags are optional (which is another reason it’s good to get into the habit of using them.)

The footer element is being highlighted because you closed the body element but, as @airtower-luna points out, the footer must be contained in the body.

this isn’t technically what happens but you might find it helpful to think of the parser seeing, or rewriting, your markup like this:

<html>
    <head>
        <meta> (self closing)
        <title>
    </head> (inferred)
    <body>  (inferred)
        <header>
            <img>
        </header>
        <h1>
        <h3>
        <body> (error! you can only have one body element! See the link airtower-luna provided for more info on this)
        </body> (you can think of this as inferred but really this whole body element is never created)
        <p>
    </body> (this is the one you wrote and closes the body section that the browser inferred as opened)
    <footer> (error! you shouldn't have anything after a closing body tag except a closing html tag
        [text node with no element (your copyright statement)]
    </footer>
</html>

Interestingly Google’s HTML styleguide suggests omitting optional tags but in reality that’s never really been widely adopted and many developers don’t even realise they’re optional.

Hope that provides a little bit more insight into what you were seeing there.

Cheers :cowboy_hat_face:

1 Like