Understanding HTML Tags and Elements

When we open any website, what is the very first thing that gives it a proper structure?
Before colors, animations, or interactivity, there is HTML.

In our previous article of how browser works internally, we saw that the browser first downloads HTML, parses it and then builds everything on top of it. HTML is the foundation of web.

In this article, we will get to learn more about HTML tags and elements in very aeasy way with examples.

What is HTML and Why do we use it?

HTML(Hyper Text Markup Language) is the standard language used to structure content on the web.
HTML answers questions like, What is the heading, a paragraph, an image, what part is a button or a link. HTML does not make websites look pretty nor it adds logic or behavior. Its only job is structure and meaning.

HTML as the skeleton

Just like the skeleton of a human gives shape to the body and bricks give structure to. the building similarly HTML gives structure to a webpage.

Without HTML, the browser would not know which text is important, which is the heading nor what is the paragraph

What is a HTML Tag?

An HTML tag is a keyword wrapped in angle brackets (< >)

Example.

<p>

This is a paragraph tag.

Most HTML tags come in pairs:

• Opening Tag <p>

• Closing Tag </p>
  The closing tag has /

Opening Tag, Closing Tag and Content

Now lets group everything together

<p>Hello, World!</p>

This has 3 parts in all:

1. Opening Tag → <p>

2. Content → Hello, World!

3. Closing Tag → </p>

We can think of HTML tag like a box, where tags define the box and the content live inside the box.

What is an HTML Element?

This is where we all get confuse,

→ Tag ≠ Element

HTML Tag

A tag is just the label:

<p>

</p>

HTML Element

An element incudes a opening tag, content and a closing tag.

<p>Hello World</p>

→ Element = Tag + Content

Self Closing (Void) Elements

Some HTML elements dont have content, So they dont need a closing tag.

Examples:

• <img>

• <br>

• <hr>

• <input>

These tags are called self-closing elements also known as void elements

Why do they not have a closing tag?

Because there’s nothing to wrap inside them.

Example:

<img src=”cat.png”>

An image does not contain text it just exists

Block Level vs Inline Elements

Block Elements

Block elements always starts on the new line and also take the full width available.

Examples:

• <h1>

• <p>

• <div>

Inline Elements

Inline Elements Stay on the same line and take as much width as needed.

Examples:

• <span>

• <a>

• <strong>

This is <span> inline </span> text

Commonly Used HTML Tags

The most common tags which are seen most of the time are:

Headings

<h1>Main Heading</h1>
<h2>Sub Heading</h2>

Used for Titles and Sections

Paragraph

<p>This is a paragraph</p>

Used for text content

div - The block level container

<div>
    <p>Hello</p>
</div>

A div groups elements together, we can think of it as a box to organize things.

span - Inline container

<p>This is <span>important</span> text</p>

It is used when you want to target a small part of text

Inspect the HTML in the Browser

One best way to learn HTML is:

1. Open any website

2. Right click → Then click on Inspect

3. Look at the HTML structure

We can notice that we are able to see:

• tags

• elements

• nesting

This is how exactly browsers see the page

HTML Tags Cheatsheet

Document Structure Tags

Text Content Tags

Layout & Grouping

Semantic HTML Tags

Links & Navigation

Media Tags

List Tags

Table Tags

Form Tags

Void (Self-Closing) Elements

Interactive & Advanced

Accessibility & Misc

Conclusion

Now we can say that HTML is the skeleton of web and we can officially read the web like a browser now!