HTML Tags vs Elements ?

At this point we were supposed to learn block vs inline vs inline block elements. But before anything we need to learn about difference between Html tags and html elements.

Both are very similar, except one very small difference:: html tags with contents is called html elements.
Now the question arises, what is html tags and how its written ?
Html tags as explained previously is the smallest block/unit of html which when repeated one or multiple times, form a whole webpage. Now observe HTML tags and HTML elements below.

Html tag example ::

<h1>.....</h1>
<p>.....</p>
<div>.....</div>

Note:
These 5 dots you see inside tags mean nothing or empty spaces.

Now tags has an opening and closing, called as opening tag and closing tag. Opening tag (<h1>) and closing tag(</h1>). And between opening and closing tag, we put contents, that we display on HTML or on UI.
The way to write it is::
Opening tag: Between two angle brackets we put the name of tag e.g h1 or p (<h1>)
Closing tag: Between two angle brackets and forward slash, we put the name of tag e.g h1 or p (</h1>)

Html Element example ::

<h1>Learn HTML.</h1>
<p> A new day.</p>
<div>Wrap this element.</div>

Now if you see this code snippet and compare this with html tag snippet above, you find that here we have content unlike in html tags. So now you understand the difference.

HTML Attributes ?

ID Attributes

<h1 id="heading">Learn HTML.</h1>
<p id="content"> A new day.</p>
<div id="container">Wrap this element.</div>

ID attribute can be used in any html tag/elements. But please observe that ID attribute is very unique and one type of ID can not be repeated in the same HTML file.

Below is not possible as the ID is not unique. The ID content is there in p tag and div tag too and hence is not unique

<p id="content"> A new day.</p>
<div id="content">Wrap this element.</div>

Note::
Now we put ID in html elements because we want to either manipulate it though javascript or if we want to apply css. Thats the purpose of using ID attribute.

Class Attributes

Class attribute can be used in any html tag/elements. But please observe that class attribute is not unique and one type of class can be repeated in the same HTML file multiple times.

Some examples of html class attributes::

<p class="content"> A new day.</p>
<div class="content">Wrap this element.</div>

Note::
Please observe that we use class attribute to mostly apply same kind of styles to multiple html elements and sometimes to apply javascript, although very less.

Href Attributes

Href attribute can be used only in anchor tag to move between multiple html files for navigation or to move from current html file to external url.
Examples of href attributes::

<a href="/about"> A new day.</a>
<a href="https://www.youtube.com/">youtube</a>

Title Attributes

Title attribute can be used in any html elements/tags. The purpose of using it is that when you hover over that element (in which you used title attibute), the title value is visible on UI or browser.
Either you use the same title attribute or different, it does not matter. But keep in mind that you use title attribute to convey some kind of meaning, if you want to use it.
Examples of title attributes::

<p title="cards"> A new day.</p>
<div title="price">Wrap this element.</div>

Style Attributes ?

This style attribute is used for styling html elements in html file itself, without the need for doing it in .css file (which is the preferred way). And we hardly do styling with style attribute. But look at the below example how it is used.

<h1 style="color:green;text-align:left">Life of pie</h1>
<p style="color:red">I am following you pie.</p>

Please observe that inside html file, we write styles with single/double quote and each style separated by a semicolon such as color and text-align are separated in h1 above.

Note::
Now html attributes are not at all limited to only these 5 defined above. Its huge and you can study more about this in this below link::