Curated Sample HEAD about head HOT 10 CLOSED

<meta charset=utf-8>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

Why put both? As I understood it the first version was standardized in HTML5 because it already worked in older browsers, because parsers looking at the second line will just scan until they find "charset=utf-8".

from head.

Bug in old browser, when you know several dozen of percents of users are still under Xp...
I regret I did not keep the references of all these exceptions still required for compatibility.
But for sure, it's required, I made that head very carefully, just for fun.

May be it's not a bug in browsers but also a bug in some servers.

For example, in htaccess you can add
AddDefaultCharset utf-8

About the utf in htaccess, at the time I made this head, google check tool was still crying to have both, one in html and one in htaccess... go figure!
When are we going to have a 'certified browser label' instead of having to deal with all these stupid differences.

from head.

Seems you're right, just tried this W3C test in a bunch of old and new browsers

https://www.w3.org/International/tests/html-css/generate?test=character-encoding-009

Results:

https://www.browserstack.com/screenshots/a6ba97653b86cab632a9e6d84a117cc91f7b45f9

But surely then you can drop the HTML5 one and just keep the http-equiv version?

from head.

If I kept both, there is a reason. old-browser, server or site-checker.

In the case it was only to make 'well-known' site-checkers happy, it's because some were 'incorrect' and also to make the clients happy to see they are 100% compliant.

from head.

@plexus My head is a summary of all the spaghetti requirements I have found, trying to please all browsers/OS/devices in one single minimum block and to get the best result, e.g. not resize an icon.

Even putting all existing meta/link/equiv... in the head would not always give the good results.
Look at the favicon.
Some browsers will stop at the first icon they can handle and if required resize it, even if a better one is provided later in the head.
That means you have to carefully sort/order the lines to avoid such problem, first-encounter—first-used.

In the same way, some browsers for one OS can handle items of another OS and/or browser.
Once again, you have to pay attention to the order.

With just only these 2 requirements, it's impossible to always provide the best solution in all cases, as a worse icon one can be encountered before the best one.
The always perfect solution would required some kind of if-then-else.
And even with that, you have to add the new ones, look at ms ie 11, some icons are just 2 pixels bigger than those of apple-touch...

Sometimes, I'm wondering how web developers can manage all that mess: css, html,browsers, meta...
Hopefully some libraries, like modernizr, are available.

from head.

Here some extra info restrictions:

http://www.w3.org/TR/html5/document-metadata.html#character-encoding-declaration

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

In addition, due to a number of restrictions on meta elements, there can only be one meta-based character encoding declaration per document.

If an HTML document does not start with a BOM, and its encoding is not explicitly given by Content-Type metadata, and the document is not an iframe srcdoc document, then the character encoding used must be an ASCII-compatible character encoding, and the encoding must be specified using a meta element with a charset attribute or a meta element with an http-equiv attribute in the encoding declaration state.

If an HTML document contains a meta element with a charset attribute or a meta element with an http-equiv attribute in the encoding declaration state, then the character encoding used must be an ASCII-compatible character encoding.

Doooee...

from head.

<link href=mynice.css rel=stylesheet type="text/css" media=all>
the last 2 can be omitted as they are equal to the default values.
<link href=mynice.css rel=stylesheet>

Though need to check if it's compatible, correctly supported by all browsers. Hi M$!

from head.

Updated to put IE on top as recommended, google it, based on @joshbuchea note.
MS sites are with

<head>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1.0">

from head.

meta name=keywords is not needed AFAIK. I don't think any search engines use that at all.

from head.

Closing as this is very broad. Thanks for the info & discussion!

from head.