Essential HTML Tags Every Developer Should Know

HTML5 defines over a hundred tags, but you only need a handful to build real pages. This post is a guided tour of the elements you will reach for every day. For each group, we cover what the tag means, how to write it, and when to pick it over an alternative.

Headings

HTML has six heading levels, <h1> through <h6>:

<h1>Page title</h1>
<h2>Section title</h2>
<h3>Subsection title</h3>

Two rules cover almost every use case:

1. Use one <h1> per page. It describes the page as a whole.
2. Do not skip levels. An <h3> should sit inside an <h2>, not directly under an <h1>.

Headings are not just visual — screen readers use them to build a navigable outline of the page. Choosing the right level is an accessibility decision, not a styling one. If you only want bigger text, use CSS.

Paragraphs and inline text

A paragraph is a block of running text:

<p>HTML stands for HyperText Markup Language.</p>

Inside a paragraph you often need to mark up individual words:

<p>
  HTML is a <strong>markup language</strong>, not a
  <em>programming language</em>. The file extension is
  <code>.html</code>.
</p>

The common inline tags:

• <strong> — text with strong importance. Usually rendered bold.
• <em> — emphasized text. Usually rendered italic.
• <code> — a fragment of code or a filename.
• <a> — a hyperlink (covered below).
• <br> — a manual line break. Use sparingly.
• <span> — a generic inline container with no meaning.

<strong> and <em> carry meaning that screen readers announce. <b> and <i> look the same but are styling-only. Prefer the semantic versions.

Links

A link, also called an anchor, uses the <a> tag with an href attribute:

<a href="https://example.com">Visit Example</a>
<a href="/about">About this site</a>
<a href="#section-2">Jump to section 2</a>
<a href="mailto:hello@example.com">Email us</a>

Three flavors are worth knowing:

• Absolute URL (https://example.com) — points to another site.
• Relative URL (/about or contact.html) — points to another page on the same site.
• Fragment (#section-2) — points to an element on the current page with id="section-2".

To open a link in a new tab, add target="_blank" and rel="noopener" for security:

<a href="https://example.com" target="_blank" rel="noopener">Example</a>

Images

The <img> tag is a void element with two essential attributes:

<img src="profile.jpg" alt="A portrait of Ada Lovelace" />

• src — the path or URL of the image.
• alt — a short text description for screen readers and for cases where the image fails to load.

The alt attribute is required. If the image is purely decorative, use an empty string (alt="") so screen readers skip it. Never omit it.

For responsive images, add width and height attributes so the browser reserves space before the file loads:

<img src="hero.jpg" alt="Sunset over mountains" width="1200" height="600" />

This prevents the layout from jumping when the image arrives.

Lists

Three kinds of lists cover almost everything you need.

Unordered list — bullet points:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered list — numbered steps:

<ol>
  <li>Open your editor</li>
  <li>Create a new file</li>
  <li>Save it as index.html</li>
</ol>

Description list — terms and definitions:

<dl>
  <dt>HTML</dt>
  <dd>The structure of a page.</dd>

  <dt>CSS</dt>
  <dd>The visual presentation.</dd>
</dl>

The choice between <ul> and <ol> is about meaning: if reordering the items would change the message, use <ol>.

Forms and inputs

Forms collect input from users. A simple sign-up form:

<form action="/signup" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="password">Password</label>
  <input type="password" id="password" name="password" required />

  <button type="submit">Create account</button>
</form>

A few things are happening here:

• <form> wraps the inputs and tells the browser where to send the data (action) and how (method).
• <label> describes each input. The for attribute matches the input’s id, which makes the label clickable and improves accessibility.
• <input> is a void element. Its type attribute changes its behavior — email, password, number, date, checkbox, radio, file, and many more.
• <button type="submit"> sends the form. The default type is submit, but writing it out is clearer.

Modern HTML provides built-in validation through attributes like required, minlength, pattern, and type="email". Use them — they catch obvious mistakes before any JavaScript runs.

Other useful form controls:

<textarea id="bio" name="bio" rows="4"></textarea>

<select id="country" name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="in">India</option>
</select>

<input type="checkbox" id="terms" name="terms" />
<label for="terms">I accept the terms</label>

Semantic containers

Before HTML5, every layout was built from <div> tags. HTML5 added a set of containers that describe a page’s regions:

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Why semantic HTML matters</h2>
      <p>...</p>
    </article>

    <aside>
      <h3>Related posts</h3>
      <ul>
        <li><a href="/post-1">Post 1</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Blog</p>
  </footer>
</body>

The roles:

• <header> — introductory content for the page or a section.
• <nav> — a navigation menu.
• <main> — the primary content. One per page.
• <article> — a standalone piece of content that would make sense on its own.
• <section> — a thematic grouping with its own heading.
• <aside> — content tangentially related to the main flow.
• <footer> — closing content for the page or a section.

These tags do not look any different from a <div> by default. Their value is that they tell screen readers, search engines, and other developers what each region is for.

When to use <div> and <span>

Sometimes you need a container with no semantic meaning at all — purely a hook for styling or scripting. That is what <div> and <span> are for.

• <div> — a generic block-level container.
• <span> — a generic inline container.

<div class="card">
  <p>This card uses a <span class="highlight">highlight</span> on one word.</p>
</div>

The rule: reach for a semantic tag first. If none fits, then use <div> or <span>. A page made entirely of divs works, but it tells the browser nothing about your intent.

Tables

Tables are for tabular data — rows and columns that relate to each other. Not for layout.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ada</td>
      <td>Mathematician</td>
    </tr>
    <tr>
      <td>Grace</td>
      <td>Computer scientist</td>
    </tr>
  </tbody>
</table>

• <table> wraps everything.
• <thead> and <tbody> group header and body rows.
• <tr> is a row.
• <th> is a header cell, <td> is a data cell.

Tables look heavy but they are the right tool when your data has rows and columns that mean something together.

Recap

You now have a working vocabulary for real pages:

• Headings (<h1>–<h6>) describe the document outline
• <p>, <strong>, <em>, <code> handle running text
• <a> creates links; <img> embeds images with required alt text
• <ul>, <ol>, <dl> create lists with different meanings
• <form>, <label>, <input>, <button> collect user input
• <header>, <nav>, <main>, <article>, <aside>, <footer> structure the page
• <div> and <span> are generic containers — use them last, not first

Next steps

The next post moves from structure to style. We will look at what CSS is, how it connects to HTML, and how three simple rules change the look of a whole page.

→ Next: What is CSS? A Beginner’s Introduction to Styling the Web

Questions or feedback? Email codeloomdevv@gmail.com.