What Are Tags and Attributes in HTML?

When writing HTML code, you will often hear the terms tag, element, and attribute. Although these three terms sound similar, each has a different role. Let's learn about the differences.

HTML Tags

Tags are special symbols in HTML that are used to tell the browser what content we want to display. Common tags that we will often use when writing HTML are: <p></p>, <img>, and so on.

<p>Hey this is text wrapper on tag P</p>

• <p> is the opening tag
• </p> is the closing tag.

HTML Elements

An HTML element is a combination of an opening tag, the content of the defined tag, and a closing tag. Therefore, we can assume that the HTML code we write using the <p></p> tag is part of an HTML element. For a clearer example, take a look at the HTML code below.

<p>Hello bro, iam an element of html</p>

<a>Hello, iam an element of html too</a>

<h2>Dont forget me please!</h2>

There are three elements that use different tags in the code above. We can refer to the content of each tag as an HTML element.

HTML Attributes

Attributes in HTML are additional pieces of information given to a defined tag to control the behavior or add properties to that element. Examples of some common tags that have built-in attributes are as follows.

// src and alt is attribute
<img src="/assets/pict.png" alt="picture"/>
// type is attribute
<input type="text"/>

Let's discuss the functions of each defined attribute.

• src serves as a determinant of the source path of the image or media that will be displayed on the web page
• alt is useful for providing a text description of the image
• type is used to determine the type of input on the input tag

Nesting Elements in HTML

We can also arrange HTML elements within other elements. Here is an example.

<p>
	// this is parent of element
	<span>and this is of child element of the tag P</span>
<p>

In the code above, we can conclude that the <p></p> tag is the parent element, while the <span></span> tag inside it is the child element.

Conclusion

Understanding the basics of HTML, such as tags, elements, and attributes, is also crucial when we begin learning HTML. Additionally, grasping the concept of nested elements and the functions of certain attributes within HTML tags are fundamental concepts that must be mastered.

Thankyou, see you in the next article.