The HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag.
HTML metadata is not displayed. It only specifies data about the HTML document.
Metadata defines the document title, character set, styles, links, scripts, and other meta information.
The HTML <head> Element
The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags.
The HTML <title> Element
The HTML <title> tag is used for specifying the title of the HTML document.
- Defines a title in the browser tab
- Provides a title for the page when it is added to favorites
- Displays a title for the page in search engine results
HTML Head Syntax Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, Title Example</p>
</body>
</html>
The HTML <meta> Tag
The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata. Metadata is used by browsers like how to display content, by search engines (keywords), and other web services.
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<meta name ="keywords" content="html, css & JavaScript" />
</head>
<body>
<p>HTML Meta Tag Example</p>
</body>
</html>
Why <meta> Tag
When you are searching anything in search engine then you get a list of links about related information, how this is happening? Here the role of meta tag starts, the search engine algorithm understands meta tag and we provide what is page about information in <meta> tag so in this way we let know to search engine about our page content. We can use <meta> tags for other work. There are too many attribute of <meta> tag which are very important to know about them. So let know <meta> tag and their attributes.
Note: <meta> tag is an empty tag, it can’t have closing tag.
Important <meta> Attributes
There are too many attribute of meta tag but among of them 2 are most important which are name and content
Name Attribute
- Name attribute is used to define name of meta tag like Keyword, description etc.
Content Attribute
- Content attribute is used to define content for meta tag which should related to Name Attribute.
Note: we will study meta tag in depth in SEO Tutorial and HTML Tags section, so don’t warry about meta tag.
Use The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<meta name ="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<p>HTML Meta Tag Example</p>
</body>
</html>
- A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
- The width=device-width part sets the width of the page to follow the screen-width of the device.
- The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Why HTML Head
As we create some document then we always create a table of context so that it’s become easy to find out on which page and about what we have written. In case of HTML we also use this concept and write all metadata in head section of web-page, just not only what about page is there are so many things which can be listed in head section.
What HTML Head Contains
There are several of things which can be provide in HTML head section, we can’t able to see anything in browser window except short-cut icon and page title above to url-bar in browser window. Read below points to know what a HTML head can contain.
- HTML Head can contain title of web-page.
- External Links.
- CSS code.
- JavaScript code or external JavaScript Link.
- It can contain meta content.
Let’s walk in deep to understand about all of them one by one.
The HTML <base> Tag
The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item.
<!DOCTYPE html>
<html>
<head>
<title>HTML base Tag Example</title>
<base href="http://www.gdatamart.com/html/html_intro.aspx" />
</head>
</html>
The HTML <link> Tag
The HTML <link> tag is used to specify relationships between the current document and external resource.
The <link> tag is empty tag, it does not have closing tag. This tag can be used to link external documents to our web-page like external CSS File or short-cut icon link.
Note : The <link> tag have 2 most important attribute which are
- src - This attribute is used to provide path of the external document.
- rel - It is used to defined type of document linked like stylesheet for external CSS file, shortcuticon for page short-cut icon link.
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href="http://www.gdatamart.com/html/html_intro.aspx" />
<link ref="stylesheet" href="../css/style.css" />
</head>
</html>
The HTML <style> Tag
The HTML <style> tag is used to specify style sheet for the current HTML document. Following is an example to define few style sheet rules inside <style> tag
The HTML <script> Element
The <script> element is used to define client-side JavaScripts. This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo".
The HTML <script> tag is used to include either external script file or to define internal script for the HTML document.
Script Example
<script>
function myFunction
{
document.getElementById("demo").innerHTML = "Hello JavaScript"
}
</script>
HTML head Elements
| Tag |
Description |
| <head> |
Information about the document |
| <title> |
Defines the title of a document |
| <base> |
A default address or a default target for all links on a page |
| <link> |
Defines the relationship between a document and an external resource |
| <meta> |
Defines metadata about an HTML document |
| <script> |
Defines a client-side script |
| <style> |
Style information for a document |