Understanding HTML Tags and Elements

HTML(HyperText Markup Language) is a basic building block of the Web. It was created by Sir Tim Berners-Lee in 1991 at CERN to enable researchers to easily share and cross-reference documents over the internet.

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web.

HTML is not a Programming language as it does not perform any calculations. It's a "Markup" language, which means it provides structure to web content.

In simple term we can say HTML is the skeleton of the website. It provides the structure and defines what content appears where.

How you can use HTML

<h1>This is how you use HTML</h1>

The thing that is surrounded by an angle bracket is called the HTML Tag. This is a keyword that is used to write HTML. <h1> is a Opening Tag. </h2> is a Ending Tag. The actual meaning of the tag will be covered in a minute. Within the tags, the actual content resides. The tag tells the browser how to render that content.

An attribute in HTML is extra information added to a tag to control its behavior or give more details about an element.
Example:

<img src="image.jpg" alt="A sample image">

Here src and alt are the attributes of the <img> tag. src tells where the image is and alt gives an alternative text when the image does not load.

The combination of the Opening tag, Content and Closing tag is called a HTML element.

Some tags in HTML

1. <h1> tag

This is a heading tag. It ranges from <h1> to <h6>. It has six level of section heading.

<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>

In the browser you will see something like this:

2. <p> tag

This is a paragraph tag. It is used to represent a paragraph.

<h1>Welcome to My Blog</h1>
<p>This blog is all about learning web development 
in a simple and practical way.</p>

<h2>What You Will Learn</h2>
<p>You will understand HTML basics, how headings work, 
and how content is structured on a webpage.</p>

In the Browser you will see something like this:

3. <div> tag

The <div> tag is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS.

<div>
    <h1>My Blog</h1>
    <p>This is the main section of the page.</p>
  </div>

  <div>
    <h2>About</h2>
    <p>This section contains information about the blog.</p>
  </div>

In the browser you will see something like this:

As you can see there is no visual changes. But it is widely used in development. You can see the true potential of the <div> tag by applying css.

4. <img> tag

The <img> tag embeds an image into the document.

• The image tag generally has 8 attribute:
  • src: Specifies the image path or URL
  • alt: Alternate text shown if image fails to load (important for accessibility)
  • width: Sets the width of the image
  • height: Sets the height of the image
  • title: Shows text when you hover over the image
  • loading: Controls image loading behavior
  • srcset: Used for responsive images
  • sizes: Works with srcset to define image size rules

<img
  src="https://img.freepik.com/free-photo/closeup-scarlet-macaw-from-side-view-scarlet-macaw-closeup-head_488145-3540.jpg?semt=ais_hybrid&w=740&q=80"
  alt="Parrot sitting"
  width="740"
  height="500"
  title="Scarlet Macaw Parrot"
/>

In the browser you will see something like this:

What is a self closing tag?

You can observe that in <h1> tag, we have an opening tag and a closing tag, but in the <img> tag, we don't have a closing tag.

A self-closing tag is used when an element does not need anything inside it. Some HTML elements only show something or do one small job, so they don’t need a closing tag.

Like in the case of the <h1> tag, we need to give a closing tag, otherwise, the browser will not know where the end of the heading is. But the <img> tag does not need any closing tag as it only needs to embed the image.

In simple words if there is no content inside then no need of closing tag.

Block level elements and Inline elements

Block level elements are those type of HTML elements that take up the whole width of the page and start on a new line.
Examples: <div>, <p>, <h1> -- <h6>, <section> and <article>

<div>This is a block</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>

In the browser you will see something like this:

Inline elements are those type of HTML elements that do not start on a new line and take only as much space as needed.
Examples: <span>,<a>,<img>,<strong> and <em>

<p>This is <span>inline text</span> inside a paragraph.</p>
<a href="#">Link</a>
<img src="img.jpg">

In the browser you will see something like this:

Conclusion

HTML is something you understand better by doing, not by memorising. You don’t need to remember every tag out there, in real projects, you’ll end up using a small set of common tags again and again like headings, paragraphs, divs, images, and links.

The best way to learn HTML is to explore, try things on your own, and break stuff. Write code, see what changes in the browser, and learn from that. Focus more on practice than remembering tag names.

Exercise
Open any website, right-click, and choose Inspect.
Explore the HTML structure of that page and try to understand how different tags are used. This is one of the best ways to learn how real websites are built.

---

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.