Every HTML has a head tag .
This is the first tag.
What is this for?
To provide meta data (data about data) about the HTML document you are going to create .
What is the title of this document?
Who is the author of this document?
What set of characters are allowed in this document ?
What CSS do you want to apply?
What java scripts do you want to load ?
What description do you want google to show in its search results when your website is listed ?
What image and description do you want to show in Facebook when your link is shared on its platform ?
All these can be specified inside head tag .
How to specify title in HTML head?
Here is how :
<head>
<title> My HTML document </title>
</head>
Note that this title is not shown on the web page . It will be shown at the top of browser tab and in search results.
How to specify the author in HTML head?
Here is how :
<head>
<author> Vijay</author>
</head>
How to tell HTML which characters to accept in its document?
Here is how :
<head>
<meta charset=”UTF-8″>
</head>
“UTF-8” is the default charset in HTML5 so you can leave it by default. This charset allows a lot of characters to be included in your html document including foreign language letters like Japanese letters etc.
Other type of character sets include ISO-8859-1 and ASCII. These allow limited characters compared to UTF-8. When you try to display foreign letters which are not covered by a character set the letters will not be displayed properly on screen.
How to link CSS to your HTML?
Here is how :
<head>
<link rel=”stylesheet” href=”mycustom.css”>
</head>
Here “rel” attribute represents the relationship between the document and the resource referred to using “href” attribute.
“href” represents the hyperlink reference – the resource which you want to load in your HTML document.
What if the css you just referred could not be loaded?
You can provide an alternate resource for the browser to load using the value “alternate” in “rel” attribute as below:
<head>
<link rel=”stylesheet alternate” href=”another.css”>
</head>
How to link javascript to your HTML?
Here is how:
<head>
<script href=”mycustom.js”></script>
</head>
There is a problem in loading the javascript in the above way.
Browsers parse the HTML line by line and load the resources in the same order. Since the javascript is mentioned in the head tag which comes first in a HTML document , it will be loaded before the other HTML tags are loaded. So if any html tag is referred to in the javascript it will not be available at the time of loading and this will break your code.
To resolve this use the attribute “defer” while loading javascript resources . This defers the loading of javascript until all HTML tags are loaded by the browser.
<head>
<script href=”mycustom.js” defer></script>
</head>
How to tell Google what content to show if your website shows up in its search results?
Here is how :
<head>
<meta name=”description” content=”The Full Stack Developer blog aims to cover all the technologies used in full stack development and equip the user with enough knowledge to become a full stack developer”>
</head>
As you see , use the meta tag and give the value “description” for the name attribute and put the content you want to be showed by Google inside “content” attribute.
How to tell Facebook to show an image and description when your web page is shared on its platform?
Here is how:
<head>
<meta property=”og:title” content=”The Full Stack Developer Blog”>
<meta property=”og:image” content= “https//fullstackdeveloper.guru/logo.jpg” >
<meta property=”og:description” content=”The Full Stack Developer blog aims to cover all the technologies using in full stack development and equip the user with enough knowledge to become a full stack developer”>
</head>
Facebook follows The Open Graph Protocol (https://ogp.me/) to enable this feature. If you share your web page on facebook after including this , the title, image and description will appear on the news feed of your friends .
That’s it!
We saw a brief overview of how to use HTML head.
Leave a Reply