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
Elements that are used in head section of HTML page
HTML stands for HyperText Markup Language and is a web-based scripting language. HTML consists set of elements that are used to create and structure web pages. Programmers often prefer HTML to design websites because it is flexible and easy to use.
An HTML document consists of three major segments; head, body, and footer. Following is the basic layout of an HTML document −
<html>
<head>
<!--Header section-->
</head>
<body>
<!--Body section-->
</body>
<footer>
<!--Footer section-->
</footer>
</html>
The HTML <head> element is a container for the following elements − <title>, <style>, <link>, <meta>, <script> and <base>. Let us look into them one by one using appropriate examples.
HTML <title> Element
The HTML <title> element is used to define the title of the document. It must be in the text format and we can see the specified title in the browser tab.
It is important to use the <title> element in HTML documents because the page title is used by search engine algorithms to decide the order when listing pages in search results.
Note − We cannot have more than one <title> element in an HTML document.
Example
In the following example, we are defining a title for the HTML document using the HTML <title> element.
<!DOCTYPE html> <html> <head> <title>Tutorialspoint</title> </head> <body> <p>Body content....</p> </body> </html>
HTML <style> Element
The HTML <style> element is used to specify the style information (CSS) for an HTML document.
Example
In the example below, we are using the <style> element to apply some styling (CSS) to the HTML elements.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: aquamarine;
}
h1 {
color: seagreen;
font-weight: bolder;
}
p {
color: seagreen;
}
</style>
</head>
<body>
<h2>Tutorialspoint</h2>
<p>Simply Easy Learning at your fingertips...</p>
</body>
</html>
HTML <link> Element
The HTML <link> element is used to define the relationship between the current HTML document and external resources. We often use the <link> tag to link external CSS style sheets.
Example
In the following example, we are trying to link our current HTML document to an external style sheet.
Following is the HTML document −
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p {
color: seagreen;
}
body {
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<p>Simply Easy Learning at your fingertips...</p>
</body>
</html>
As we can see in the output, the styling specified in the external CSS file is applied to the HTML elements.
HTML <meta> Element
The HTML <meta> element allows us to specify the page description, character set, keywords, author of the HTML document, and the viewport settings.
These specified metadata will not be displayed on the webpage, instead, it is used by web browsers, and search engines (keywords).
Example
In the following example, we are defining the meta information using the HTML <meta> tag −
<!DOCTYPE html> <html> <head> <!--defines the character set--> <meta charset="UTF-8"> <!--Defines description for the web page--> <meta name="description" content="Technology on finger tips"> <!--Defines keywords for search engines--> <meta name="keywords" content="HTML, CSS, JavaScript"> <!--Defines the author of the webpage--> <meta name="author" content="Arjun"> <!--Defines the viewport settings--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>body content...</p> </body> </html>
HTML <script> Element
The HTML <script> element allows us to embed a client-side script (JavaScript). The <script> element either contains the JavaScript statements or it links to an external script file through the src attribute.
Example
In the following example, we are including the scripting (JavaScript) statements inside the <script> element −
<!DOCTYPE html>
<html>
<head>
<script>
function btn() {
document.getElementById("demo").innerHTML = "Simply Easy Learning at your fingertips...";
}
</script>
</head>
<body>
<h1>Tutorialspoint</h1>
<p id="demo">...</p>
<button type="button" onclick="btn()">Click here!</button>
</body>
</html>
98 Views
