HTML Text Elements: Headings, Paragraphs, Bold, Italic & More

The web is built on text. Headings guide readers through a page, paragraphs deliver content, and inline elements like bold and italic add emphasis and meaning. Using the right HTML text element for each job isn't just good practice — it directly affects how accessible your page is and how well it ranks in search engines.

This lesson covers every major HTML text element: what it does, when to use it, and common mistakes to avoid.

Headings: <h1> Through <h6>

HTML provides 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>Minor Heading</h4>
<h5>Rarely Used Heading</h5>
<h6>Smallest Heading</h6>

Browsers render headings in decreasing size by default, but that's a visual side effect — not the point. Headings exist to define hierarchy and structure.

Heading Best Practices

Use only one <h1> per page — it represents the main topic of the page. Multiple <h1> tags confuse search engines and screen readers. Don't skip levels: going from <h2> to <h4> breaks the logical outline. If you want smaller text, use CSS — not a lower heading level. Don't use headings for styling — a heading signals importance to browsers, assistive technologies, and search engines. Include target keywords in headings, especially <h1> and <h2>.

Paragraphs: <p>

The <p> element marks a block of text as a paragraph:

<p>HTML is the foundation of every webpage. It defines structure and meaning, leaving the visual presentation to CSS.</p>

<p>This is a second paragraph. Browsers automatically add space between paragraphs.</p>

Each <p> element creates a new block. Browsers add default top and bottom margin between paragraphs — you can override this with CSS. Don't use <p> as a generic container; for layout and grouping purposes, use <div> (block) or <span> (inline) instead.

Inline Text Formatting

These elements apply to text within a sentence rather than creating new blocks.

<strong> — Bold / Important

<p>Always save your work. <strong>Unsaved changes are lost permanently.</strong></p>

<strong> marks text as important. Browsers render it bold by default, but the semantic meaning — importance — is what matters. Screen readers may stress <strong> text.

<em> — Italic / Emphasis

<p>The function returns <em>a new array</em>, not the original.</p>

<em> marks text as emphasised. Browsers render it italic. It signals that the stress changes the meaning of the sentence, similar to vocal emphasis in speech.

<b> and <i> — Stylistic Bold and Italic

<p>The variable is named <b>count</b> throughout this file.</p>
<p>The film <i>Inception</i> was released in 2010.</p>

<b> and <i> apply bold and italic visually without semantic importance. Use <b> for keywords, product names, or technical terms being introduced. Use <i> for titles of works, foreign phrases, or technical terms in context.

<mark> — Highlighted Text

<p>The search returned 12 results for <mark>CSS grid</mark>.</p>

<mark> highlights text with a yellow background by default. Use it to show search terms, relevant passages, or annotations.

<small> — Fine Print

<p>Free plan available. <small>Terms and conditions apply.</small></p>

<small> renders text at a smaller font size and is semantically appropriate for fine print, disclaimers, and copyright notices.

Quotations

<blockquote> — Block-Level Quotes

<blockquote cite="https://developer.mozilla.org">
  <p>HTML describes the structure of a Web page semantically.</p>
</blockquote>

Use <blockquote> for longer quotations that stand on their own. The cite attribute references the source URL. Browsers typically indent blockquotes by default.

<q> — Inline Quotes

<p>The documentation says <q>all values must be non-negative integers</q>.</p>

<q> wraps short inline quotations. Browsers automatically add quotation marks around the content.

Code and Preformatted Text

<code> — Inline Code

<p>Use the <code>margin: 0 auto;</code> declaration to centre a block element.</p>

<code> marks inline code, file names, or technical strings. Browsers render it in a monospace font by default.

<pre> — Preformatted Text Block

<pre> preserves whitespace and line breaks exactly as written. It's almost always combined with <code> for multi-line code samples:

<pre><code>body {
  margin: 0;
  font-family: sans-serif;
}</code></pre>

<kbd> — Keyboard Input

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<kbd> marks keyboard input or keyboard shortcuts — a small semantic detail that improves accessibility.

Line Breaks and Horizontal Rules

<br> — Line Break

<address>
  123 Main Street<br>
  London<br>
  EC1A 1BB
</address>

<br> inserts a single line break without starting a new paragraph. Use it only where line breaks are part of the content — addresses, poems, lyrics. Don't use it for visual spacing; that's a CSS job.

<hr> — Thematic Break

<hr> renders a horizontal line and semantically represents a thematic break between sections. It's a block element.

Putting It All Together

Here's a realistic article structure using the elements from this lesson:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Why CSS Grid Changed Everything</title>
  </head>
  <body>
    <h1>Why CSS Grid Changed Everything</h1>
    <p>Before CSS Grid, building complex layouts required <em>hacks</em>. <strong>Grid ended all of that.</strong></p>

    <h2>A Brief History</h2>
    <p>The specification was developed over several years before landing in browsers in 2017.</p>

    <blockquote>
      <p>CSS Grid is the most powerful layout system available in CSS.</p>
    </blockquote>

    <h2>How Grid Works</h2>
    <pre><code>.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}</code></pre>
  </body>
</html>

Previous: Lesson 1 — HTML Basics | Next: Lesson 3 — HTML Links & Images

Part of the HTML & CSS Fundamentals course.