We will learn the <head> Tag of this blog and also learn where the meta tag is used in this metadata including title, style, link, meta, script, support. Let’s see this example.
Table of Contents
How to add HTML <head> Tag?
HTML <head> Tag
The markup language <head> Tag is employed as instrumentation for data (data concerning data). it’s used between <html> Tag and <body> Tag.
The head of a markup language document could be a half whose content isn’t displayed within the browser on page loading. It simply contains data concerning the markup language document that specifies knowledge concerning the markup language document.
A markup language head will contain voluminous data info or will have little or no info, it depends on our demand. however, head half features a crucial role AN markup language document whereas making an internet site.
Metadata defines the document title, list, styles, links, scripts, and different meta info.
Example:-
<!DOCTYPE html>
<html>
<head><!-------head tag start----------->
<meta charset="utf-8">
<title>Head Tag</title>
</head><!-------head tag close----------->
<body>
</body>
</html>Following is a list of tags used in metadata:
- <title> (required in every HTML document)
- <style>
- <link>
- <meta>
- <script>
- <base>
How to add HTML <title> Tag?
HTML <title> Tag
The HTML <title> Tag is employed to supply a title name for your webpage. it’s necessary for program improvement (SEO).
The HTML <title> Tag should be used within the <head> Tag.
The title of the HTML file is displayed on the browser’s title bar.
Let’s look at an example of an HTML <title> Tag.
The HTML <title> Tag is used to outline the title of the document. It works in all HTML / XHTML documents. The <title> Tag should be placed between the <head> Tag, and a document will have only one <title> Tag.
What will the partial do?
- It defines the title in the Browser tab.
- Provides a title for the page once it complements the favorite.
- It displays the title for the page in the program results.
Note:- Part of the title should be specific to the document and its suggested length should be from 65 to 70 characters with areas.
Here you see that we are using two elements, the head tag, and the title tag. The entire title element is inside the head tag.
The body part that appears before the body part only contains the knowledge related to the page although it does not appear on the browser window. So, to show the title name on the net page, the title part is working.
If you look at the top of the example, you will see that “First Internet Page” will be displayed on the browser’s tab/title bar. The content between <title>…..</title> is shown on the title bar.
Example:-
<head>
<meta charset="utf-8">
<!-------head tag start----------->
<title>
title Tag Demo
</title>
<!-------title tag close----------->
</head>
<body>
<h1>This Is a Title Tag Example</h1>
<p>Well-Come Myprograming</p>
</body>
</html>Output:-
How to add Style in HTML?
HTML <style> Tag
HTML style is used to make custom changes to any tag that you have taken, such as strong text, width, height increase, and decrease, etc. You can custom design using style.
The style feature can be used with any HTML tag. And to apply styling to HTML tags, you must have a basic knowledge of CSS properties e.g. Color, background-color, text-align, font-family, font-size, etc.
The HTML <style> Tag is used to style an HTML page. The <style> element can only have CSS properties for that HTML page.
Note:- If we want to apply CSS for multiple pages, we should use a separate CSS file.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Style Tag</title>
</head>
<body style="background-color: #f4f4f4;">
<h1>This Is style Tag example</h1>
<p>Style Example</p>
<p style="font-weight: 700;color: blue;">Style Example</p>
<h2>Style Example</h2>
<h2 style="background: yellow;color: red;">Style Example</h2>
<div style="width: 200px;height: 200px;background-color: gray;"></div>
<h1 style="text-align: center;">Style Example</h1>
</body>
</html>Output:-
How to use HTML Base Tag?
HTML <base> Tag
HTML <base> Tag is employed to specify a base URI or URL to use for all relative links contained within an HTML Document.
How to use Link Tag in HTML?
HTML <link> Tag
The HTML <link> Tag is used to link an external style sheet to your webpage. It has two main features which are “rel” and “href“. The Rel feature indicates that it is a stylesheet, and gives way to external files.
HTML <link> Tag is employed to specify the link between the present document and external supply.
The <link> Tag is often chosen to link to an external stylesheet for the presented document, although that link can be used with website icons. It is placed in the upper section of the document.
Example:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Link Tag</title>
<!--------this is link-------------->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a Link Tag Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</body>
</html> Step2:- Create style.css File.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background: red;
}
h1{
text-align: center;
font-size: 75px;
}
p{
color: #fff;
text-transform: capitalize;
padding: 10px 200px;
text-align: center;
}Output:-
Attributes:-
- charset
- href
- hreflang
- media
- rel
- referrerpolicy
- target
- type
- sizes
- rev
Why use meta tags in HTML?
HTML <meta> Tag
<meta> Tag are used to rank the website you create and meta tags make a difference in SEO.
Definition and Use:-
The <meta> Tag associate hypertext mark-up defines information related to the language document. Metadata is data (information) related to data.
The <meta> Tag always go inside the head tag, and the area unit usually tends to specify list, page description, keywords, document author, and viewport settings.
Metadata will not be displayed on the page, however the machine is parsable.
Metadata is employed by browsers (how to show content or reload a page), search engines (keywords) and various net services.
A <meta> Tag is a way for web designers to capture a viewport (the visible space of a user’s online page) by tag (see the “Set up viewport” example below).
HTML <meta> element
The Metadata information does not appear on the webpage, although it is used by search engines, browsers, and various net services that position or scan the webpage to understand the webpage.
The <meta> Tag is placed inside the <head> tag, and can be used more than once in a document.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript, WordPress, C, Bootstrap">
<meta name="author" content="myprograming">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meta Tag </title>
</head>
<body>
<h1>All meta information goes in the head section...</h1>
</body>
</html> Attributes:-
- charset
- content
- http-equiv
- name
- scheme
Why use Script Tag in HTML?
HTML <script> Tag
HTML <script> Tag are used to specify client-side scripts such as JavaScript. Allows you to insert scripts into your HTML document. Script tags are used to write JavaScript.
HTML <script> Tag can be used in two ways.
- Script code to embed
- To link a script file
Example1:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Script Tag</title>
</head>
<body>
<h1>This is Script Tag Example</h1>
<h1 id="khushal"></h1>
<script>
document.getElementById("khushal").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>Output:-
Example2:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Script Tag</title>
</head>
<body>
<h1>This is Script Tag Example</h1>
<h1 id="khushal"></h1>
<script src="demo.js"></script>
</body>
</html>
Step2:- Create demo.js File.
document.getElementById("khushal").innerHTML = "Script Example2 (Paste the script link where the body tag closes).";
Output:-
Note:- Paste the script link where the body tag closes.
HTML Noscript Tag
HTML <noscript> Tag
The HTML <noscript> Tag is used to define alternative content for users who have disabled scripting from the browser and want to access web pages.
The <noscript> Tag is used in the head and body tags.
When using the <noscript> Tag inside the <head> element, <noscript> must contain <link>, <style>, and <meta> Tags.
If the user’s browser is not script-supported, the text inside the <noscript> Tag will be displayed.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML noscript Tag
</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
<body>
<h1 style="margin-bottom: 50px;text-align: center ;">This is HTML noscript tag Example</h1>
<script>
document.write("Welcome to Myprograming")
</script>
<noscript>Sorry! Your browser does not support Myprograming.!</noscript>
</body>
</html>Output:-