HTML head tag Elements |
What is HTML head tag Elements?
The HTML head tag Element is the container for holding Meta Data and it lies between the <html> tag and the <body> tag.
HTML Meta Data is HTML document information that is not displayed in the browser.
Meta Data generally refers to the titles, character sets, styles, links, scripts and other information in the document.
Metadata is described using these tags: <title>, <style>, <meta>, <link>, <script> and <base>.
HTML Meta Data is HTML document information that is not displayed in the browser.
Meta Data generally refers to the titles, character sets, styles, links, scripts and other information in the document.
Metadata is described using these tags: <title>, <style>, <meta>, <link>, <script> and <base>.
<base> Element
The <base> element is used to set all the URLs of a webpage and the target URL to a target URL and target:
<!
DOCTYPE
html>
<
html
>
<
head
>
<
base
href
=
"https://codevsscript.blogspot.com/images/"
target
=
"_blank"
>
</
head
>
<
body
>
<
img
src
=
"test.jpg"
width
=
"24"
height
=
"39"
alt
=
"Test"
>
<
a
href
=
"https://codevsscript.blogspot.com/"
>w3programmers</
a
>
</
body
>
</
html
>
Explanation: The image displayed with the code above will show from the image folder of codevsscript.blogspot.com and we did not have to give it the path of the image folder. Again we did not have to set a target for the hyperlink, because we have already set the target in the <base> tag, now clicking the link will open the link directly in a new tab. And the href and target here are attribute of the base tag
<title> Element
The tags are used to display the title of any webpage in the browser's title bar.
<!
DOCTYPE
html>
<
html
>
<
head
>
<
title
>Our HTML Tutorials</
title
>
</
head
>
<
body
>
This is Body
</
body
>
</
html
>
You can see the text "Our HTML Tutorials" in the title bar of the browser using the code above.
<style> Element
The <style> </style> tag is used to use the Internal Style sheet. For example :
<!
DOCTYPE
html>
<
html
>
<
head
>
<
title
>Our HTML Tutorials</
title
>
<
style
type
=
"text/css"
>
body {background-color: red;}
p {
margin-left: 20px;
font-weight: bold;
color: #006;
}
</
style
>
</
head
>
<
body
>
This is Body
</
body
>
</
html
>
<link> Element
The <link> element is used to link to the external stylesheet:
<!
DOCTYPE
html>
<
html
>
<
head
>
<
title
>HTML Link Example</
title
>
<
link
rel
=
"stylesheet"
href
=
"../style.css"
>
</
head
>
<
body
>
<
h2
>HTML Link Example</
h2
>
<
p
>This is a Paragraph</
p
>
</
body
>
</
html
>
<!
DOCTYPE
html>
<
html
>
<
head
>
<
title
>HTML Link Example</
title
>
<
link
rel
=
"stylesheet"
href
=
"../style.css"
>
</
head
>
<
body
>
<
h2
>HTML Link Example</
h2
>
<
p
>This is a Paragraph</
p
>
</
body
>
</
html
>
<script> Element
The <script> </script> tag is used to add scripts like JavaScript, JQuery etc. For example :
<!
DOCTYPE
html>
<
html
>
<
head
>
<
title
>HTML script Example</
title
>
<
script
type
=
"text/javascript"
src
=
"jquery.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"sliding_effect.js"
></
script
>
</
head
>
<
body
>
<
h2
>HTML script Example</
h2
>
<
p
>This is a Paragraph</
p
>
</
body
>
</
html
>
<!
DOCTYPE
html>
<
html
>
<
head
>
<
title
>HTML script Example</
title
>
<
script
type
=
"text/javascript"
src
=
"jquery.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"sliding_effect.js"
></
script
>
</
head
>
<
body
>
<
h2
>HTML script Example</
h2
>
<
p
>This is a Paragraph</
p
>
</
body
>
</
html
>
<meta> Element
Elements are used to indicate character sets, page descriptions, keywords, page creators and other metadata.
Metadata is used for browsers, search engines and other web services.
Metadata is used for browsers, search engines and other web services.
To indicate the Character Set:
1
| < meta charset = "UTF-8" > |
To give a web page description:
1
| < meta name = "description" content = "Free HTML tutorials" > |
Key words for search engine to indicate:
1
| < meta name = "keywords" content = "HTML, CSS, XML, JavaScript" > |
To indicate the name of the author of the page:
1
| < meta name = "author" content = "Masud Alam" > |
Refresh the document every 30 seconds:
1
| < meta http-equiv = "refresh" content = "30" > |
All the examples together:
<!
DOCTYPE
html>
<
html
>
<
head
>
<
title
>HTML Meta Data Example</
title
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"description"
content
=
"Free Web tutorials"
>
<
meta
name
=
"keywords"
content
=
"HTML,CSS,XML,JavaScript"
>
<
meta
name
=
"author"
content
=
"Masud Alam"
>
</
head
>
<
body
>
<
p
>Meta Data Example</
p
>
</
body
>
</
html
>