HTML Text & Headings: Formatting Your Content

Text is the backbone of most websites. In this tutorial, you’ll learn how to structure your content with headings, format paragraphs, emphasize important text, and control line breaks. These are the fundamental skills you’ll use on every web page you create!

Headings: Organizing Your Content

Think of headings like the chapter titles and section headers in a book. HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Heading Best Practices

Use only one <h1> per page. This should be your main title—the most important heading on the page. Search engines pay special attention to it!

Don’t skip heading levels. Go from <h1> to <h2>, not from <h1> to <h4>. This maintains a logical structure.

Choose headings for structure, not size. If you want smaller text, use CSS—don’t pick <h5> just because it looks smaller.

<!-- Good heading structure -->
<h1>My Recipe Website</h1>

<h2>Today's Featured Recipe</h2>
<h3>Ingredients</h3>
<h3>Instructions</h3>
<h3>Tips & Variations</h3>

<h2>Popular Recipes</h2>
<h3>Chocolate Cake</h3>
<h3>Banana Bread</h3>

Paragraphs

The <p> tag creates a paragraph. Browsers automatically add space above and below paragraphs:

<p>This is my first paragraph. It contains some text that explains
something important. Paragraphs can be as long as you need.</p>

<p>This is my second paragraph. Notice how the browser adds
space between paragraphs automatically.</p>

<p>Short paragraphs are easier to read on screens.</p>

Tip: Keep paragraphs short on the web—3-4 sentences is ideal. Long blocks of text are harder to read on screens.

Text Emphasis: Bold and Italic

Use <strong> for important text and <em> for emphasis:

<p>This word is <strong>important</strong> and should stand out.</p>

<p>This word has <em>emphasis</em> to show it should be stressed.</p>

<p>You can <strong><em>combine them</em></strong> for extra effect!</p>

Strong vs Bold, Em vs Italic

You might also see <b> (bold) and <i> (italic). What’s the difference?

<!-- Semantic emphasis (preferred for important content) -->
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p>You <em>must</em> complete this step before proceeding.</p>

<!-- Visual styling (for names, titles, etc.) -->
<p>I'm reading <i>The Great Gatsby</i> by F. Scott Fitzgerald.</p>
<p>The word <i>schadenfreude</i> comes from German.</p>

Line Breaks and Horizontal Rules

Line Breaks

The <br /> tag creates a line break within text. Use it for poetry, addresses, or anywhere you need a new line without starting a new paragraph:

<p>
Roses are red,<br />
Violets are blue,<br />
HTML is awesome,<br />
And so are you!
</p>

<address>
123 Main Street<br />
Anytown, USA 12345<br />
Phone: (555) 123-4567
</address>

Don’t overuse <br />! If you need space between content, use CSS margins or separate paragraphs instead.

Horizontal Rules

The <hr> tag creates a horizontal line, useful for separating sections:

<h2>Chapter 1</h2>
<p>The story begins on a dark and stormy night...</p>

<hr>

<h2>Chapter 2</h2>
<p>The next morning, everything had changed...</p>

Preformatted Text

The <pre> tag preserves whitespace and line breaks exactly as you type them. Great for code or ASCII art:

<pre>
function greet() {
  console.log("Hello!");
}
</pre>

<pre>
*
***
*****
|
</pre>

Subscript and Superscript

Use <sub> for subscript and <sup> for superscript:

<!-- Chemical formulas -->
<p>Water is H<sub>2</sub>O</p>
<p>Carbon dioxide is CO<sub>2</sub></p>

<!-- Mathematical expressions -->
<p>E = mc<sup>2</sup></p>
<p>2<sup>3</sup> = 8</p>

<!-- Footnotes and references -->
<p>According to recent studies<sup>[1]</sup>, coffee is good for you.</p>

<!-- Ordinal numbers -->
<p>The 1<sup>st</sup> of January</p>

Quotations

Block Quotes

Use <blockquote> for longer quotes that stand alone:

<blockquote>
<p>The only way to do great work is to love what you do.
If you haven't found it yet, keep looking. Don't settle.</p>
<footer>— Steve Jobs</footer>
</blockquote>

Inline Quotes

Use <q> for short quotes within a sentence:

<p>Einstein famously said, <q>Imagination is more important than knowledge.</q></p>

Browsers automatically add quotation marks around <q> content!

Citing Sources

Use <cite> for titles of works (books, movies, songs):

<p>My favorite book is <cite>To Kill a Mockingbird</cite> by Harper Lee.</p>
<p>The movie <cite>Inception</cite> is a masterpiece of storytelling.</p>

Abbreviations and Definitions

Abbreviations

The <abbr> tag marks abbreviations. Add a title attribute to show the full text on hover:

<p>Learn <abbr title="HyperText Markup Language">HTML</abbr> and
<abbr title="Cascading Style Sheets">CSS</abbr> to build websites.</p>

<p>The <abbr title="World Wide Web">WWW</abbr> was invented in 1989.</p>

Definitions

Use <dfn> when introducing a new term:

<p><dfn>Semantic HTML</dfn> refers to using HTML tags that describe
the meaning of content, not just its appearance.</p>

Code and Technical Text

Several tags are designed for displaying code and technical content:

<!-- Inline code -->
<p>Use the <code>console.log()</code> function to debug JavaScript.</p>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your file.</p>

<!-- Sample output -->
<p>The program will display: <samp>Hello, World!</samp></p>

<!-- Variables -->
<p>Set the <var>x</var> variable to 10.</p>

<!-- Code block (with pre) -->
<pre><code>
function add(a, b) {
return a + b;
}
</code></pre>

Marked and Deleted Text

Show changes or highlighted content:

<!-- Highlighted/marked text -->
<p>Search results for "HTML": Learn <mark>HTML</mark> basics with
our <mark>HTML</mark> tutorials.</p>

<!-- Deleted text (strikethrough) -->
<p>The price is <del>$99</del> <ins>$79</ins>!</p>

<!-- Inserted text -->
<p>Version 2.0 includes <ins>new dark mode</ins>.</p>

Complete Example: Blog Post

Let’s put it all together in a real-world blog post example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with HTML - My Tech Blog</title>
<style>
  body {
    font-family: Georgia, serif;
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    line-height: 1.8;
    color: #333;
  }

  h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }

  h2 {
    margin-top: 2rem;
    color: #1a1a1a;
  }

  blockquote {
    border-left: 4px solid #2563eb;
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    font-style: italic;
  }

  blockquote footer {
    font-style: normal;
    color: #666;
    margin-top: 0.5rem;
  }

  code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
  }

  mark {
    background: #fef08a;
    padding: 2px 4px;
  }

  abbr {
    text-decoration: underline dotted;
    cursor: help;
  }
</style>
</head>
<body>
<article>
  <h1>Getting Started with HTML in 2024</h1>
  <p class="meta">
    By <strong>Jane Developer</strong> |
    Published: January 15, 2024 |
    Reading time: 5 minutes
  </p>

  <p>
    If you want to build websites, learning
    <abbr title="HyperText Markup Language">HTML</abbr> is the
    <strong>essential first step</strong>. It's the foundation that
    every website is built on.
  </p>

  <h2>What is HTML?</h2>
  <p>
    <dfn>HTML</dfn> stands for HyperText Markup Language. Think of it
    as the <em>skeleton</em> of a webpage—it provides the structure
    and content, while <abbr title="Cascading Style Sheets">CSS</abbr>
    adds the styling.
  </p>

  <blockquote>
    <p>The best way to learn HTML is by doing. Don't just read
    tutorials—open a text editor and start coding!</p>
    <footer>— Every Web Developer Ever</footer>
  </blockquote>

  <h2>Your First HTML Code</h2>
  <p>
    Every HTML document starts with <code>&lt;!DOCTYPE html&gt;</code>.
    This tells the browser you're using modern HTML5. Then you'll
    add the <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>,
    and <code>&lt;body&gt;</code> elements.
  </p>

  <p>
    To save your file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>
    (or <kbd>Cmd</kbd> + <kbd>S</kbd> on Mac).
  </p>

  <h2>Why Learn HTML Now?</h2>
  <p>
    In 2024, HTML remains <mark>incredibly relevant</mark>. Despite
    all the fancy frameworks, every website still uses HTML at its core.
    Learning it gives you:
  </p>

  <ul>
    <li><strong>Foundation skills</strong> — Everything builds on HTML</li>
    <li><strong>Career opportunities</strong> — Web development is in demand</li>
    <li><strong>Creative freedom</strong> — Build whatever you imagine</li>
  </ul>

  <h2>Conclusion</h2>
  <p>
    Start with the basics, practice every day, and you'll be
    building websites in no time. As the saying goes,
    <q>A journey of a thousand miles begins with a single step.</q>
  </p>

  <hr>

  <p>
    <em>Found this helpful? Check out my book
    <cite>HTML Mastery</cite> for more in-depth tutorials!</em>
  </p>
</article>
</body>
</html>

Quick Reference

ElementPurposeExample
<h1>-<h6>HeadingsTitles and section headers
<p>ParagraphBlock of text
<strong>Strong importanceBold and important
<em>EmphasisItalic emphasis
<br />Line breakLine 1, Line 2
<hr>Horizontal ruleSection divider
<blockquote>Block quotationLong quote
<code>Code snippetconsole.log()

Try It Yourself!

  1. Basic: Create a simple article with a heading, three paragraphs, and some bold/italic text
  2. Intermediate: Write a recipe page with proper heading hierarchy, lists, and emphasis
  3. Advanced: Create a blog post with quotes, code snippets, and abbreviations

Next Steps

Great work! You now know how to structure and format text in HTML. Continue learning:

💡 Practice Makes Perfect

Try building your own blog post in our free online HTML editor! Copy the complete example above and customize it with your own content.