Some important tags used in HTML
Html tags :
HTML tags are special codes or keywords that are used to define the structure and content of a web page. HTML tags are enclosed in angle brackets (< >) and usually come in pairs, with an opening tag and a closing tag. The opening tag is used to define the start of an HTML element, while the closing tag is used to define the end of the element.
HTML tags are used to define a variety of elements on a web page, such as headings, paragraphs, links, images, tables, forms, and more. HTML tags are also used to define the style and layout of the web page, such as font size, color, and spacing.
1. Heading Tags :
In HTML, heading tags are used to create headings of different levels. There are six levels of headings available, from <h1> to <h6>, with <h1> being the highest level (most important) and <h6> being the lowest level (least important).
Here is an example of how to use heading tags:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
Output :
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
It’s important to use heading tags correctly and consistently throughout your web pages. The general rule of thumb is to start with <h1> and work your way down as you create subheadings. It is not recommended to skip any heading level, because it can confuse the user and the search engines.
2. Paragraph Tag :
The <p> tag in HTML is used to create paragraphs of text. It creates a block-level element that can contain text, links, images, and other inline elements.
Here’s an example of how to use the <p> tag:
<html>
<head>
<title>My First Web Page</title>
</head> <body>
<p>This is a paragraph of text. It can contain multiple sentences and even include links, images,
and other inline elements.</p>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>
Output :
This is a paragraph of text. It can contain multiple sentences and even include links, images, and other inline elements.
This is the first paragraph.
This is the second paragraph.
It’s also important to note that <p> tag automatically adds some margin to the top and bottom of the element, this margins are called the “block formatting context” which is a way to create distance between elements.
3. Anchor Tag :
The <a> tag in HTML is used to create a hyperlink to another web page or location within the same page. The tag is often used in conjunction with the href attribute, which specifies the URL of the web page or the location on the same page that the hyperlink points to.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head> <body>
<a href=”https://arunachallaw.in/”>Click here to visit arunachallaw.in </a>
</body>
</html>
Output :
In this example, the href attribute specifies the URL of the web page that the hyperlink points to, and the text between the opening and closing <a> tags (“Click here to visit arunachallaw”) is the visible text that the user clicks on to follow the link.
4. Line Break Tag :
The line break tag in HTML is used to create a new line or break in the text. The tag is represented by <br> and it does not require a closing tag.
Here’s an example of using the line break tag to create a new line:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head> <body>
<p>This text is on the first line.<br> This text is on the second line.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head> <body>
<p>This text is on the first line.<br> This text is on the second line.</p>
</body>
</html>
Output :
This text is on the first line.
This text is on the second line.
In this example, the <br> tag is used to create a new line between the two sentences within the same paragraph. When the HTML is rendered in a web browser, the text “This text is on the second line.” will appear on a new line below the first sentence.
It’s important to note that the line break tag should only be used to create line breaks within text, and not to separate different elements on a web page. For example, to separate two paragraphs, it’s more appropriate to use the paragraph tag <p> rather than the line break tag.
5. Image tag:
The <img> tag in HTML is used to embed an image into a web page. It is a self-closing tag, which means it does not require a closing tag.
Here’s an example of using the <img> tag to embed an image:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head> <body>
<img src=”img.jpg” alt=”An image”>
#add image with url
<img src=”https://media.istockphoto.com/id/825319778/photo/sunset-on-beach.jpg?
s=612×612&w=0&k=20&c=7Igx1uakmy6d8SknH3820v3M9DUlK7vhWGnim8ySWZ4=” alt=”An
image2″>
</body>
</html>
Output :
In this example, the src attribute specifies the URL or file path of the image file to be displayed, and the alt attribute provides alternative text that will be displayed if the image cannot be loaded or if the user is using a screen reader.
Additionally, the <img> tag supports a variety of attributes that can be used to adjust the display of the image, including height, width, border, and alignment.
<img src=“image.jpg” alt=“An image of a sunset” width=“500” height=“300” border=“0” align=“center”>
Output :
6. Button tag:
The <button> tag in HTML is used to create a clickable button on a web page. When a user clicks on the button, it can trigger an action or perform a function specified by the developer.
Here’s an example of using the <button> tag:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head> <body>
<button>Click me!</button>
</body>
</html>
Output :
In this example, the <button> tag is used to create a button labeled “Click me!”. By default, the button will have a raised appearance and be styled according to the browser’s default styles.
click here to know more tags