HTML Head

Prev
Next

The <head> tag is placed between <html> tag and <body> tag and <head> contains important tags like <title>, <link>, <style>, <base>, <meta>, <script> etc.

List of all HTML head tags

HTML Head

<title> HTML Tag

The <title> tag defines the title of the HTML document.

Example

<head>
 <title> Page Title</title>
</head>
Run the Code

<link> HTML Tag

This tag links External style sheets. External stylesheets are the CSS files(Cascading Style Sheets) which style your HTML document. In laymen terms, CSS makes your website look more attractive and engaging by using style features.

Example of a stylesheet(CSS):

.exstyle {
  background:Navy;
  border: 2px solid black;
  text-align:center;
  color: white;
}

This style sheet is included in the <link> tag under the <head> section as shown in the below example.

Example

<head>
  <link rel="stylesheet" type="text/css" href="linkstyle.css">
</head>
Run the Code

<style> HTML Tag

The <style > tag is used to describe style sheet to your HTML document.

Example

<style>
  .stylevalue {
    background:black;
    border: 2px solid gold;
    color:gold;
  }
</style>
Run the Code

<base> HTML Tag

This tag defines the base URI/URL to all other relative URLs. You can set the main URL inside the header using the tag and you can use relative URLs for your other tags like links, images, etc. These relative links or images will use the base URL.

Suppose you have an image at the location below –

https://www.tutorialbrain.com/editor_html/img/newborn-child-tutorialbrain.jpg

Then, you can decide your base location as per your wish. So, you should make sure that once you concatenate(append) your base location and the path defined using <src> attribute, it should be the complete location of your URL.

Example 1:

https://www.tutorialbrain.com/editor_html/img/
 + newborn-child-tutorialbrain.jpg 
 = https://www.tutorialbrain.com/editor_html/img/newborn-child-tutorialbrain.jpg

Example 2:

https://www.tutorialbrain.com/editor_html/
 + img/newborn-child-tutorialbrain.jpg 
 = https://www.tutorialbrain.com/editor_html/img/newborn-child-tutorialbrain.jpg

Example

<head>
  <base href="https://www.tutorialbrain.com/editor_html/" target="_self">
</head>
<body>
Run the Code

<meta> HTML Tag

The <meta> tag describes the metadata of the HTML page where it contains page description, author of the page, keywords. Metadata means data about data, so it contains the information about the data. We need to give meta tag inside HTML <head> tag

Note:
Refer to the output of this example to understand more about these components.

Example

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="author " content="TutorialBrain">
<meta name="keywords " content="Mainframe,Php,SQL,Perl,JQuery,Datascience">
<meta name ="revised" content ="TutorialBrain, 1/6/2018" />

</head>
Run the Code

<script> HTML Tag

The <script> tag is used to execute JavaScript on the local browser. It is easier to place your script within the HTML document. We can give script tag either within HTML head section or in body section

Example

<script>

document.getElementById("sum").innerHTML = 2 + 3;

</script>
Run the Code

Interview Questions & Answer

The head tag is the first element inside the HTML tag. It is used to provide information to the browser about the page and it’s content. SEO techniques,tag,

The meta tag describes the metadata of the HTML page. It contains page description, author of the page, keywords. Metadata means data about data, so it contains information about the data. We need to give meta tag inside HTML tag.
Example,

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="author " content="TutorialBrain">
<meta name="keywords " content="Mainframe,Php,SQL,Perl,JQuery,Datascience">
<meta name ="revised" content ="TutorialBrain, 1/6/2018" />

Yes, it is important to usetag in HTML because it is the first element inside the HTML tag. It is used to provide information to the browser about the page and it’s content.

Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!