Elements and Structure

Every piece of HTML is an element — a start tag, optional content, and an end tag — and elements nest to form a tree.

HTML documents are built entirely from elements. An HTML element has three parts: an opening tag, content, and a closing tag.

<p>Every paragraph is an element like this.</p>

<p> is the opening tag. The angle brackets mark it as a tag; p is the element name.
Every paragraph is an element like this. is the content — text, other elements, or both.
</p> is the closing tag. The / before the name signals "this element ends here."

The element name tells the browser what kind of thing this is. p means paragraph. h1 means level-one heading. ul means unordered list. The browser uses that information to build the DOM tree and decide how to display the content.

Void elements — no closing tag

Some elements can never have content, so they have no closing tag. These are called void elements:

<br>        <!-- line break -->
<hr>        <!-- horizontal rule (a thematic divider) -->
<img src="photo.jpg" alt="A mountain lake">
<input type="text" name="email">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

You may also see them written with a trailing slash (<br />, <img />). That syntax comes from XHTML and is valid in HTML5, but the slash is optional and has no effect.

Nesting

Elements can contain other elements. This is called nesting, and it is how HTML builds structure:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

The <ul> (unordered list) contains three <li> (list item) elements. Each <li> is a child of the <ul>; the <ul> is their parent.

Nesting must be balanced: every opening tag must have a matching closing tag in the right order. Overlapping elements like this are invalid:

<!-- WRONG — tags overlap -->
<p><strong>Important text</p></strong>

<!-- RIGHT — inner element closes before the outer one -->
<p><strong>Important text</strong></p>

The parser will try to recover from invalid nesting, but the result is unpredictable. Always close elements in reverse order from how you opened them (last opened, first closed).

A helpful mental model: think of nesting like parentheses in math. ((a + b) * c) is valid; ((a + b) * c)) is not. Every open must be closed in the right order.

Block vs inline

HTML elements fall into two broad display categories:

Block-level elements start on a new line and stretch to fill the full width of their container. They create visible chunks of structure:

<p> — paragraph
<h1> through <h6> — headings
<ul>, <ol>, <li> — lists and list items
<div> — generic block container
<section>, <article>, <header>, <footer> — semantic regions

Inline elements flow within the surrounding text — they do not break onto a new line:

<a> — hyperlink
<strong> — strong importance (renders bold by default)
<em> — stress emphasis (renders italic by default)
<span> — generic inline container
<img> — image (inline by default, though often treated as a block)

The practical rule: do not nest block elements inside inline elements. Putting a <div> inside a <span> is invalid HTML.

<!-- WRONG -->
<span><div>This is wrong</div></span>

<!-- FINE — inline inside block is always valid -->
<p>Read the <a href="/docs">documentation</a> for details.</p>

Whitespace collapses

In the browser, multiple spaces or line breaks in HTML source collapse to a single space in the rendered output. This means you can indent your HTML as much as you like for readability without affecting the page:

<!-- These render identically -->
<p>Hello world</p>

<p>
  Hello
  world
</p>

Both produce "Hello world" on screen. If you need a genuine line break inside a paragraph, use <br>. For larger visual gaps, use CSS margin and padding — never chains of <br> elements.

A readable document structure

Bringing it together — a well-structured short page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Recipe: Overnight Oats</title>
  </head>
  <body>
    <h1>Overnight Oats</h1>
    <p>A no-cook breakfast you prepare the night before.</p>

    <h2>Ingredients</h2>
    <ul>
      <li>½ cup rolled oats</li>
      <li>½ cup milk of choice</li>
      <li>1 tablespoon chia seeds</li>
    </ul>

    <h2>Instructions</h2>
    <ol>
      <li>Combine all ingredients in a jar.</li>
      <li>Stir well, seal, and refrigerate overnight.</li>
      <li>Top with fruit and serve cold.</li>
    </ol>
  </body>
</html>

Notice how indentation makes the tree visible: <ul> contains <li>s, headings are siblings of paragraphs, everything sits inside <body>.

Where to go next

You can build a document from raw elements. Next: Semantic HTML — choosing elements that carry meaning beyond "block" and "inline," and why that matters for accessibility and search engines.

Finished reading? Mark it complete to track your progress.