What are HTML tags?

LowEasyHtml

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Browse HTML interview questions Explore interview tracks Browse company questions

Quick Answer

HTML tags are the basic building blocks of an HTML document. They define the structure, content, and meaning of a web page by marking elements like headings, paragraphs, images, and links.

Answer

The Core Idea

HTML (HyperText Markup Language) is built using tags that tell the browser how to structure and display content. Each tag has a specific role, such as defining a paragraph, a heading, or an image.

When a browser reads an HTML document, it processes tags from top to bottom and builds the page layout through the Document Object Model (DOM) — a structured tree of elements.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is a simple example.</p>
  </body>
</html>

In this example:

The <html> tag defines the root of the document.
The <head> tag contains metadata, scripts, and styles.
The <body> tag holds the visible page content.
The <h1> tag defines a heading.
The <p> tag defines a paragraph of text.

Tag

Purpose

Example

…

Defines a heading (from h1 to h6).

Main Title

<p>…</p>

Defines a paragraph of text.

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

Creates a hyperlink to another page or resource.

<a href='https://example.com'>Visit Site</a>

<img>

Embeds an image.

<ul>, <ol>, <li>

Defines unordered and ordered lists.

Item

<table>

Creates tabular data.

Cell

<form>

Captures user input via fields and buttons.

<div> and <span>

Generic containers for grouping and styling.

<div class='box'>Content</div>

Commonly used HTML tags and their purposes.

Attributes

Tags can include attributes that modify their behavior or provide additional information.

Example:

`html <a href="https://example.com" target="_blank">Open Example</a>

Here:

href defines the link destination.
target='_blank'` opens it in a new browser tab.

Tag Types

Paired Tags — Have both an opening and closing tag (e.g., <p></p>, <div></div>).
Self-closing Tags — Do not require a closing tag (e.g., <img>, , <hr>).

Example:
`html <p>This is a paragraph.</p> <img src='photo.jpg' alt='Example Image'>`

Common Mistakes with Tags

Forgetting to close tags properly, e.g., <p> without </p>.
Nesting tags incorrectly, like placing a <p> tag inside another <p>.
Using generic tags (like <div>) instead of semantic ones (like <header> or <footer>).
Missing inline vs. block element distinctions, which can affect layout and styling.

How Tags Relate to the DOM

When a browser parses HTML, it turns tags into DOM nodes. For example:
`html <body>

`Hello`


  <p>World</p>
</body>

`
…becomes a tree:

Document
 └── body
      ├── h1 → 'Hello'
      └── p → 'World'

Each HTML tag corresponds to a node that can be accessed and modified via JavaScript.

Still so complicated?

Think of HTML tags as labels on boxes — each box tells the browser what’s inside and how to display it. For example, <h1> is a big label (a title box), <p> is a small text box, and <img> is a picture frame. Together, these labeled boxes form your web page layout.

Summary

HTML tags define the structure and meaning of webpage content.
Each tag can have attributes that modify its behavior.
Tags work together to form the DOM, which browsers use to render pages.
Proper use of semantic tags improves accessibility and SEO.
Common tags include <h1>, <p>, <a>, <div>, and <img>.