Understanding HTML Tags and Attributes

Tags of HTML

HTML stands for Hypertext Markup Language, and it is used to create web pages. HTML allows web developers to structure content, add images and videos, create links, and more. One of the key features of HTML is the use of tags. Tags are used to identify different elements of a web page and tell the browser how to display them. In this article, we will look at the different types of tags in HTML and provide examples of how they are used.

HTML tags are enclosed in angle brackets and consist of the tag name, attributes, and sometimes content.

Here is an example of a basic HTML tag.

<p>This is a paragraph.</p>

Output

HTML Tags and Attributes

In this example, the tag name is "p", which stands for paragraph. The content between the opening and closing tags is "This is a paragraph." Let's look at some different types of HTML tags in more detail.

Headings in HTML

Headings are used to indicate the importance of a section of content. There are six levels of headings in HTML, from h1 to h6. The h1 tag is used for the main heading of a page, while the h2 to h6 tags are used for subheadings.

Here is an example of a heading.

<!DOCTYPE html>
<html>
<body>

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

</body>
</html>

Output

HTML Tags and Attributes

Paragraphs in HTML

Paragraphs are used to separate blocks of text. The p tag is used to define a paragraph.

Here is an example.

<p>This is a paragraph of text. It can be as long or as short as you like.</p>

Output

HTML Tags and Attributes

Links in HTML

Links are used to connect one web page to another. The tag is used to define a link.

Here is an example.

<a href="http://www.example.com">Click here to visit Example.com</a>

In this example, the href attribute is used to specify the URL of the page to link to.

Output

HTML Tags and Attributes

Images in HTML

Images are used to add visual content to a web page. The img tag is used to define an image.

Here is an example.

<img src="C:\Users\Sachin Mishra\Desktop\New folder (2)\Sachin_Repository2\E-Commerce-Project\Images\myphotoless.jpeg" alt="A picture of a cat">

In this example, the src attribute is used to specify the URL of the image file, while the alt attribute provides alternative text for the image.

Output

HTML Tags and Attributes

Lists in HMTL

Lists are used to organize content into an ordered or unordered list. The ul tag is used for an unordered list, while the ol tag is used for an ordered list.

Here is an example of an unordered list.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

In this example, the li tag is used to define each item in the list.

Output

HTML Tags and Attributes

Tables in HTML

Tables are used to present data in a structured format. The table tag is used to define a table, while the tr tag is used to define each row, and the td tag is used to define each cell.

Here is an example.

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Output

HTML Tags and Attributes

Forms in HTML

Forms are used to collect user input, such as text or selections. The form tag is used to define a form, while the input tag is used to define an input field.

Here is an example.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value>
</form>

Output

HTML Tags and Attributes

Attributes of html

HyperText Markup Language is the standard markup language used to create web pages. It consists of a set of elements and attributes that define the structure and content of a web page. In this article, we will discuss the various attributes of HTML, along with examples.

class attribute

The class attribute is used to define a class for an HTML element. The class is used to apply CSS styles to the element. Multiple elements can have the same class, and CSS styles can be applied to all of them at once.

Example

<p class="red-text">This text is red.</p>

id attribute

The id attribute is used to define a unique identifier for an HTML element. The id can be used to link to a specific element on the page or to apply CSS styles to the element.

Example

<div id="header">This is the header.</div>

href attribute

The href attribute is used to define the URL of a link.

Example

<a href="https://www.google.com">Go to Google for use of href attribute</a>

Output

HTML Tags and Attributes

src attribute

The src attribute is used to define the source URL of an image or other media element.

Example

<img src="image.jpg" alt="An image">

alt attribute

The alt attribute is used to provide a text description of an image for users who are unable to see the image.

Example

<img src="image.jpg" alt="An image of a cat">

Output

HTML Tags and Attributes

title attribute

The title attribute is used to provide additional information about an HTML element. The information is displayed when the user hovers over the element.

Example

<a href="https://www.google.com" title="GO To Mysite">Google</a>

style attribute

The style attribute is used to apply inline CSS styles to an HTML element.

Example

<p style="color: red; font-size: 20px;">This text is red and 20px.</p>

Output

HTML Tags and Attributes

target attribute

The target attribute is used to define where the link should open.

Example

<a href="https://www.google.com" target="_blank">Open Google in a new tab</a>

rel attribute

The rel attribute is used to define the relationship between the linked document and the current document.

Example

<a href="https://www.google.com" rel="nofollow">Google</a>

value attribute

The value attribute is used to define the value of a form element, such as a text input or a dropdown.

Example

<input type="text" name="name" value="John">

type attribute

The type attribute is used to define the type of a form element, such as a text input or a button.

Example

<input type="text" name="name">

disabled attribute

The disabled attribute is used to disable a form element, such as a text input or a button.

Example

<input type="text" name="name" disabled>

Output

HTML Tags and Attributes

Selected attribute

The selected attribute is used to define the default selected value of a dropdown.

Example

<select name="color">
  <option value="red">Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Output

HTML Tags and Attributes

readonly attribute

The read-only attribute is used to make a form element, such as text input, read-only.

Example

<input type="text" name="name" value="John" readonly>

Output

HTML Tags and Attributes

Conclusion

A tag is a way of denoting an HTML element in the program. In contrast, an attribute is a way of defining the characteristics of an HTML element. Consist of Furthermore, a tag can be a starting tag or an ending tag, while an attribute consists of a name and value. Conclusion In brief, HTML is the basic language for all other web technologies.