HTML stands for HyperText Markup Language. It is an important language to design web pages or websites. These websites are visible to anyone on the internet. HTML is a combination of Hypertext and Markup language. Where hypertext is a link between the webpages, and markup language is used to define the text document within a tag, that defines the structure of the web pages.
HTML uses predefined tags that tell the browser how to display the content. Tags are nothing but some instructions that are enclosed in angle braces(i.e., <>). It is divided into three parts, i.e., opening tag, content(which will display on the browser), and closing tag, but some tags are special tags that do not contain closing tags like <BR> tag. When you are working with HTML tags always remember to include closing tags. If you forget to close the tag, the browser applies the effect of the opening tag until the end of the page. HTML contains four essential tags that form the basic structure of any webpage or HTML file:
- <html></html>
- <head></head>
- <title></title>
- <body></body>
Now let us discuss each tag one by one:
1. <!DOCTYPE html>
It is also known as document type and should be included in an HTML file. It actually tells the browser that this is an HTML document. It is not a tag or an element but it is information.
Syntax:
<!DOCTYPE html>
2. <html></html>
This tag marks the beginning and ending of the HTML document and whatever code is present in between these tags totally gets considered by the browser. Also, it tells the browser that the document is an HTML document. All the other tags in between these tags only get considered by the browser.
Syntax:
<html> Content </html>
3. <head></head>
This tag store the data which actually doesn't appear on the webpage but it gives more information about the webpage. Or in other words, this tag is used to define the head part of the document which contains the information related to the webpage. It also contain tags like, <title>, <meta>, <link>, <style>, etc.
Syntax:
<head> <title> Title of the Webpage </title></head>
4. <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.
Syntax:
<title> Title of the Webpage </title>
5. <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 </body>
Some other HTML tags are:
1. <!-- comment -->
This tag is used to add comments in the HTML codes. These comments help the program to understand the code. The content inside the comment tag doesn't visible on the browser.
Syntax:
<!--Write comments here -->
2. <meta>
These meta tags are used inside the head tag and they making describe the metadata i.e data about data. These tags are useful in search engine optimization which means when users search for our websites the chances that the browser recommends our webpage becomes high which leads to an increase in traffic over the webpage. A single HTML document can contain multiple tags.
Syntax:
<meta attribute-name="value">
3. <link rel ="stylesheet" href="file.css ">
This tag is used to include external style sheets. Use this tag when you don't want to include CSS in the HTML document. To make it more simple we make a CSS file with the code and include this file in the link tag.
Syntax:
<link rel ="stylesheet" href="file.css ">
4. <script></script>
It is used for including javascript code. The external javascript can also be linked using the src attribute in the opening script tag. It can be included in the head or body tag.
Syntax:
<script>script content</script>
5. Heading:
HTML provides six types of headings, i.e., H1, H2, H3, H4, H5, and H6. Here, H1 is the highest level heading and H6 is the lower level heading. These headings are used to highlight the important topics.
Syntax:
<h1> content </h1>
<h2> content </h2>
<h3> content </h3>
<h4> content </h4>
<h5> content </h5>
<h6> content </h6>
Example 1:
Simple HTML program:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--The description written on title tag get appeared as browser tab name-->
<title>Geeks For Geeks </title>
</head>
<!-- Whatever content in body tag appears on the webpage-->
<body>
<h1> Geeks For Geeks </h1>
<h3> A computer science portal for geeks </h3>
</body>
</html>
Output:
Example 2:
HTML program in which we are adding external CSS using the <link> tag
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Including css file with name GFG.css-->
<link rel="stylesheet" href="GFG.css">
<!--The description written on title tag get appeared as browser tab name-->
<title>Geeks For Geeks </title>
</head>
<!-- Whatever content in body tag appears on the webpage-->
<body>
<h1> Geeks For Geeks </h1>
<h3> A computer science portal for geeks </h3>
</body>
</html>
GFG.css
body {
text-align: center;
}
h1{
color: darkgreen;
}
h3{
color:darkgreen;
}:
Output:
Example 3:
HTML program in which we are adding javascript file GFG.JS using <script> tag:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Including css file with name GFG.css-->
<link rel="stylesheet" href="GFG.css">
<!--The description written on title tag get appeared as browser tab name-->
<title>Geeks For Geeks </title>
</head>
<!-- Whatever content in body tag appears on the webpage-->
<body>
<!--Including JS file with name GFG.JS-->
<script src ="GFG.JS"> </script>
<h1> Geeks For Geeks </h1>
<h3> A computer science portal for geeks </h3>
<button onclick="darkMode()"> CLICK ME TO GET DARK MODE</button>
</body>
</html>
function darkMode() {
document.body.style.backgroundColor = "black";
}
Output:
On clicking the button.
Similar Reads
HTML del Tag
The HTML <del> tag is used to indicate text that has been deleted from a document. It visually represents this deletion by striking through the text, which helps in tracking changes or revisions in documents.It provides semantic meaning for content that has been intentionally removed, such as
2 min read
HTML head Tag
The <head> tag in HTML is an essential element used to define the head section of an HTML document. It is placed inside the <html> tag, and used to store information that doesn't appear directly on the webpage itself.It contains metadata that helps the browser and search engines to under
4 min read
HTML article Tag
The HTML <article> tag defines a self-contained, independent piece of content like a blog post, news article, or comment. It is designed for content that can be independently distributed, shared, or reused, providing semantic meaning to the content.This tag is introduced in HTML5.HTML<!DOCT
3 min read
HTML data Tag
The HTML <data> tag is used to link a piece of content with a machine-readable translation, making it easier for machines to interpret the data.The content inside the tag is the text displayed to the user.It does not affect the layout or visual display of the content.It is useful for embedding
2 min read
HTML a Tag
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. This attribute determines where the user is directed upon clicking the link.HTML<a href="http
2 min read
HTML Deprecated Tags
The deprecated tags or attributes are those attributes which are replaced by some other attributes. The tag or attributes deprecated when the same attributes is achieved by some other way. They are considered outdated and may not be supported in modern browsers or future versions of HTML. HTML Depre
2 min read
HTML embed Tag
The <embed> tag in HTML is used to embed external content or media files (such as audio, video, or interactive elements like Flash) directly into a webpage.It is a self-closing tag It is often used for embedding files like PDFs, images, or other types of media that require a plugin or external
2 min read
HTML aside Tag
The <aside> tag is used to describe the main object of the web page more shortly like a highlighter. It identifies the content that is related to the primary content of the web page but does not constitute the main intent of the primary page. The <aside> tag contains mainly author inform
2 min read
HTML dt Tag
The <dt> tag in HTML is used to specify the description list. It is used inside the <dl> element. It is usually followed by a <dd> tag. The subsequent <dd> elements provides some related text associated with the term specified using <dt>. Syntax: <dt> Content...
2 min read
HTML header Tag
The <header> tag is a semantic HTML element that is used to define the introductory or navigational content of a webpage or a section. Typically, a header contains elements like:The website or page titleLogo or brandingNavigation menusSearch barAny introductory information relevant to the page
4 min read