HTML head element

The head element of an HTML document contains information about page that is not displayed in the browser. This may include title, meta tags, stylesheets, JavaScript, and more.


How to add a title
Favicon: The icon in the browser tab
Linking external resources
Metadata content

Add a title in HTML

I talked a bit about the head and title element in, "HTML page structure" article.

Now, don't confuse the title element with h1 HTML headings. They're both different.

What's the importance of title?

Have you ever seen in your browser tab, some text or label?

The title element does that!

The title element also provides a title when a user adds the page to their bookmark, and this also serves as a title for search engine results.

Add a title in HTML

  <title>My cat Simon</title>

Favicons in HTML

Have you ever seen that small icon in the browser tab? Yea those things, they're called favicons.

These little nuggets of richness add richness to your website when a user saves a page of yours in their bookmarks or to their mobile home screen.

How to add Favicons in HTML

  <link rel="icon" href="favicon.ico" type="image/x-icon">

Favicons should be a 16x16 pixel image. The supported file formats are .ico,png, and .gif.

png and .gif file formats sometimes come with browser support issues for favicons. It's safer to use .ico.

Metadata content

Metadata is information that describes the data.

  <meta name="description" content="This page talks about my cat, Simon." />

meta elements always go inside the head element.

In the code example above, I'm using two HTML attributes called name, and content.

name – This attribute specifies the name of the metadata. Here's a list of name values that you may see often:

  • description
  • keywords
  • viewport

content – A value associated to that given name attribute.

  <meta name="description" content="This page talks about my cat, Simon." />
  <meta name="keywords" content="cat lover, cats, cat, brown cat" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Have you ever seen people share an article on Facebook or Twitter, and it displays a special card?

To get a card to show up like this when an article is shared, you must add Facebook or Twitter metadata.

  <!-- Facebook specific metadata -->
  <meta name="og:title" content="My cat Simon"  />
  <meta name="og:url" content=""  />
  <meta name="og:description" content="This page talks about my cat, Simon."  />

  <!-- Twitter specific metadata -->
  <meta name="twitter:title" content="My cat Simon"  />
  <meta name="twitter:url" content=""  />
  <meta name="twitter:description" content="This page talks about my cat, Simon."  />

Do you want more HTML articles?

Hey, here at Linguine Code, we want to teach you everything we know about HTML. Our only question is, are you in?