HTML Elements & Tags

What is an HTML element?

An HTML element is a piece of content wrapped in tags. Most elements have an opening tag and a closing tag:

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

• <p> is the opening tag.
• </p> is the closing tag (note the /).
• Everything between them is the content.

Some elements are self-closing — they don't have content or a closing tag:

<img src="photo.jpg" alt="A photo" />
<br />
<hr />

Common HTML elements

Here are the elements you'll use most often:

Headings — six levels from <h1> (biggest) to <h6> (smallest):

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>

<p>This is a paragraph of text.</p>
<strong>Bold text</strong>
<em>Italic text</em>

Links — the <a> tag makes clickable links:

<a href="https://example.com">Visit Example</a>

<img src="cat.jpg" alt="A cute cat" width="300" />

Always include the alt attribute — it describes the image for screen readers and shows up if the image fails to load.

Lists:

<ul>
  <li>Unordered item</li>
  <li>Another item</li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

Nesting elements

Elements can go inside other elements. This is called nesting:

<div>
  <h2>About Me</h2>
  <p>I am learning <strong>HTML</strong>.</p>
</div>

The key rule: always close inner elements before outer ones. Think of it like stacking boxes — the last one opened must be the first one closed.

Block vs inline elements

HTML elements behave in two broad categories:

Block-level elements start on a new line and stretch to the full width available (unless CSS changes that). Examples: <p>, <h1>–<h6>, <div>, <ul>, <section>.

Inline elements flow within a line of text and only take up as much width as their content needs. Examples: <a>, <strong>, <em>, <span>, <code>.

You can wrap inline elements inside block elements freely, but you should not put block elements inside inline ones (for example, don't put a <div> inside a <span>).

The generic <div> (block) and <span> (inline) containers have no semantic meaning on their own — use them when no other element fits, but prefer semantic tags like <article> or <nav> when they apply.

Attributes every beginner should know

Attributes modify an element's behavior or provide metadata:

<p id="intro" class="lead">Welcome.</p>
<a href="/about" target="_blank" rel="noopener noreferrer">About</a>
<img src="hero.webp" alt="Team photo" loading="lazy" />

• id — unique on the page; use for in-page links (href="#intro") or JavaScript hooks.
• class — reusable; one element can have several classes (class="card featured").
• href — required on links; can be absolute, relative, or a fragment (#section-id).
• alt — required for meaningful images; use alt="" only for decorative images.
• loading="lazy" — defers off-screen images until the user scrolls near them.

Comments and special characters

HTML comments are ignored by the browser and useful for notes to other developers:

<!-- TODO: add navigation here -->

To display characters that would otherwise be parsed as HTML, use character references:

<p>5 &lt; 10 and Tom &amp; Jerry</p>

< renders as <, and & renders as &.

Common mistakes to avoid

• Forgetting closing tags on non-void elements (<p> without </p>).
• Skipping alt on informative images.
• Using headings only for size — pick the heading level by structure, then style with CSS.
• Nesting interactive elements incorrectly (for example, a <button> inside an <a>).