Html Tags, Elements & Attributes

Html Tags, Elements & Attributes

Table of contents

No heading

No headings in the article.

Well, I want you to relax because I have simplified them for you, all you need is to learn and know the difference. To start with, HTML Tags are the keywords used to format and structure the contents within a web page. For example, the "p" in between this angle bracket <p></p> is called the paragraph's content, likewise the "img" here<img />, is called the image tag, it indicates the tag for displaying images.

The tags are placed in an angle bracket. They are two types namely:

CLOSING TAGS: These types of tags receive contents in between them. An example is the p tag which receives content in the middle of its open and closing <p>.......</p>.

EMPTY OR SELF-CLOSING TAGS: These types of tags do not receive content in between them. An example is the <img /> or <input />.

Secondly, HTML ELEMENT is an individual component of an html document or web page. It is the combination of the whole tag, its content, and the attributes specified in it. Example is <p>I love writing codes</p>, <p style="color: red;">Oh My God!</p> or <img />. Any of these three can be classified as part of HTML ELEMENTS. HTML ELEMENTS can also be classified into two types namely:

BLOCK ELEMENTS: These types of elements occupy the whole horizontal space without allowing other elements in the same role. Examples are <div>...</div>, <p>...</p>, <aside>...</aside> and so on.

INLINE ELEMENTS: These types of elements do not occupy the whole horizontal space. Examples are <span>...</span>, <b>...</b>, <label>...</label> etc

Lastly, HTML attribute is a property of an HTML ELEMENT that provides additional information or functionality to it. They are defined within the opening tag of an HTML ELEMENT and are typically made up of a name and a value. Examples are the "href" attribute of an anchor element (<a>) which specifies the link destination, and the "src" attribute of an image element (<img>) which specifies the source of the image.

I hope you are able to understand the difference between the three HTML concepts now. Visit W3Schools, FreeCodeCamp or MDN Web Docs to dive deep, Thanks ☺️❤️