
HEAD – A guide to &lt;head&gt; elements - mooreds
https://htmlhead.dev/
======
zmix
DublinCore[1] is totally missing! It once was _the_ metadata standard, it's
understood by archives and libraries (including Library of Congress)
worldwide, macOS will automatically import them into spotlight, etc.

Instead we find many of those tags (title, description, author, etc.) hidden
behind the namespace of some corporations.

[1]
[https://www.dublincore.org/specifications/](https://www.dublincore.org/specifications/)

~~~
1shooner
Are these corporate 'namespaces' themselves even a standard? Isn't the prefix
in meta@name just an informal convention?

------
saagarjha
> The above 2 meta tags _must_ come first in the <head> to consistently ensure
> proper document rendering.

It looks like they don't follow their own advice:

    
    
      <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">

~~~
bcoates
Do what they say, not what they do!

maximum-scale has only three valid uses:

1\. extreme values, like 5.0, if a browser misdetects that zooming that far is
useful when it isn't (rare)

2\. pure-app websites like maps or video games that have alternative scaling
arrangements and browser pinch-zoom gets in the way.

3\. there is no number three, and the thing you are thinking of is incorrect.

maximum-scale is an automatic usability and accessibility fail otherwise, you
are bad and should be made to feel bad if you use it.

~~~
chimi
I tried to order a house online last night and I got to the "enter your email
address to get your free quote" and because I couldn't zoom out, I could not
see the _Submit_ button.

OMG, I thought how much money is this company losing because their website
_intentionally_ disables a built in feature!?

~~~
moeamaya
It didn’t happen to be this site? [https://www.dwellito.com/modular-
homes/cover](https://www.dwellito.com/modular-homes/cover) (example home)

Only asking because it’s a friend’s site and I helped him build the quote
modal which you currently can’t zoom.

------
kizer
We need more single page references like this, IMO, for all sorts of random
domains. Even something like a single-page reference for how Array.from works
in JS, as an example. Even if it were standalone it could later be integrated
into a broader reference work. In the meantime, a "arrayfrom.dev" page,
although non-general, would fill a specific niche w/ a mnemonic URL
(Array.from is just an example - no idea whether or not it would be
considerable in this regard).

Other "pages" (as rough-sketch descriptions) I can imagine: colors.dev,
cacheperf.dev, unicode.dev, rdf/microdata.dev, parsing.algorithms.dev,
querystring.dev (a micro reference for sure).

Likewise, "micro" web tools which I'm sure exist as a concept I don't know
already would be very convenient (xml->json converter,
linters/viewers/auditors of all sorts).

~~~
bcoates
Is mdn not satisfactory for that? searching 'mdn array.from' brings up a nice
one-pager on that and it works for almost any web/js documentation.

~~~
softblush
Sarcasm detector broken?

~~~
bcoates
maybe? I like htmlhead.dev and it actually is a fairly underdocumented corner

------
liquidise
> Below are the essential elements for any web document (websites/apps)

> "...width=device-width, initial-scale=1..."

This is a surprising bit of opinionation to an otherwise decent presentation
of head elements. Websites render quite nicely on modern phones without this
line, but they generally render as if they are on a desktop browser. Using the
above meta tag allows you easy access to modern approaches to mobile
development.

~~~
akersten
I'm not an expert. But in my experience, that line has been the solution to
100% of any viewport issue I've ever had on mobile, and has made webpages
"just work" and render how I'd expect them to on mobile, as opposed to weird
issues with font size and scrolling.

I've never had that line do something I didn't want. Is there a reason mobile
browsers don't automatically just do whatever that line does? Seems like the
opt-in behavior should be "yes, render me like I'm a desktop site on a tiny
monitor" rather than opt-out.

~~~
Brendinooo
Legacy reasons. When the iPhone came out, "mobile only" sites were a wasteland
of terrible UI and restricted features. iPhone OS wanted to serve full
websites, and sometimes had to do weird things to beat the kind of stuff that
sniffed for mobile devices, or to overcome the lack of a mouse on a desktop
website.

If you look at the original iPhone demo in 2007[0], the original intent was to
render full web pages on the screen and rely on the double-tap-to-zoom to read
content.

The article that's generally credited with naming and mainstreaming Responsive
Web Design[1] didn't come until 2010.

[0]:
[https://youtu.be/vN4U5FqrOdQ?t=2502](https://youtu.be/vN4U5FqrOdQ?t=2502)

[1]: [https://alistapart.com/article/responsive-web-
design/](https://alistapart.com/article/responsive-web-design/)

~~~
maccard
Completely off topic, but it's hilarious how slow the NY times website loads
in that first video.

------
tomp

      <meta name="viewport" content="width=device-width, initial-scale=1">
    

Please no. IMO this makes most pages unusable on mobile. Most websites, e.g.
news websites with long-form articles, shouldn't be using mobile pages /
responsive design / zoomed-in layout at all. Web apps (Twitter, GMail), maybe.
But most mobile pages are _far_ more unusable than desktop versions (looking
at you, Facebook and Reddit).

~~~
akersten
We must have different devices. IMO most pages are unusable on mobile
_without_ this. I wonder if it's the device, website content, or personal
preference at play here.

------
alexdumitru
> <!-- Identify the software used to build the document (i.e. - WordPress,
> Dreamweaver) --> <meta name="generator" content="program">

Is Dreamweaver still a thing? I haven't heard of it in years, many years.

~~~
dfsegoat
I last touched it in 2012 - but apparently, yes, yes it is:

[https://helpx.adobe.com/dreamweaver/using/whats-
new.html](https://helpx.adobe.com/dreamweaver/using/whats-new.html)

Although, it looks like their cumulative 2019 updates are limited to the
following headlines between the two:

1) added support for HTML tag highlighting inside PHP code

2) bootstrap CSS support.

... I was surprised to see it was still alive.

~~~
hnzix
I use Dreamweaver all the time. It's actually a full-blooded static site
generator, two decades before that was trendy. And marketing can use the
visual editor to make it a content management system.

~~~
wolco
I still use a copy because no editor has a built in sftp anymore. Sublime/vs
code/phpstorm are great for git projects but for remote projects you don't
want to work on locally dreamweaver can't be beat. The only problem is modern
code has changed syntax so dreamweaver gives warnings for valid code. I wonder
if anyone has updated these.

~~~
dfsegoat
PHPStorm and all the JetBrains IDEs have the ability to edit files directly
via SFTP AFAIK.

It's under Tools > Deployment

Source: I use it daily.

~~~
wolco
You can deploy through sftp but you still need save the files locally. I could
accept that but then you generate a laravel db migration file or config file
is created through a package that was installed remotely. So your local copy
doesn't have the new file. So now you have to resync the repo. Resyncing the
repo from the root directory brings in the vendor packages locally so a resync
could take an hour. You need to go to subfolder by subfolder resyncing if you
want to avoid that.

Dreamweaver is open-edit-push back. Perfect when you have to make a change to
a site and don't want all of the fiies locally.

------
combatentropy
Why would <meta charset="utf-8"> be required if you can set it in the HTTP
headers? I've also read that modern browsers (everything except IE) will look
for a byte-order mark.

~~~
gog
Quite a few of these can be set in the HTTP headers as well, but people
editing templates don't always have access or know how to do it.

BTW; not all UTF-8 text has a byte-order mark, I would say most of them don't.

~~~
kevin_thibedeau
BOM is not valid in UTF-8 for one thing.

~~~
SpaceManiac
To be pedantic, the Unicode standard _disrecommends_ the use of a BOM in
UTF-8-encoded documents rather than declaring it invalid.

~~~
kevin_thibedeau
It makes zero sense to specify a byte order for an encoding in which it is
irrelevant. It only persists because of a lazy vendor that can't encode
Unicode correctly.

~~~
erik_seaberg
It would have been nice if every well-encoded Unicode document started with
BOM and every legacy doc did not, instead of having to guess whether a doc is
more _likely_ UTF-8 or Latin-1.

~~~
account42
Then concatenating to valid Unicode documents would no longer be valid
Unicode. That is bad. And ASCII text would no longer be a valid UTF-8 encoded
Unicode document. That is bad. And even when everything has finally switched
to UTF-8 every tool ever will still need to handle the BOM. That is bad.

Guessing between valid UTF-8 and Latin-1 is only ever ambiguous when there are
multiple non-ASCII characters in a row __and __all those sequences are made up
of a lead byte with the correct number of trailing bytes. How often is that a
problem for you in practice?

------
GlitchMr
"Recommended Minimum" lists <meta name="viewport" content="width=device-width,
initial-scale=1">. While it is indeed recommended, the site should say to
actually try testing the website on a mobile device with this attribute before
adding it - marking the website as mobile friendly when it's not is worse than
not doing so.

------
grenoire
This is absolutely mortifying, how much metadata do pages have to share with
browsers to do that one weirdly specific thing!?

~~~
krapp
What weirdly specific thing?

You don't have to put anything in a head tag, you don't even _need_ a head
tag, but it's a good idea to have one and to at least add a charset meta tag.
Everything is optional, though.

The entire point of it is for you to share metadata about your page with the
browser.

~~~
munk-a
My favorite weird thing that happens without certain <head> tags is the ten
billion attempts to get a favicon. I don't know if browsers still try all
those silly favicon requests if none is defined, but it was saddening to watch
that grow to be wide spread previously.

~~~
shakna
Yes, they all still issue several favicon requests, so far as I'm aware.
Having one, instead of returning a 404, can speed up the page load. Which
makes 0 sense.

~~~
dyanaraps
This is how I avoid this issue entirely:

    
    
        <link href=data:, rel=icon>
    

This is the smallest possible "null" favicon. It causes the browser to display
nothing and ensures 0 HTTP requests for the favicon!

~~~
SquareWheel
Does the browser display the generic "no favicon" icon, or is it just
completely blank? I like the idea.

~~~
dyanaraps
It's completely blank (tested in Firefox and Chromium).

------
floatingatoll
> Completely opt out of DNS prefetching by setting to "off"

Why is this included in these guidelines?

EDIT: See reply. Thanks!

~~~
ratww
That's not a recommendation, the site is just documenting it.

------
Beltiras
Missed the perfect headline: "A guide to giving head - all of the elements"

------
nodesocket
Surprised all icons is only:

<!-- Icon in the highest resolution we need it for --> <link rel="icon"
sizes="192x192" href="/path/to/icon.png">

<!-- Apple Touch Icon (reuse 192px icon.png) --> <link rel="apple-touch-icon"
href="/path/to/apple-touch-icon.png">

I thought there was literally like a dozen different sizes and names to
support all different Apple and Android devices.

~~~
why-oh-why
You don’t even need those. Safari will automatically look for a file on the
root and so does Android.

Still, I know what you’re talking about and it’s awful how many “gurus”
suggest all that noise.

~~~
myfonj
Yes. See this comprehensive resource [0] or sieve trough those linked at the
Head project [1] - there are still bunch of tags (especially if you cannot
place images into the root path) and myriad of images with varying degree of
importance. Even now most resources apparently slightly disagrees with each
other.

[0]
[https://realfavicongenerator.net/faq](https://realfavicongenerator.net/faq)
[1] [https://htmlhead.dev/#icons](https://htmlhead.dev/#icons)

------
saagarjha
Question: how many of these are standardized? I'm not particularly interested
in adding a bunch of specific, proprietary tags…

~~~
jaimex2
I'd go by W3
[https://www.w3schools.com/html/html_head.asp](https://www.w3schools.com/html/html_head.asp)

Then again were all slaves to the whims of Alphabet and Facebooks for traffic.

~~~
duskwuff
W3Schools is not W3C, and is frequently inaccurate.

~~~
colejohnson66
Re: them being inaccurate: that was true many moons ago, but it seems they’ve
cleaned up and are more accurate now IMHO.

~~~
duskwuff
They're less inaccurate than they used to be -- I'll give them that. But I
still wouldn't rely on them as a source.

------
mpolichette
This is specifically elements which are allowed in the `head` element of the
document.

I recently read somewhere that for backwards compatibility reasons no new
element types can be added within `head`. This causes a lot of overloading on
the existing ones for elements like <link />.

I don't have any supporting evidence though.

~~~
edflsafoiewq
The HTML syntax lets you omit the </head> tag. Any start tag not in the finite
list of elements will implicitly start the body and go there.

    
    
        <html>
        <head>
        <title>I am in the head</title>
        <foo>I am in the body!</foo>
        </head>   <- this is a parse error and is ignored

~~~
tannhaeuser
HTML even lets you omit the <html> and <head> tags, so the following is valid
and equivalent:

    
    
        <title>I am in the head</title>
        <foo>I am in the body</foo>
    

I've described how this works for SGML here [1], but it also applies to HTML.

[1]: [http://sgmljs.net/docs/sgml-html-
tutorial.html](http://sgmljs.net/docs/sgml-html-tutorial.html) (see slides
linked from TALK)

~~~
Izkata
Screw it, let's abandon all markup and content:
[https://mathiasbynens.be/demo/css-without-
html](https://mathiasbynens.be/demo/css-without-html)

(Explanation: [https://css-tricks.com/using-css-without-html/](https://css-
tricks.com/using-css-without-html/) )

------
cproctor
Fun fact: there's no way to do logical grouping for head elements. (eg no divs
allowed)

~~~
anamexis
Why would this be useful? Other than for human legibility, but I feel like
that can be accomplished with line breaks and comments.

------
seph-reed
Immediately found a bunch of elements I had never heard of. This is really
neat.

~~~
The_rationalist
Especially <base>

~~~
munk-a
<base> was super nice in the old days when I worked with servers without
subdomains for staging/testing, it made it pretty trivial to have
domain.tld/website and domain.tld/testing/website ... granted, those were dark
days and I'd never use that approach now, but it was appreciated.

~~~
berkut
Out of interest, what would you use instead these days?

~~~
munk-a
Oh, usually <base> is still bound to the server root name, but in most cases
an SPA or what-have-ye will be served off the base subdomain with client side
routing hints - then everything can just be referenced using stripped down
relative URLs.

Actually though, for the server-side processed stuff we are still using <base>
to make sure that /fancy/bespoke/url/style URLs doesn't try to grab assets
from /fancy/bespoke/url/style/styles/main.css - I guess it's less that I don't
use it and more that now-a-days I rarely set it to anything other than
domainname since I'll just materialize a new subdomain if I need to do
something fancy.

------
badrabbit
Would love to see if/how these apply to html email/email-clients.

~~~
coagmano
Email clients don't give a shit about your html. They will straight mess you
up

------
lurchpop
ICBM tag with targeting coordinates hmm

~~~
jameshart
They link to a helpful explanation:
[https://en.wikipedia.org/wiki/ICBM_address](https://en.wikipedia.org/wiki/ICBM_address)

tl;dr you should not expect to actually be targeted with an ICBM unless you
foolishily also include elevation information.

------
perilunar
Those dark grey on black comments are annoyingly hard to read. Web inspector
to the rescue.

------
walshemj
Bit light on the use of the Hreflang

------
rolltiide
Does anybody remember that funny thread where some dev here was saying "who
calls it HTML5 anymore" as if everyone else was out of touch with stagnating
irrelevant skills that would immediately throw red flags during a phone
screen?

It just gave me a chuckle thinking about it

Thanks for the guide!

~~~
kizer
Uh... what do people call "it" now-a-days? Serious

~~~
kizer
I think people understood my comment neither correctly, and ,it seems, nor in
the same way? Anyways, what I was asking was whether there exists a new name
for html5? Have people dropped the 5? Comically, it was always a vague,
tattered umbrella term from the get go (whenever used to refer to anything
else than HTML5 the language/spec).

~~~
goto11
The spec which was once called HTML5 is just called HTML now. They dropped the
version number since it is continuously updated rater than versioned.

