HTML Basics Tag

Introduction

The HTML tags are special keywords by which we can specify the format and appearance of any website. In HTML, the tags are bounded in < and >. All the tag starts with an open angular bracket(<) and ends with a closed angular bracket(>). Some of the tags end with a forward slash before the name of the tags. We can also place the HTML tags inside another tag.

Why do We Need to Open and Close HTML Tags?

It is very important that all the tags must be open and closed. It tells the web browser that when the piece of code begins and when the piece of code closes so that the browser can distinguish it from the other section of the webpage.

When we miss any one of the closings tag, then it can result in an incompatibility for the browser. It can also result in the improper appearance of the webpage. When the developer troubleshoots the HTML program, then it shows the missing closing tag.

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>

Before talking about the above basic essential four tags, let's talk about the HTML document declaration, i.e., <!DOCTYPE>.

<!DOCTYPE>

In HTML, <!DOCTYPE> is not a tag; it is just an HTML document declaration. It shows the version of HTML that we are using in our program. All the HTML code must start with this declaration, and this is not case-sensitive.

Syntax in HTML5:

Now let's discuss the main essential tags briefly.

1. <html></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. <head></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. <title></title>

We can provide the title for the webpage with the help of this tag. We can define the <title> tag inside the <head> tag. After giving the title for the webpage, the name of the webpage appears on the tab or title bar in the browser window.

Syntax:

4. <body></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:

Basic HTML Tags

There are so many basic tags in the HTML apart from all the essential tags. In HTML, using all the basic tags, we can format the content, also adding the heading for the webpage, also align the content and perform more things on the webpage. Below is a list of some basic tags that are commonly used on every web page.

1. <h1></h1>

With the help of this tag, we can define the heading for the HTML webpage. The content of the heading tags looks bigger and bold in comparison to normal content. There are six heading tags available on the webpage. These tags are h1, h2, h3, h4, h5, h6. The <h1> tags show the most important and most priority heading tag, and <h6> has the least priority.

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 javaTpoint</h1>
 <h2>Welcome to javaTpoint</h2>
 <h3>Welcome to javaTpoint</h3>
 <h4>Welcome to javaTpoint</h4>
 <h5>Welcome to javaTpoint</h5>
 <h6>Welcome to javaTpoint</h6>
</body>
</html>

Output:

Explanation:

In the above code, the content of <h1> tag is bolder in comparison to other content and has the most priority.

2. <p></p>

With the help of this tag, we can define the paragraph on the webpage. When we use the <p> tag, the browser automatically adds a single space before and after the paragraph content.

Syntax:

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 javaTpoint</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:

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 javaTpoint</p>
 <img src="data:image/png;base64,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" alt="logo of javaTpoint" height="200px" width="200px">
 
</body>
</html>

Output:

4. <a></a>

With the help of this tag, we can link one page to another web page. The important attribute of <a> tag is the href attribute. With the help of this attribute, we can provide the destination address of the webpage in the form of a URL. With the help of <a> tag, we can also create hyperlinks to web pages, files, email addresses, segments on the same page, etc.

Syntax:

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://www.javatpoint.com/" > Link for Official Website of javatpoint</a>
</body>
</html>

Output:

Explanation:

In the above code, we create the hyperlink to the official website of javaTpoint. When the user clicks on this hyperlink, then it will be automatically redirected to the targeted webpage.

5. <B> </B>

With the help of this tag, we can bold the specified part of the text. If we make any part of the text bold, then that part of the text becomes written in extra black color.

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>javaTpoint</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>

With the help of <br> tag, we can create a blank line while writing any paragraph. Using <br> tag while writing any paragraph increases the readability of the paragraph.

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 javaTpoint <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 javatpoint</b> <br> then they should open the website of javaTpoint and learn HTML </p>
</body>
</html>

Output:

7. <DIV> </DIV>

With the help of this tag, we can divide a separate area from the total area of the webpage. Inside that separate area, we can take different elements. It is mostly used to create the groped element.

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:

In the above code, we have taken a <div> tag. For better visibility of the area of the <div> tag, we have applied some CSS-style properties.

8. <I> </I>

With the help of this word, we can give emphasis to the particular portion of the word. That particular portion is written in italics word.

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>javaTpoint</i></p>
</body>
</html>

Output:

9. <LI> </LI>

With the help of this tag, we can create an ordered list(<ol>) and an unordered list (<ul>) in the HTML.

Syntax:

10. <OL> </OL>

With the help of this tag, we can create the ordered list in HTML, which will be numbered automatically. It will be helpful when we add some extra item to the list; then, the counting starts automatically from where it stops.

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:

In the above code, we have created an ordered list with the help of <ol> tag and listed the item with the help of <li> tag. In the output, all the items are numbered in a series ordered.

11. <UL> </UL>

With the help of this tag, we can create the unordered list in HTML. It lists the item intended with a bullet.

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: