Introduction
HTML tags are unique keywords that allow us to define the layout and style of a website. Within HTML, tags are enclosed in angle brackets. Each tag begins with an opening angle bracket. Certain tags are closed with a forward slash preceding the tag name. It is also possible to nest HTML tags within one another.
Why do We Need to Open and Close HTML Tags?
Ensuring that all tags are both opened and closed is crucial in web development. This practice defines the start and end of a code snippet, enabling the web browser to differentiate it from other parts of the webpage.
If a closing tag is omitted in HTML, it can lead to browser compatibility issues and affect the webpage's layout. During HTML program debugging, developers can identify the missing closing tag as the root cause of the problem.
Essential HTML Tags
Every HTML code has some essential tags. These are needed for the web browser to understand and display the webpage correctly. These also help the web browser to distinguish between normal text and HTML code. Four basic essential HTML tags are needed for the creation of the webpage. These are as follows.
- <html></html>
- <head></head>
- <title></title>
- <body></body>
Prior to discussing the fundamental four tags mentioned above, it is important to address the HTML document declaration, also known as <!DOCTYPE>.
## <!DOCTYPE html>
Within HTML, <!DOCTYPE> is not considered a tag; rather, it serves as an HTML document declaration. This declaration indicates the specific version of HTML being employed within our program. It is mandatory for all HTML code to commence with this declaration, and it is insensitive to letter case.
Syntax in HTML5:
<!DOCTYPE html>
<!doctype html>
Let's now delve into the primary important tags in a concise manner.
1. ### 1. <html> <html>1. <html>
With the help of this tag, we can define the document as a web page. We can also specify the beginning and end of HTML code with the help of these tags. All the tags of HTML are contained by this tag except <!doctype html>. All the tags of HTML are nested inside the <html></html> tags.
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. ### 2. HTML Tags2. <head>
With the help of these tags, we can define the heading section of HTML code. It defines the information about the web browser, and this information is not displayed on the web page. It also contains all the information related to the web page. It also contains some tags like <title>, <meta>, <link>, etc.
We can locate the <head> tag in between the <html> tag and <body> tags.
Syntax:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
3. 3. Title Tag3. Title Tag
The title of a webpage can be specified using the title tag. This tag is placed within the head tag of the HTML document. Once a title is defined, it is displayed on the tab or title bar of the browser window.
Syntax:
<title>Webpage Title</title>
4. 4. HTML Tags4. <body>
With the help of this tag, we can declare all the information and other visible content for the webpage. The <body> tags contain all the information like images, links, plain text, videos, etc. We can declare all other tags like <p> tag for paragraph, <strong> tag for bold text, <a> tag for images, <ol> tag for the ordered list, etc.
Syntax:
<body> Content </body>
Basic HTML Tags
Numerous fundamental tags are available in HTML besides the essential ones. These basic tags in HTML allow for content formatting, creating webpage headings, aligning content, and executing various tasks on the webpage. The following is a compilation of several commonly utilized basic tags found on most web pages:
1. 1. Basic HTML Tags1. Basic HTML Tags
By utilizing the heading tags in HTML, we can set titles for the webpage. The text within heading tags appears larger and bold compared to regular text. There are a total of six heading tags that can be used: h1, h2, h3, h4, h5, and h6. Among these tags, h1 represents the highest importance and priority, while h6 signifies the lowest level of importance.
Syntax:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome to our tutorial</h1>
<h2>Welcome to our tutorial</h2>
<h3>Welcome to our tutorial</h3>
<h4>Welcome to our tutorial</h4>
<h5>Welcome to our tutorial</h5>
<h6>Welcome to our tutorial</h6>
</body>
</html>
Output:
Explanation:
The text enclosed within the <h1> tag in the code snippet above appears with a higher level of emphasis than the surrounding content, indicating its superior importance in the display hierarchy.
2. ### 2. <h2>2. <h1>
By utilizing this specific tag, it becomes possible to specify a paragraph within a webpage. Upon implementing the <p> tag, the browser will autonomously insert a solitary space both preceding and following the paragraph's content.
Syntax:
<p> content </p>
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Welcome to our tutorial</p>
</body>
</html>
Output:
3. <img>
With the help of this tag, we can insert the image into the webpage. <img> tag has no closing tag. There are some important attributes available for the <img> tag.
- Src: with the help of this, we can provide the address of the image tag.
- Alt: with the help of this tag, we can provide alternative text if there is a problem during the loading of the image.
- Width: with the help of this tag, we can provide the width for the image.
- Height: with the help of this tag, we can provide the height for the image.
Syntax:
<img src="" alt="">
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Welcome to our tutorial</p>
<img src="data:image/png;base64,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" alt="logo of our site" height="200px" width="200px">
</body>
</html>
Output:
4. ### 4. <a> Hyperlink4. <a>
By utilizing this tag, we have the capability to establish a connection between two web pages. The key feature of <a> tag is its href attribute. This attribute enables us to specify the target location of the webpage using a URL format. Through the utilization of <a> tag, we can generate hyperlinks to various destinations such as web pages, files, email addresses, sections within the same page, and more.
Syntax:
<a href=""></a>
Example 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://logic-practice.com/" > Link for Official Website of our site</a>
</body>
</html>
Output:
Explanation:
Within the provided code snippet, we establish a hyperlink directing to the official webpage of our website. Upon user interaction by clicking this hyperlink, an automatic redirection to the intended webpage occurs.
5. 5. <a> 5. <a>
By utilizing this tag, it is possible to emphasize a specific portion of the text. When applying bold formatting to any section of the text, that particular segment will appear in a darker shade.
Example 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Welcome to <b>C# Tutorial</b></p>
</body>
</html>
Output:
Explanation:
In the above code, we have taken a paragraph tag, and inside that <p> tag, we write some statements and implement the <b> tag in some of the text in the statement of <P> tag.
6. <BR>
By utilizing the <br> tag, it is possible to insert an empty line within a paragraph. The implementation of the <br> tag when composing a paragraph enhances the legibility of the content.
Example 6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Welcome to our tutorial <br><br>whenever someone feel any difficulties in understanding <br>the HTML and CSS then they should open google.com <br> and search for <b>
html C# Tutorial</b> <br> then they should open the website of our site and learn HTML </p>
</body>
</html>
Output:
7. 7. <div> <h2> 7. <div> <section>
By utilizing this tag, we have the capability to segregate a distinct section from the overall webpage area. Within this isolated section, various elements can be placed. Its primary function is to facilitate the creation of grouped elements.
Example 7:
create the groped element.
Example 7:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="border: 2px solid red; height: 200px; width: 200px;"> <h3>This is a div tag</h3></div>
</body>
</html>
Output:
Explanation:
Within the code snippet presented earlier, a <div> element has been selected. To enhance the clarity of the region enclosed by the <div> element, specific CSS styling properties have been implemented.
8. 8. 1. 8. CSS Styling
By using this formatting feature, we can highlight specific parts of a word. The emphasized section is displayed in italicized text.
Example 8:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Welcome to <i>C# Tutorial</i></p>
</body>
</html>
Output:
9. 9. 1. 9. 1. 2.
Using this tag in HTML allows us to generate a numbered list (<ol>) and a bulleted list (<ul>).
Syntax:
<LI> </LI>
10. 10. <ol> <li> 10. <ol> <li>
By utilizing this specific tag in HTML, we can generate an ordered list that will automatically display numbers. This feature becomes particularly useful when new items are added to the list, as the numbering will seamlessly continue from where it left off.
Example 9:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2><u>Name of the months:-</u></h2>
<ol><li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December </li></ol>
</body>
</html>
Output:
Explanation:
Within the provided code snippet, an ordered list was established utilizing the <ol> element, and the items were enumerated using the <li> element. The resultant output showcases the items being sequentially numbered in an ordered manner.
11. 11. <ul> <li> 11. 1.
Using this tag in HTML allows us to generate an unordered list, where each item is marked with a bullet point.
Example 10:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2><u>Name of the months:-</u></h2>
<ul><li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December </li></ul>
</body>
</html>
Output: