What's in your <head>? Part 1—<meta>

My selfie

James Turner,

Tags: HTML

I have to be honest, the <head> section never really holds much appeal for me when I᾿m looking at HTML. But, a little bit like hoovering behind the sofa or making my own quiche, I᾿m going to force myself to take a look at it and find out what it all means.

When I look at the <head> markup for The Great Discontent᾿s (TGD herein) front page, I can see that there are several elements: <meta>, <title>, <link> and <script>. Over the next couple of posts, I᾿ll look at them one-by-one.

Skip to navigation

The <meta> element

As far as I understand, <meta> is used to give information about the content of the website, a bit like the first couple of pages of a book (there᾿s a word for that, but I can᾿t remember it just now). TGD has a few of them, so let᾿s have a look:

<meta charset="utf-8">

I feel I should be more interested in this than I am. It᾿s got something to do with ASCII and characters and Unicode...I don᾿t really understand it. But, I guess it᾿s important because most websites include it in the <head> section, so I do, too.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

There᾿s an explanation of what this does over at Stack Overflow. It has something to do with Internet Explorer, and all I can say is that, going by what I᾿ve read, I᾿m really glad that IE is playing a bit more nicely with the web standards kids these days. One question, though: why does it end with a ‘/’?

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

The first crappy website I ever put online was meant to be an all-singing, all-dancing, mobile-friendly, responsive web page. I didn᾿t have a smartphone at the time, so I asked a friend to look at it on her mobile. It was crap. The text was tiny and my stupid sausage fingers couldn᾿t tap the links properly. Then, a few weeks later, I found out why. Apparently, some devices shrink everything by default, unless they are specifically instructed not to. That᾿s what this line does.

<meta name="description" content="Liz Danzico, chair and cofounder of the MFA in Interaction Design at School of Visual Arts, talks about her newest role at NPR, her most influential mentor, the importance of trusting your instincts, and ice cream—hey, it&#8217;s summer in the city!">

I suspect this element is quite important. When you search Google for ”Liz Danzico Great Discontent“, the first result contains the link to TGD, the date (where from?) and…that᾿s right, the text above. So, one of the functions of this element is to tell people who are using a search engine what your site is about.

<meta name="author" content="Ryan & Tina Essmaker / No Little Plans">

Well, I suppose this speaks for itself. I᾿m not sure where it comes into play, apart from the obvious. (By the way, thanks, Ryan and Tina Essmaker, for inspiring me to get my arse into gear and start this site!)

Overall, although <meta> might be the ugly duckling of <head> elements, it looks like it plays a subtle but important role in a web page, and I think I᾿m starting to like it a bit more. Maybe in small doses.

So, that᾿s it for my first post. Next time, I᾿ll take a look at the other <head> elements: <title>, <link> and <script>.

Skip to navigation