In this article, we will learn about HTML tags, attributes, and elements. If you are just starting with web development and HTML, you should be clear about these terms.

HTML Tags

We have already covered tags in the article: What is HTML - HyperText Markup Language.

Tags give special meaning (semantics) to the text they enclose.

To annotate a text as the most significant heading we can use the <h1> tag and annotate text as a paragraph we can use the <p> tag.

<h1>I am the most significant heading</h1>

<p> I am a paragraph</p>

Opening and closing tags

Tags that need to wrap the content have a closing tag. For example, paragraph <p> and headings <h1> - <h6>.

<p> I am a paragraph </p>

<h2> I am a heading </h2>

Tags that do not wrap the content, for them, the closing tags are not required. They are called self-closing tags. Examples are line break <br/> and horizontal rule <hr/>.

HTML Attributes

Attributes are extra information about the tags. They are always specified in the opening tag. Attributes have a name and value. For example, for the <img> tag we need to specify the source (path of the image) which can be done using the src attribute. Same way for specifying the alternate text we use the alt attribute.

<img src="/media/user/profile-pic.jpg" alt="profile pic"/>

HTML Elements

The opening tag, closing tag, and content together create an HTML Element. For example, a paragraph element can be a simple <p> tag with some content or a nested element with other elements like <a> or <span>.

<p> I am a paragraph<p>

<p> 
  To read this article, visit 
   <a href=”/link-to-article”>coding varsity</a>
</p> 

Tags, attributes, and elements are the foundation of any HTML document.

Summary

1. Tags give special meaning to the text they enclose in a document.
2. A closing tag is needed if the tag needs to wrap any content. Example of closing tags are <p>, <h1> etc.
3. Attributes are extra information about tags. For example, the <img> tag has src and alt attributes.
4. HTML tags along with the content they enclose are called HTML elements.