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
What are the essential tags for an HTML Document?
Hyper Text Markup Language which is also known as HTML is used to create web pages and web applications. This application made using HTML are accessible to anyone on the world wide web (internet). The Hydertext and Markup language together help define a basic blueprint of the website or web applications.
An HTML tag is used to indicate the beginning and closing for an HTML element of an HTML document. With help to these HTML tags a browser transforms an HTML document into a website or web application. In general, a tag is structured with three components, Opening Tag - Marks the start of a tag, Content - The information that will be displayed on the browser and Closing - Marks the end of the tag and this tag is denote with a backslash like this </tag>.
Note − All html tags are always written in lower case.
HTML also has few unclosed tags which means there will be no closing tag to these tags like <hr> and <br> tags.
Essential HTML tags that an HTML document must have so that a web browser can understand and display it correctly. These tags help web browsers distinguish between simple text and HTML text. There are four essential HTML tags that form the basic structure for every HTML file −
- <html></html>
- <head></head>
- <title></title>
- <body></body>
Before we start with the essentials tags, lets understand about HTML declaration in a subsequent section.
<!DOCTYPE>
<!DOCTYPE> is not a tag but a declaration that tells the browser about the document type. It specifies the version of HTML that the document is using so that browsers can display web pages correctly. All HTML documents must start with this declaration. It is not case-sensitive.
Syntax
<!DOCTYPE html>
Important tags in HTML −
- <html></html>
- <head></head>
- <title></title>
- <body></body>
<html></html>
When browser encounters these tags it is considered as the beginning and ending of an HTML document. The tags present in this consider as HTML tags and treated like wise by the browser.
Syntax
<html> Content </html> <head> </head>
This tag is used to define head part of the document which contains information relates to page. This tag hold data which not visible on the browser. Under this tag there are various other tags that hold information about the page like −
- <title></title> (Mandatory)
- <base></base>
- <link></link>
- <meta></meta>
- <style></style>
- <script></script>
Syntax
<head> <title></title> <meta></meta> <link></link> <style></style> <script></script> </head>
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> </html>
<title></title>
This tag stores the title/name of the web page. Whatever title/content is given in this tag, the content appears on the tab when opened by the browser. It is described in the head tag.
This tag is quite important from the SEO stand point as the content of this tag will be used for SEO rankings. And try to hold the content between 50 - 60 characters as SEO will only display only those many number of characters.
Syntax
<title> Title of the Webpage </title>
Example
<!DOCTYPE html> <html> <head> <title>Demo Title - Tutorialspoint</title> </head> <body> <p>This is a paragraph.</p> </body> </html>
<base></base>
This element holds the base URL for all the relative links in the document, which eventually means once we define the base URL in the head section of the page then the relative link will use this URL as the starting point.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Example − Base HTML Tag</title> <base href="https://www.tutorialspoint.com/"> </head> <body> <p><a href="index.htm">Go to Tutorialspoint </a>.</p> </body> </html>
Note − HTML allows only one element for each document.
<link><link>
<link> helps us establish a bond between the current document and the external documents or resources. This has only attribute but no content. They most commonly use is to link external style sheets.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Example − Link Tag</title> <base href="https://www.tutorialspoint.com/"> <link rel=’stylesheet’ href=’style.css’> </head> <body> <p><a href="index.htm">Go to Tutorialspoint </a>.</p> </body> </html>
<style></style>
This tag embeds style information in a HTML document.
Example
<!DOCTYPE html> <html> <head> <title>Example − Style Tag</title> <base href="https://www.tutorialspoint.com/"> <style> .red { color: red; } .thick { font-size:20px; } .green { color:green; } </style> </head> <body> <p class = "red">This is red</p> <p class = "thick">This is thick</p> <p class = "green">This is green</p> <p class = "thick green">This is thick and green</p> </body> </html>
<meta></meta>
HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.
The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.
Example
<html> <head> <meta charset="utf-8"> <meta name = "keywords" content = "HTML, Meta Tags, Metadata" /> <title>My test page</title> </head> <body> <p>Hello HTML5!</p> </body> </html>
<script></script>
A script is a small piece of program that can add interactivity to your website. You can write various small functions, called event handlers using any of the scripting language and then you can trigger those functions using HTML attributes. Now-a-days, only JavaScript and associated frameworks are being used by most of the web developers. You can keep JavaScript code in a separate file and then include it wherever it's needed, or you can define functionality inside HTML document itself.
In order to define a script inside a HTML document we make use of the script tag.
Example
<html> <head> <meta charset="utf-8"> <meta name = "keywords" content = "HTML, Meta Tags, Metadata" /> <title>Example Script tag</title> <script type =’script/javascript’> document.write("Hello JavaScript!"); </script> </head> <body> <p>Sample Text </p> </body> </html>
<body></body>
This tag is used to display all the information or data, i.e, text, images, hyperlinks videos, etc., on the webpage to the user. Here, all the content like text, images, hyperlinks videos, etc., are enclosed between this tag.
Syntax
<body> Content of the body </body>
Example
<!DOCTYPE html> <html> <head> <title>HTML body Tag</title> </head> <body> Body of the document... </body> </html>
1K+ Views
