Understanding HTML Tags and Elements

HTML stands for Hyper Text Markup Language. All the Web application needs an .html file because that’s what browser understands. Whenever you hit any web server for any webpage they send an html as a response which get parsed in our browser and then the webpage appear in our device screen.

HyperText Markup Language as you can understand from it’s name it’s a kind of text file but with some difference, those differences are here, in HTML we have tags for different kind of text like tag for headings, tag for plain text, tag for images, videos etc. Now let us understand about different tags used in HTML.

HTML Tags

HTML have various tags for some specific purposes like for headings, paragraph, tables, images, videos and many more. Here we are going to understand about some tags, their syntax and all sorts of things

H1

H1 tag is used for heading, it provide the biggest heading among other heading tags, we have six of them starting from H1 to H6, H6 being the smallest one.

Syntax:

<h1>This is Heading1(H1)</h1>

Similarly we have h2,h3,h4,h5,h6:

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

Every tag in HTML have a opening tag and closing tag which you can see in the above code, opening tag starts from "<" and ends on ">" whereas, the closing tag have a "/" which tells browser that this is a closing tag.

Similarly we have different HTML tags lets go through with some of them:

p

p Tag is there for paragraphs. Whenever you have to write simple text or a paragraph you have to use this tag. The syntax of tag is same as of heading tag with p in place of h1

<p>This is a Pragraph inside a p tag.</p>
<p>Always remember to write plain text or paragraph inside p tag.</p>

div

This acts as a container. Sometimes, we need to group some tags of element so we can style them together. This can happen by containerizing them inside div tag. You can give id, class to this div and then can style this accordingly.

<div>
    <h1>This i a heading inside of a div tag</h1>
    <p>This is a paragraph inside div tag.</p>
</div>

hr

This tag provides a divider in our web page. Sometime for differentiating or styling purpose we need to apply a divider in between two sections so we can use hr tag for this. You will learn later on that now for dividing, developer prefers using a border instead of hr tag.

<div>
    <h1>Section 1</h1>
    <p>This is paragraph for section 1</p>
    <hr>
    <h1>Section 2</h1>
    <p>This is paragraph for section 2</p>
<div>

br

This tag introduces break in a line. This tag provide break between lines this is useful for styling purposes as this provide spacing between lines by which our webpage UI can look better.

<div>
    <h1>Section 1</h1>
    <p>This is paragraph for section 1</p>
    <br>
    <p>This is paragraph after break</p>
<div>

[NOTE] There are some tags in HTML which are self-closing or we can say that those tags are void element now what does self-closing means is that tags which do not need closing tag. For example, hr, br are some of the self closing tags.

---

Now, while learning HTML you will read/hear about HTML tag & HTML element. If you are curious enough you will get a doubt that what’s the difference between an HTML Tag and an HTML element, that’s a valid doubt, lets clear this doubt.

HTML tag are h1, p, div, hr, br but HTML element are the complete line. Understand this as an HTML element is HTML tag+ content of that tag, whereas HTML tag are the tags.

<h1>This is Heading</h1>

Here H1 is HTML tag but the complete line "<h1>This is Heading</h1>" is HTML element.

You can divide HTML elements into two categories:

1. Block-Level Elements: These elements cover complete width of the screen. If i write any other tag after them, they will be present below that tag on screen. Some examples of these tags are <div>, <p>, <h1> etc.

2. Inline Elements: These elements only cover the width of the content anything comes after them will appear next to them, in right of it. Some examples are <span>, <img>, <a> etc.

---

Now if you want to see the HTML code of the website which you requested you can see that in your laptop/desktop browsers. After your webpage renders in your screen you can simply right click any where there you will see "inspect" click on this this will open developer tool for you, there you can see complete HTML code of the webpage.

This is how your code looks like.

This is all about basics of HTML, HTML have various other tags but these are the basics one we’re going to discuss them in another article.