Back to: HTML Tutorials
Header Elements in HTML with Examples
In this article, I am going to discuss Header Elements in HTML with Examples. Please read our previous article where we discussed Computer Code Elements in HTML with Examples. At the end of this article, you will learn everything about HTML Header Elements with Examples.
HTML Document Structure:
We have learned that a typical HTML document will have the following structure.
In this article, we will discuss the header part in detail which is represented by HTML <head> tag. The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags.
HTML Header Elements
In HTML, the <head> tag is used to define the document’s head part, which contains information about the document. The header elements, such as <title>, <meta>, <link>, <style> and so on, are contained within the <head> tag.
The head of an HTML document is a portion of the document whose content is not displayed in the browser when the page loads. It only contains HTML document metadata, which provides information about the HTML document.
The HTML <title> Element
In HTML, the title element is used to add a title for a web page. The webpage title is used by search engines to rank and index web pages. In the example below we have added the title Dot Net Tutorials to a web page.
<!DOCTYPE html> <html> <head> <title>Dot Net Tutorials</title> </head> <body> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
The <title> element in HTML defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab. The <title> element is required in HTML documents! The <title> element:
- Defines a title in the browser toolbar
- Provides a title for the page when it is added to favorites
- Displays a title for the page in search engine results
So, try to make the title as accurate and meaningful as possible!
The HTML <style> Element
The Html style element is used to add internal styling to a web page. Style elements are always placed inside the head tag of an Html document. If we want to apply styling to a few elements then internal styling can be a good option. In the example below we have designed three boxes using internal styling.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:row;
height:100vh;
}
.box{
width:150px;
height:150px;
border:1px solid transparent;
border-radius:8px;
margin:10px;
}
.box1{
background-color:tomato;
}
.box2{
background-color:dodgerblue;
}
.box3{
background-color:mediumseagreen;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
The HTML <link> Element
In HTML the link element is used to link external files, stylesheets, icons, etc in an HTML document. Following is the syntax.
<link rel=”stylesheet” href=”style.css”>
In Html, the rel attribute is used to define the relationship between the Html document and the linked document. In the below example we have linked font awesome to insert fonts in our webpage.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:row;
height:100vh;
}
.box{
width:150px;
height:150px;
border:1px solid transparent;
border-radius:8px;
margin:10px;
display:flex;
justify-content:center;
align-items:center;
}
.box1{
background-color:tomato;
}
.box2{
background-color:dodgerblue;
}
.box3{
background-color:orange;
}
</style>
</head>
<body>
<div class="box box1"><i class="fab fa-html5 fa-6x"></i></div>
<div class="box box2"><i class="fab fa-css3-alt fa-6x"></i></div>
<div class="box box3"><i class="fab fa-js-square fa-6x"></i></div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
The HTML <meta> Element
The HTML <meta> tag contains data or metadata that isn’t shown on the page but is used by browsers and search engines. Character set, page description, keywords, document author, and viewport settings are normally defined using the <meta> element. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The HTML meta tag is an element that resides within the HTML head tag.">
<meta name="keywords" content="html, meta, tag, element">
<meta name="author" content="www.dotnettutorials.com">
<style>
body{
background-color:#141414;}
p{
padding:5px;
margin:5px;
color:mediumseagreen;
}
</style>
</head>
<body>
<p>Meta datas are used by browser and search engines.</p>
<p> <strong>charset="UTF-8"</strong> is used to define characters set.</p>
<p> <strong>name="description" </strong> is used to define description for web page. </p>
<p> <strong>name="author"</strong> is used to define author of a webpage.</p>
<p> <strong>name="keywords"</strong> is used to define keywords for search engines</p>
</p>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Setting the Viewport
The browser’s viewport is the portion of the window in which web content can be seen. It varies according to the device; for example, on a mobile phone, it will be smaller, whereas on a laptop, computer, it will be larger.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
The width property defines the viewport’s size. It can be set to a particular number of pixels, such as width=600, or to the special value device-width, which is the screen’s width when scaled to 100%. The initial-scale property is used to control the zoom level when the page is loaded by the browser.
The HTML <script> Element
The Html script element is used to add internal and external scripts inside an Html document. The script tag is always placed inside the body tag of an Html document. We can add external scripts using the src attribute inside a script opening tag.
Internal Script
<script> Code </script>
External Script
<script src=”index.js”></script>
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Welcome to Dot Net Tutorials!";
}
</script>
</head>
<body>
<h1>The Script Element</h1>
<p id="demo">Message Loading....</p>
<button type="button" onclick="myFunction()">Click to greet</button>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
The HTML <base> Element
The HTML <base> tag is used to provide a base URL for relative links. We can set the base URL inside the page head element then all relative links inside the document will use that URL as a starting point.
For example, if the URL defined by the base tag is www.abc.com then every relative URL on the page will be prefixed by, www.abc.com/. Href and target attribute must be included with the Html base tag and there can be only one base element inside an Html document.
<!DOCTYPE html>
<html>
<head>
<base href="https://dotnettutorials.net/course/html-tutorials/">
</head>
<body>
<br>
<a href="./">HTML Tutorials</a>
<p>Visit above link</p>
</body>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Points to Remember:
- The HTML <head> element is a container for metadata (data about data)
- The HTML <head> element is placed between the <html> tag and the <body> tag
- The HTML <title> element is required and it defines the title of the document
- The HTML <style> element is used to define style information for a single document
- The HTML <link> tag is most often used to link to external style sheets
- The HTML <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
- The HTML <script> element is used to define client-side JavaScript
- The HTML <base> element specifies the base URL and/or target for all relative URLs in a page
In the next article, I am going to discuss HTML Semantic Elements with Examples. Here, in this article, I try to explain Header Elements in HTML with Examples and I hope you enjoy this HTML Header Elements with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.