Hot HTML Summer: Metadata

A list of tags for this post.

This post is a part of a series where I write a post for each module of the Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer.

This post covers the Metadata module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

The required <meta> tags, revisited


Go to this section at Learn HTML.

The charset attribute of the <meta> element came about in a unique manner. Originally the character set meta data was written as <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, but so many developers mis-typed the content attribute as content="text/html" charset="<characterset>" that browsers began supporting charset as an attribute. It is standardized now in the HTML living standard as <meta charset=<charset>" />, where, for HTML,<charset> is the case-insensitive string “utf-8”.

I’m enjoying the history and tea spilling aspects of this series.

Pragma directives


Go to this section at Learn HTML.

The http-equiv attribute has as its value a pragma directive. These directives describe how the page should be parsed. Supported http-equiv values enable setting directives when you are unable to set HTTP headers directly.

What interests me about this is the flexibility.

The specification defines seven pragma directives, most of which have other methods of being set. For example, while you can include a language directive with <meta http-equiv="content-language" content="en-us" />, we have already discussed using the lang attribute on the HTML element, which is what should be used instead.

For example, if you don’t have access to <html> to set the language at the site level (using the language attribute, e.g., <html lang="en">), but you had the ability to add a meta tag, you could use <meta http-equiv="content-language" content="en" />.

Open Graph


Go to this section at Learn HTML.

You can have different card images, titles, and descriptions for different social media sites or for different link parameters. For example, sets different values for og:image, og:title, and og:description based on the parameter of the URL.

Neat! I didn’t know about the URL parameter. Examples…

If you enter and in Twitter’s Card Validator, you will see these two different cards; we provided different content even though they both link to the same conference home page.

The Twitter Card Validator no longer works, but you can take a peak in DevTools to see the difference. Developer browsers such as PolyPane or Sizzy include handy social card views as well.

I was pleased with myself that I didn’t find any surprises in the Open Graph section (other than the URL parameter), or in the Other useful meta information section. They’re worth checking out if you haven’t worked with social cards or mobile icons often. Or even if you have!

A list of tags for this post.

Enjoying this site? Leave me a tip at Ko-fi!

Back to top