In this section, we will learn what HTML <head> element is and how to use it.
What is <head> Tag in HTML?
HTML <head> element is considered as a container element and is a place where we put the header data on a document.
The <head> element includes these sorts of data:
- The title of the document which we set via HTML <title> element.
- Style of that document: this is added via <style> and/or <link> element.
- Setting a base URL for the relative URLs in that document (if necessary): this is done via <base> element.
- Sometimes we could even use the <head> element to add scripts to the website. But this is rarely done, and it’s best to use scripts at the bottom of a webpage right before the closing tag </body> element.
- Search Engine related data which are set mainly via <meta> tag.
Just to explain the <meta> tag a little more:
Search engines like Google scroll through websites and read their pages. But they don’t have enough resource to read word by word on each page of the entire web. So in order to save time and resource, they use some factors to figure out what each page is all about.
One of these factors is reading the contents within the <head> element and looking for tags like <meta>.
For example, A <meta> tag like:
<meta name="description" content="Free Web Tutorials"> or <meta name="keywords" content="HTML, CSS ">
It gives this idea to a search engine that this page is about web tutorial and to be more precise, HTML and CSS.
So we put tags like this within the <head> element of our source code to help search engines to realize what the page is all about as soon as possible.
HTML <head> Tag Syntax:
<head> Header data…. </head>
Example: heading tag in HTML
See the Pen heading tag in HTML by Omid Dehghan (@odehghan) on CodePen.
For this example, in the <head> element, we’ve used the <title> element to set a title for the document, which you can see it on top of the current document’s window.
We’ve also used the <meta> tag to set the width of the document and how browsers should render this document for users to see.
HTML CSS in head Tag
As mentioned before, the <head> element is the place where we can put the CSS style that we want to apply to the rest of elements in the document.
We could do this via two elements and both of them are put in the <head> element:
- HTML <style> element: if we want to write the CSS styles exactly in the document itself, we use the <style> element.
- HTML <link> element: for external CSS source files, we use this <link> element.
Example: HTML style in head
See the Pen HTML style in head by Omid Dehghan (@odehghan) on CodePen.
