Location of charset meta tag (and other head elements)

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

Location of charset meta tag (and other head elements)

Post by TomHTML »

First, let me praise your work on this program. It's really quite remarkable, and seems to be a true labor of love. Tools that provide such comprehensive information are rare, and this is one of them. I've barely skimmed the surface of everything that can be done with it, and it's already proving helpful where I wasn't expecting it to be. So, thank you for creating it!

One thing that it recommends I want to question. The validator complains, "It is highly recommended that the meta charset tag be the first child of the head tag. Consider moving this tag up so it is immediately after the "head" start tag." It also wants the viewport <meta> tag to follow it, or come soon thereafter.

But what I've read in the HTML5 spec is that the order of items in the <head> may be arbitrary (with the exception of the order of style sheets, as later css rules may override earlier ones), with one exception:

"The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document."

See for reference:

https://www.w3.org/TR/html52/document-m ... eclaration

https://www.w3.org/International/questi ... clarations

For perspective, this would mean the following initial HTML would be perfectly okay, because the <meta> charset comes within (specifically, at the end of) the first 1024 bytes that would be received by the browser:

Code: Select all

<!DOCTYPE html>
<html lang=en-us>
<head>
    <title>Suscipit adipiscing bibendum est ultricies. At elementum eu facilisis sed odio morbi. Sit amet cursus sit amet. Porttitor leo a diam sollicitudin. Massa sed elementum tempus egestas sed sed risus. Viverra accumsan in nisl nisi scelerisque eu ultrices. Commodo viverra maecenas accumsan lacus vel facilisis volutpat. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Nulla at volutpat diam ut venenatis tellus in. Vitae semper quis lectus nulla at volutpat diam. Tortor posuere ac ut consequat semper viverra. Nisi scelerisque eu ultrices vitae auctor. Nibh sit amet commodo nulla. Congue quisque egestas diam in arcu cursus euismod quis. Sagittis vitae et leo duis ut. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. Tincidunt lobortis feugiat vivamus at. Lectus magna fringilla urna porttitor rhoncus. In ante metus dictum at. Ornare quam viverra orci sagit</title>
    <base href="https://example.com/">
    <meta charset=utf-8>
Is there documentation elsewhere that contraindicates this (as well as the location of the <meta> viewport tag)?
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Location of charset meta tag (and other head elements)

Post by Albert Wiersch »

Hello,

I'm very happy to hear that CSS HTML Validator is proving to be more helpful than you expected!

As for this issue, I'm going to change the message from:
It is highly recommended that the meta charset tag be the first child of the head tag. Consider moving this tag up so it is immediately after the "head" start tag.

To:
It is recommended (but not required) that the meta charset tag be the first child tag of the head element. Consider moving this tag up so it is immediately after the "head" start tag. Note that the character encoding declaration must always be completely specified within the first 1024 bytes of the document.

I think that is a better and clearer message.

The main point is that placing the meta charset tag as the first child of the head element is just a recommendation, not a requirement. The actual requirement is that it be in the first 1024 bytes of the document as you have noted.

You can right-click on the message (when displayed in the Results Window in CSS HTML Validator) and disable the message or change the message type to a regular message rather than a warning message if you want to.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

Re: Location of charset meta tag (and other head elements)

Post by TomHTML »

Thanks so much!
Post Reply