What is a HTML head ?
HTML <head> element acts as a container for metadata.
It should be declared between <html> tag and <body> tag.
HTML <head> only contains metadata about the HTML document which specifies data about the HTML document.
What metadata declared inside HTML <head> element ?
Metadata such as document title, character set, styles, links, scripts, and other meta information.
These metadata content is not displayed in the browser on page loading.
What are the tags used in metadata ?
There are list of tags used in metadata, they are
1. <title></title>
2. <style></style>
3. <meta>
4. <link>
5. <script></script>
6. <base>
1. HTML <title></title> tag
What is HTML <title></title> tag ?
This defines the title of the HTML document.
It should be declared inside <head></head> tag.
<title></title> tag is used in all HTML/XHTML documents.
Why HTML <title></title> tags is used ?
This tag defines a title of the HTML document in the browser tab.
This title for the page is used inside search engine results.
This title is assigned for the page when it is added to favourites buy the user.
What is the limit for the <title></title> tag?
Its recommended that the <title></title> tags can have the max character length including spaces is 65 to 70 characters.
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>Title for this HTML document is "My Webpage", which is displayed in tag header</p>
</body>
</html>
Output :
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
2. <style></style> tag
What is HTML <style></style> tag?
This defines the <style> properties for the HTML document.
It should be declared inside <head></head> tag.
<style> element can have CSS properties for the HTML document.
<style> element can be declared either inside the HTML document or from an external CSS file.
Why HTML <style></style> tags is used ?
<style> tag helps us to modify our text, viewed in the HTML document.
We can modify font size, font family, font color etc.
We can also modify the body part of a page.
How to use the <style></style> tag?
<style></style> tag is used to change the CSS properties for the one HTML document or multiple documents.
If we want to apply CSS for multiple pages then we should use separate CSS file.
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
.p1{
color:red;
}
.p2{
color:blue;
}
.p3{
color:orange;
}
#p4{
color:green;
}
#p5{
color:brown;
}
</style>
</head>
<body>
<p class="p1">This is paragraph 1</p>
<p class="p2">This is paragraph 2</p>
<p class="p3">This is paragraph 3</p>
<p id="p4">This is paragraph 4</p>
<p id="p5">This is paragraph 5</p>
</body>
</html>
Output :
3. <meta></meta> tag
What is HTML <meta></meta> tag?
The HTML <meta> element is used to specify the character set, page description, keywords, authors and other metadata on the webpage.
Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.
Why <meta></meta> tags are used ?
<meta></meta> tags are used by browsers, search engines and other web services.
Metadata will not be displayed on the page, but is machine parsable.
What are the attributes of <meta></meta> tags ?
1. charset
2. content
3. http-equiv
4. name
1. charset
Defines the character encoding for the HTML document.
2. content
Defines the value associated with the http-equiv or name attribute.
3. http-equiv
Defines the HTTP header for the information/value of the content attribute.
4. name
Defines the name for the metadata.
How <meta></meta> tags are used ?
<meta></meta> tags are used in various forms.
1. Setting charset
<meta charset="UTF-8">
2. Setting description
<meta name="description" content="Free Web tutorials">
3. Setting keywords
<meta name="keywords" content="HTML, CSS, JavaScript">
4. Setting author.
<meta name="author" content="John Jhonny">
5. Setting viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If we are browsing our html document with a phone or a tablet, viewport control the page’s dimensions and scaling.
5-1 : width=device-width
This sets the width of the page to follow the screen-width of the device
5-2 : initial-scale=1.0
This sets the initial zoom level when the page is first loaded by the browser.
6. Setting Revision date for the Document.
<meta name = "revised" content = "cstechbook, 4/8/2020" />
7. Setting refresh to the document.
<meta http-equiv = "refresh" content = "5" />
8. Setting Page Redirection
<meta http-equiv = "refresh" content = "5; url = https://s30.e0b.myftpupload.com" />
9. Setting Cookies
<meta http-equiv = "cookie" content = "userid = usno0001; expires = Friday, 23-Oct-20 12:22:00 GMT;" />
4. <link> tag
What is a HTML <link> tag ?
HTML <link> tag defines the relationship between the current document and an external resource.
HTML <link> tag is used to link the external files to our webpage.
We can link the external style sheet page to our webpage.
Why HTML <link> tag is used ?
<link> tag is mostly used to link to external style sheets.
<link> tag have no element, it contains only attributes.
How HTML <link> tag is used ?
<link> tag should be placed inside the <head> section of the document.
<link> tag works with the use of attributes and some of them are listed below.
What are the attributes of <link> tag ?
| 1 | charset | Character encoding of the linked resource |
| 2 | disabled | Disable a link relationship |
| 3 | href | URL of the linked resource |
| 4 | hreflang | Language of the linked resource |
| 5 | media | Media that the linked resource applies to |
| 6 | methods | Information about functions that might be performed on object |
| 7 | rel | Type of linked resource |
| 8 | rev | Relationship of current document to linked document |
| 9 | sizes | Sizes of the icons (when rel contains icon) |
| 10 | target | Frame name that has defined linking relationship |
| 11 | type | MIME type of the linked resource |
5. <script></script> tag
<script></script> tag is used to include javascript code inside the HTML documents.
How to include javascript code in html ?
Javascript code is included in html file inside <script></script> tag.
This <script></script> tag can be written inside both header and body section of the HTML file.
What are the attributes for <script></script> tag ?
The <script></script> tag have two attributes −
- Language
- Type
1. Language
“language” attribute specifies what type of scripting language we are using.
Its value will be “javascript”.
2. Type
“type” attribute specifies the type of file and its value should be set as “text/javascript”.
Syntax :
<html>
<head>
<title></title>
<script language = "javascript" type = "text/javascript">
Javascript code begins here...
</script>
</head>
<body>
</body>
</html>
6. <base> tag
What is a <base> tag in HTML ?
<base> tag is used to specify the base URL and/or target URL, for relative links.
<base> tag must have either an href or a target attribute present in it or both.
There can be only one <base> element in a document.
<base> tag must be defined inside the <head> element.
Why we use <base> tag ?
If there is multiple links in the webpage but the base url is same we can use <base> tag.
How <base> tag will be used ?
we can define the <base> tag URL and other relative links will use the <base> URL as the starting point.
For example, If we set the base URL once in the header section, then all subsequent relative links will use that URL as a starting point.
Example :
<DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<base href="https://s30.e0b.myftpupload.com/" target="_blank">
</head>
<body>
<p>Learn about <a href="client-side-html">HTML Tutorials</a></p>
</body>
</html>