Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain the significance of <head> and <body> tag in HTML
The two most often used tags in HTML are <head> and <body>. It is extremely rare to come across an industry-level website that does not use the <head> and <body> tags on its pages. They serve different tasks and are important in determining the web page's content, appearance, and behavior. Let’s dive into the article to learn more about the significance of <head> and <body> tag in HTML.
Significance of <head> tag
The <head> tag is a container for all the head elements in an HTML page. We use <head>…</head> tag to add it to HTML page. head tag contains the title of the document, styles, scripts, and other HTML elements. The <head> element is a container for metadata-data about data and is placed between the <html>…</html> tag.
The following elements can go inside the <head> element −
<title> − Use in every HTML page defines the title of the content.
<style> − Used to apply a simple style to HTML document
<base> − Specify a default URL and a default target for all links on a page.
<link> − Defines the relationship between the current document and an external resource.
<meta> − Defines metadata about an HTML document, typically used to specify a character set, page description, keywords, author of the document, and viewport settings.
<script> − Used to embed a client-side script (JavaScript), it points to an external script file through the src attribute.
<noscript> − Defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script. The <noscript> element can be used in both <head> and <body>.
Example
In the following example, we are placing the <title> tag inside the <head> tag.
<!DOCTYPE html> <html> <head> <title>Welcome to Tutorials point</title> </head> <body>Welcome to Tutorials point</body> </html>
When we run the above code, it will generate an output displaying the text on the title bar of the webpage.
Example
Considering another scenario where we are going to use the <style> tag inside the <head> tag.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #DE3163;
font-family: verdana;
font-size: 30px;
}
body {
background-color: #D5F5E3;
}
p {
color: #6C3483;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<p>The Best E-way Learning.!</p>
</body>
</html>
On running the above code, the output window will pop up, displaying the text applied with CSS displayed on the webpage.
Example
Following is an example where we are going to use the <script> tag inside the <head> tag.
<!DOCTYPE html>
<html>
<body style="height:100px;">
<button onclick="mytutorial()">CLICK</button>
<p id="tp"></p>
<script>
function mytutorial() {
document.getElementById("tp").innerHTML = "WELCOME.!";
}
</script>
</body>
</html>
When we run the above code, it will generate an output consisting of the click button on the webpage. When the user clicks the button, the script gets activated and displays a message.
Significance of <body> tag
The visible web page content that users see when they visit the site is contained in the <body> tag. It includes things like text, pictures, videos, links, and more. The structure and design of the webpage are determined by the content contained inside the <body> tag.
You can use a variety of HTML elements inside the <body> tag to organize your information, including headings (<h1>, <h2>…<h6>), paragraphs (<p>), lists (<ul>, <ol>, and <li>), images (<img>), hyperlinks (<a>), and many more. Additionally, you can add multimedia components like audio and video by using the appropriate HTML tags.
Example
Let’s look at the following example, where we are going to add the image to the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO" width="300" height="150">
</body>
</html>
On running the above code, an output window will pop up displaying the image that gets uploaded to the webpage.
Example
In the following example, we are going to add the audio file to the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<audio controls>
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
</audio>
</body>
</html>
When we run the above code, it will generate an output consisting of the audio file uploaded on the webpage.
13 Views
