What are HTML tags?

MediumEasyHtml

By FrontendAtlas Team · Updated Apr 4, 2026

Quick Answer

HTML tags are the markup primitives browsers parse into a DOM tree. In production, choosing the right tag affects semantics, accessibility, SEO, and how reliably CSS and JavaScript can target the page.

Answer

Core idea

HTML tags are not just angle-bracket syntax. They are the browser's structural hints for building the DOM tree, exposing semantics to assistive tech, and giving CSS and JavaScript reliable hooks. In production, the common mistake is treating every tag like a generic container when headings, landmarks, forms, and links carry meaning that changes accessibility and debugging.

HTML

<!doctype html>
<html>
  <head>
    <title>Profile</title>
  </head>
  <body>
    <h1>Muslum</h1>
    <p>Frontend developer</p>
    <a href="/projects">View projects</a>
  </body>
</html>

Tag	Meaning	When you use it
`<h1>...`	Main heading	Page or section title.
`<p>...</p>`	Paragraph text	Normal reading content.
`<a>...</a>`	Navigation link	Move to another page/section/resource.
`<button>...</button>`	Action trigger	Submit, open modal, start action.
`<section>`, `<article>`, `<nav>`	Semantic structure	Readable, accessible page layout.

Tags communicate intent, not just markup syntax.

Paired vs void tags

Most tags have opening + closing forms (<p>...</p>). Some are void/self-contained like <img> and .

HTML

<p>Hello world</p>
<img src="avatar.jpg" alt="Profile photo">
<br>

Common mistakes

Using <div> for everything instead of semantic tags.
Breaking heading hierarchy (jumping from <h1> to <h4> randomly).
Missing important attributes like image alt or link href.

Practical scenario
You build a blog card with <article>, <h2>, <p>, and <a> so users, crawlers, and screen readers all understand content roles immediately.

Trade-off or test tip
Semantic HTML may feel slower at first than dropping <div> everywhere, but it reduces accessibility and maintenance debt long-term.

Still so complicated?

Think of tags as labels on folders. If every folder is named div, your team and assistive tech cannot quickly understand what is inside.

Summary

<li>

Browsers convert tags into the DOM tree.
Semantic tags improve accessibility, SEO, and maintainability.
Good HTML makes CSS/JS simpler and more reliable.