HTML Elements Deep Dive

HTML is built from elements. The two most important ideas are block vs inline behavior and how elements nest inside each other to form the document tree.

Block and inline

A block element spans the full width of its container and starts on a new line. An inline element flows inside surrounding text.

<p>This is a block element — it takes the full width.</p>
<strong>inline</strong> and <em>inline</em> flow within text.

• Block: <div>, <p>, <h1>–<h6>, <ul>, <section>
• Inline: <a>, <span>, <strong>, <em>, <img>

Nesting elements

Elements can contain other elements. Always close inner elements before outer ones, and never put block elements inside inline ones.

<section>
  <h2>Chapter title</h2>
  <p>A paragraph with an <a href="/">inline link</a>.</p>
</section>

Text and emphasis

Use semantic text elements instead of plain styling. They carry meaning for assistive tech and search engines.

<p>This is <strong>important</strong> and this is <em>emphasized</em>.</p>

• <strong> — important (bold by default)
• <em> — emphasis (italic by default)
• <code> — inline code