We have covered a brief introduction to the HTML Head Section at the beginning of this tutorial.
To recap, the HTML document head section is a container for metadata (data about the HTML page) and is not displayed to the user when the page is loaded. It specifies information such as the page <title>, CSS (for styling purposes), favicons links, and other metadata. The information specified in the head section is used to render the HTML document as intended. In this article, we’ll take a closer look on how to make the best out of the head section.
Let’s take the initial example we had earlier and add more components to the head section:
See the Pen Sample HTML by Heksagon (@Heksagonnet) on CodePen.
As can be seen, the <head>...</head> element is placed inside the <html>...</html> element.
Primary Language
It is highly recommended to set the language of your website. Here are two reasons why:
- Search engines are able to index your page based on the language and appear on language-specific results.
- Beneficial for those who are visually impaired and use screen readers that will “read out” your website.
To set the language or lang attribute of your website, simply add the following:
<html lang="en-US">
…
</html>
You can also set subsections of a different language, like so:
<p>Japanese example: <span lang="ja">愛している。</span>.</p>
Favicons
Favicons, short for “Favorite Icons”, refer to its use in the list of websites you put in your favorites or bookmarks. Other than that, this icon can be seen in the browser tab beside the title.
To add this icon to your website:
- Create an image and save it as either
.icoor.pngor even.gif. - Then add the following line of code in the
<head>element:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Metadata
Metadata (data about data) describes the web page and how it behaves when interacting with the browser. It is used with the <meta> element
Character Encoding
The character set or charset describes the document’s character encoding and what characters it is permitted to use.
<meta charset="UTF-8" />
or
<meta charset="utf-8" />
If you wish to use a universal character set that includes all characters from any human language, then UTF-8 is the one to use.
Therefore, you can see ヘキサゴン or هيكساجون as this page is tagged with the UTF-8 charset.
Author and Description
Some <meta> elements contain the name and content attributes:
namesignifies the type of meta element.contentis the respective meta content of the meta element specified at the name attribute.
<meta name="author" content="Nasir" />
<meta
name="description"
content="We bring your entrepreneurship visions to life:
web developer and blog about website design and entrepreneurship." />
Description is also used by search engines to read your website. Try to search for
"www.heksagon.net"with the quotation marks on Google search or click https://www.google.com/search?q=“www.heksagon.net” to see the above content being shown by Google Search Result.
Facebook’s Open Graph Protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
This means that your webpage will be shown in apps or other websites with a preview based on the the open graph meta declared. Here is an example of how to write Open Graph Protocol:
<meta property="og:title" content="Heksagon" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.heksagon.net/" />
<meta property="og:image" content="https://www.heksagon.net/og.webp" />
<meta property="og:description"
content="We bring your entrepreneurship visions to life:
web developer and blog about website design and entrepreneurship." />
Twitter Cards
Other than Facebook and websites by Meta, you might want to feature your website on Twitter. Twitter has their own Cards markup to showing a preview of your website. To do this, simply add the following to your <head> section and adjust based on your website:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@heksagonnet" />
<meta name="twitter:creator" content="@heksagonnet" />
- The
twitter:cardcontent can be either “summary”, “summary_large_image”, “app”, or “player”. - The
twitter:siteis the @username for the website used in the card footer. - And
twitter:creatoris the @username for the content creator / author.
Twitter’s parser will fall back to using property and content, so there is no need to modify existing Open Graph protocol markup if it already exists.
CSS and Javascript
CSS (Cascading Style Sheets) and Javascript codes can also be placed in the <head> section.
These will not be elaborated extensively here. CSS can be declared in the <style> element like so:
<style>
h1 {
text-align: center;
color: red;
}
</style>
The above will make all h1 elements center-aligned and red in color.
Javascript in the <head> element may look like this:
See the Pen Sample HTML by Heksagon (@Heksagonnet) on CodePen.
Summary
Thank you for finishing the introduction to HTML head element. There are many more things that you can add into the <head> element. However, for this article, only the basics are covered to get you started on your first project. Have a grasp of the idea before progressing to more advance technologies. Stay tuned for the next one!