Common HTML Elements

HTML provides dozens of elements to describe different types of content. Choosing the correct element — not just one that looks right — is called semantic HTML and is important for accessibility and SEO.

Headings

HTML has six levels of heading, from h1 (most important) to h6 (least important):

<h1>Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Minor Heading</h4>
<h5>Even Minor Heading</h5>
<h6>Smallest Heading</h6>

A page should have exactly one h1 — the main topic of the page. Use h2 for major sections and h3–h6 for deeper nesting. Never skip levels for stylistic purposes; use CSS for sizing instead.

Paragraphs and Text

<p>A paragraph of text. This is the most common block-level element.</p>

<strong>Bold important text</strong>
<em>Italicised emphasis</em>
<br /> <!-- line break — use sparingly -->
<hr /> <!-- horizontal rule / thematic break -->

Lists

HTML supports three types of list:

<!-- Unordered (bulleted) list -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

<!-- Ordered (numbered) list -->
<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

<!-- Description list -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Semantic Structural Elements

HTML5 introduced semantic elements that give meaning to page structure:

<header>   <!-- site or section header -->
<nav>      <!-- navigation links -->
<main>     <!-- primary page content (one per page) -->
<article>  <!-- self-contained content like a blog post -->
<section>  <!-- thematic grouping of content -->
<aside>    <!-- sidebar or supplementary content -->
<footer>   <!-- site or section footer -->

Using semantic elements instead of generic div elements makes your HTML readable to both humans and machines (screen readers, search engines, and browser accessibility tools).

Generic Containers

When no semantic element fits, use the generic containers:

<!-- Block-level container -->
<div class="card">
  <p>Content here</p>
</div>

<!-- Inline container -->
<p>Visit our <span class="highlight">sale</span> page.</p>

div creates a block-level box (takes up the full width). span creates an inline box (only as wide as its content).

Quoting and Code

<blockquote cite="https://source.com">
  <p>The best way to learn is by doing.</p>
</blockquote>

<pre><code>function hello() {
  console.log("Hello!");
}</code></pre>

Choosing the right element every time is a habit that separates good HTML developers from great ones. Semantic markup improves accessibility, helps search engines understand your content, and makes your codebase easier to maintain.