Skip to main content
HashnodePallabDev

Command Palette

Search for a command to run...

Understanding HTML Tags and Elements

Updated
•8 min read
Understanding HTML Tags and Elements
P
Pallab Karmakar

Overview

In today’s article, we are going to understand what HTML is and why it is the foundation of Web-Development.

What HTML is and why we use it

We can assume HTML is like the skeleton of a human. This is used to define the structure of a webpage. Then we have CSS, which wraps that skeleton with skin, and the OG JavaScript, which acts like a Brain.

Why HTML?

Before 1989, everyone mostly shared information on computers as plain text.

Then, in 1989, Sir Tim Berners-Lee proposed the World Wide Web (WWW) while working at CERN. To simplify the web so that researchers can share documents and link them together over the internet.

In the WWW, Tim Berners-Lee proposed a few standards, which are follow:

  1. HTML (Hypertext Markup Language)

  • Instead of writing text, we write a language that can give structure to the content.

  • Example: Headings, paragraphs, links, images

  1. HTTP (HyperText Transfer Protocol)

  • A communication rule/protocol to send and receive web pages

  • It defines how browsers and servers talk

  1. URL (Uniform Resource Locator)

  • A unique address for every document/page

  • Example: https://example.com/page

Because HTML became the standard way to create and structure web pages, browsers can read it and display content properly.

What an HTML tag

In HTML, to give structure to our content, we use a TAG, a tag is nothing but a writing style for a particular thing with a meaning.
Example:

If we write an article, then that is supposed to have a heading. In HTML, for that, we have the Heading tag

<h1></h1>

If we write a paragraph, in HTML, we have a paragraph tag also

<p></p>

Now, here you can see that to write a tag, we use the less-than and greater-than symbols < > , but in our code we already see that we are also use forward slash at the end of that text like this </>. The reason behind this
In HTML, we start a tag with <>, but the browser does not know where the tag is supposed to end. To solve that, we have a closing tag, which follows this syntax </> 

<> # tag opening
</> # tag closing
# Example
<h1></h1>

What is an HTML Element

So many beginners actually had confusion on this topic. When we wrap content with closing and opening tag then that is known as Han TML Element.

Example:

<h1></h2> # Tag 
<h1> Heading </h2> # Element

In HTML, we have mainly 2 types of element is there

  • Block-level Element

  • Inline Element

Block-Level Element

  • When we use these element in our HTML, then it awasy start from a new line.

  • It also takes the full width or we can say the entier line.

  • You can set width/height/margin/padding

Examples of Block elements:

<div></div>
<p></p>
<h1></h1> to <h6></h6>
<section></section>
<article></article>
<header></header>
<footer></footer>
<main></main>
<nav></nav>
<aside></aside>

<ul></ul>
<ol></ol>
<li></li>

<form></form>
<table></table>

Inline Elements

  • This element doesn’t start form new line

  • This only takes space, so it just perfectly fits, and no extra space is used.

  • width/height usually won’t work properly

Examples of Inline elements:

<span></span>
<a></a>
<b></b>
<i></i>
<strong></strong>
<em></em>
<img />
<input />
<label></label>
<button></button>

Commonly used HTML tags

<html>

The whole webpage stays inside this tag.

<html>
  ...
</html>

<head>

Stores page info (title, CSS, meta). Not visible.

<head>
  <title>Home</title>
</head>

<title>

Shows page name in browser tab.

<title>My Website</title>

<body>

All visible page content stays inside this.

<body>
  <h1>Hello</h1>
</body>

Text tags

<h1> to <h6>

Headings (h1 biggest, h6 smallest).

<h1>Main Title</h1>
<h3>Small Title</h3>

<p>

Paragraph text.

<p>This is a paragraph.</p>

<br>

New line inside text.

<p>Hello<br>World</p>

Now just look at the combined code I prepare what i learn till now

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>

  <body>
    <h1>Main Title (h1)</h1>
    <p>This is a paragraph under h1.</p>

    <h2>Heading (h2)</h2>
    <p>This is a paragraph under h2.</p>

    <h3>Heading (h3)</h3>
    <p>This is a paragraph under h3.</p>

    <h4>Heading (h4)</h4>
    <p>This is a paragraph under h4.</p>

    <h5>Heading (h5)</h5>
    <p>This is a paragraph under h5.</p>

    <h6>Heading (h6)</h6>
    <p>This is a paragraph under h6.</p>
  </body>
</html>

Output

<hr>

Horizontal line to separate sections.

<hr>

<br>

Use to give a new line break

<br>

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HR and BR Example</title>
  </head>

  <body>
    <h1>HR and BR Example</h1>

    <p>
      This is line 1 using normal text.
      <br>
      This is line 2 after using br tag.
      <br>
      This is line 3 after using br tag again.
    </p>

    <hr>

    <p>
      This section is separated using hr tag.
      <br>
      hr creates a horizontal line between sections.
    </p>
  </body>
</html>

Output

Grouping/layout tags

<div>

Block container for grouping elements.

<div>
  <h2>Box</h2>
  <p>Text</p>
</div>

<span>

Inline container for a small text part.

<p>Hello <span>World</span></p>

<a>

Link to other page/website.

<a href="https://google.com">Go to Google</a>

<img>

Shows image.

<img src="photo.jpg" alt="my photo">

<video>

Shows video.

<video controls>
  <source src="movie.mp4">
</video>

<audio>

Plays audio.

<audio controls>
  <source src="song.mp3">
</audio>

List tags

<ul>

Bullet list.

<ul>
  <li>Apple</li>
  <li>Mango</li>
</ul>

<ol>

Number list.

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

<li>

List item (inside ul/ol).

<li>Item</li>

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>List Tags Demo</title>
  </head>

  <body>
    <h1>List Tags Demo</h1>
    <p>
      In this page we will learn unordered list (ul), ordered list (ol) and list item (li).
    </p>

    <hr>

    <h2>1) Unordered List (ul) - Bullet List</h2>
    <p>Shopping list:</p>

    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
      <li>Fruits</li>
    </ul>

    <hr>

    <h2>2) Ordered List (ol) - Number List</h2>
    <p>Steps to create a project:</p>

    <ol>
      <li>Create a folder</li>
      <li>Create an index.html file</li>
      <li>Write HTML code</li>
      <li>Open it in browser</li>
    </ol>

    <hr>

    <h2>3) li tag (List Item)</h2>
    <p>
      li tag is used inside ul or ol. Example:
    </p>

    <ul>
      <li>This is an li item inside ul</li>
      <li>This is another li item inside ul</li>
    </ul>

    <ol>
      <li>This is an li item inside ol</li>
      <li>This is another li item inside ol</li>
    </ol>

  </body>
</html>

Output

Table tags

<table>

Creates a table.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Pallab</td>
    <td>22</td>
  </tr>
</table>

<tr>

Table row.

<tr>
  <td>A</td>
  <td>B</td>
</tr>

<th>

Table heading cell.

<th>Name</th>

<td>

Table data cell.

<td>Pallab</td>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Table Tags Demo</title>
  </head>

  <body>
    <h1>Table Tags Demo</h1>
    <p>
      In this page we will learn table tags: table, tr, th, td.
    </p>

    <hr>

    <h2>Student List Table</h2>

    <table border="1" cellpadding="10">
      <!-- table row for table headings -->
      <tr>
        <th>Student Name</th>
        <th>Age</th>
        <th>Course</th>
        <th>City</th>
      </tr>

      <!-- table row for student data -->
      <tr>
        <td>Pallab</td>
        <td>22</td>
        <td>Web Development</td>
        <td>Kolkata</td>
      </tr>

      <tr>
        <td>Rahul</td>
        <td>21</td>
        <td>JavaScript</td>
        <td>Delhi</td>
      </tr>

      <tr>
        <td>Ananya</td>
        <td>20</td>
        <td>HTML & CSS</td>
        <td>Mumbai</td>
      </tr>
    </table>

    <hr>

    <h2>Explanation inside same page</h2>

    <p>
      table: creates the table structure.
      <br>
      tr: creates a row.
      <br>
      th: creates heading cells.
      <br>
      td: creates data cells.
    </p>

  </body>
</html>

Output

Form tags

<form>

Used to collect user input and submit.

<form>
  <input type="text">
  <button>Submit</button>
</form>

<label>

Label for input field.

<label>Email:</label>
<input type="email">

<input>

Input field.

<input type="password" placeholder="Enter password">

<textarea>

Multi-line input.

<textarea rows="4"></textarea>

<select>

Dropdown.

<select>
  <option>India</option>
  <option>USA</option>
</select>

<button>

Clickable button.

<button type="submit">Submit</button>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Form Tags Demo</title>
  </head>

  <body>
    <h1>Form Tags Demo</h1>
    <p>
      In this page we will learn form tags: form, label, input, textarea, select, option, button.
    </p>

    <hr>

    <h2>Contact Form</h2>

    <form>
      <!-- Name -->
      <label>Full Name:</label>
      <input type="text" placeholder="Enter your full name">
      <br><br>

      <!-- Email -->
      <label>Email:</label>
      <input type="email" placeholder="Enter your email">
      <br><br>

      <!-- Password -->
      <label>Password:</label>
      <input type="password" placeholder="Enter password">
      <br><br>

      <!-- Country -->
      <label>Select Country:</label>
      <select>
        <option>India</option>
        <option>USA</option>
        <option>UK</option>
        <option>Canada</option>
      </select>
      <br><br>

      <!-- Message -->
      <label>Your Message:</label>
      <br>
      <textarea rows="5" placeholder="Write your message here..."></textarea>
      <br><br>

      <!-- Button -->
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>

    <hr>

    <p>
      form tag collects data,
      label shows field name,
      input takes user value,
      textarea takes multi line input,
      select creates dropdown,
      option is dropdown item,
      button is for submit/reset.
    </p>

  </body>
</html>

Output

Semantic tags for Accessibility

This tag is useful in the case that a user has visual disability, then the screen reader reads this tag peoperly. Also, it is a good practice to use these Semantic tags.

<header>

Top section of a page/section.

<header>
  <h1>My Blog</h1>
</header>

<nav>

Navigation links.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main>

Main content.

<main>
  <h2>Post</h2>
</main>

<section>

Groups related content.

<section>
  <h2>Services</h2>
</section>

<footer>

Bottom section.

<footer>
  <p>Copyright 2026</p>
</footer>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic Tags Demo</title>
  </head>

  <body>

    <!-- header: top part of the website -->
    <header>
      <h1>StudyHex Blog</h1>
      <p>Learn Web Development step by step</p>
    </header>

    <hr>

    <!-- nav: navigation links -->
    <nav>
      <a href="#">Home</a> |
      <a href="#">Blogs</a> |
      <a href="#">Courses</a> |
      <a href="#">Contact</a>
    </nav>

    <hr>

    <!-- main: main page content -->
    <main>

      <h2>Welcome to my blog</h2>
      <p>
        This website is built using semantic HTML tags.
        These tags help screen readers understand page structure properly.
      </p>

      <!-- section: related content group -->
      <section>
        <h2>Services</h2>
        <p>We provide learning content for:</p>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>Backend Development</li>
        </ul>
      </section>

      <hr>

      <section>
        <h2>Latest Blog Post</h2>
        <p>
          Topic: How DNS works step by step.
        </p>
        <p>
          In this blog you will learn Root server, TLD server, Authoritative server and Recursive Resolver.
        </p>
      </section>

    </main>

    <hr>

    <!-- footer: bottom part of the website -->
    <footer>
      <p>Copyright 2026 - StudyHex</p>
    </footer>

  </body>
</html>

Output

Conclusion:

HTML is the backbone of any website, and it is the basic building block of the modern internet. HTML has many tags, but remember one thing: only 20 to 30 percent of tags are used 80 percent of the time. If you want to learn more tags, you can follow the MDN HTML Elements documentation. Also, during your HTML learning time, always use the browser Inspect tool, because it helps you understand which element is responsible for what you are seeing on the page.

After building 10 to 20 projects successfully, you don’t need to remember all the tags. With practice, they automatically fit into your subconscious mind.

#chaicode#html5#html

More from this blog

PallabDev

25 posts