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.)
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:
<meta> (self closing)
<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)
</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)]
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.