Head - HTML Element

The head HTML element is used to mark the head of a HTML page.

1391 views

Edited: 2019-11-03 04:38

The head element forms the head part of a page in HTML, and typically includes external resources that are loaded before the page begins rendering in a browser.

It also includes the title, and description of the page, as well as other relevant meta elements.

<head>
  <title>My first Website</title>
  <meta property="description" content="This is my very first website. I hope you enjoy it.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Speed up pages by using external resources

It is recommended that you avoid using embedded CSS styling in the head section, and that you instead aim to use external styles whenever possible. This is because external StyleSheets are cached by the browser, and as such, they will in most circumstances speed up the rendering of your pages. The same is true for JavaScript, and other resources.

Use the link and script elements when linking to external resources:

<link rel="stylesheet" type="text/css" href="/css/external-file.css">
<script type="text/javascript" src="/js/external-file.js"></script>
<link rel="shortcut icon" href="/favicon.ico"c

Open Graph meta data

Social media sites use open graph meta data placed in the head section to quickly load shared links. This is despite some of the OG tags being covered by other meta elements (I.e. og:description, and og:title), and images being fairly easy to grab from the HTML source.

While both Facebook and Google Plus works fairly well without OG tags, there is a issue causing images not to load properly without. This forces users to load a link at least couple of times before it will show properly (with an article image). To solve this problem, we can use the following open graph tags:

<meta property="og:url" content="https://beamtic.com/absolute-url-to-article">
<meta property="og:type" content="article">
<meta property="og:title" content="Title of the article.">
<meta property="og:description" content="The article description.">
<meta property="og:image" content="https://beamtic.com/url-to-representing-image.jpg">

Attributes

Attribute:	Value:	Description:
Attributes	Other Attributes	Global, I18n, Event
type	Content Type	The Content Type of the scripting language used.
media	Media Descriptor	Either a single, or comma-separated list. I.e. "screen,print"
title	Text	Advisory title

Speed up pages by using external resources

Open Graph meta data

Attributes

Tell us what you think: