Headings and Text

Working with headings, paragraphs, and inline text elements

Headings and Text

HTML provides a rich set of elements for structuring text content.

Headings

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

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>
HTML

Paragraphs

The <p> element defines a paragraph:

<p>This is a paragraph of text. It can contain multiple sentences
and the browser will handle line wrapping automatically.</p>

<p>This is a second paragraph. Browsers add vertical spacing
between paragraphs by default.</p>
HTML

Inline Text Elements

These elements style text within a paragraph:

<p>
    You can make text <strong>bold</strong> for importance,
    or <em>italic</em> for emphasis. Use <code>code</code>
    for inline code, and <mark>highlight</mark> for attention.
</p>
HTML
Element Purpose Example
<strong> Important text (bold) important
<em> Emphasized text (italic) emphasized
<code> Inline code variable
<mark> Highlighted text highlighted
<small> Smaller text Fine print
<del> Deleted text deleted
<sub> Subscript H₂O
<sup> Superscript x²

Line Breaks and Horizontal Rules

<p>First line<br>Second line (same paragraph)</p>

<hr> <!-- Horizontal divider between sections -->
HTML

Preformatted Text

Use <pre> to preserve whitespace and line breaks exactly as written:

<pre>
  This text preserves
    all spacing and
      line breaks exactly.
</pre>
HTML

Blockquotes

<blockquote>
    <p>The only way to do great work is to love what you do.</p>
    <cite>- Steve Jobs</cite>
</blockquote>
HTML