HTML Headings, Paragraphs and Text Formatting with Examples

You have made it past the basics covered in HTML Tags, Elements and Attributes Explained with Examples — now let us make HTML do something visible. Text formatting is where your first webpage starts looking like a real webpage. Headings, paragraphs, bold text, italic text — you will use these in every single HTML document you ever write. There are also a few things about how these elements behave that are not obvious at first glance.

HTML Headings — h1 Through h6

HTML gives you six levels of headings, from <h1> down to <h6>. h1 is the largest and most important. h6 is the smallest. Browsers display them in decreasing size by default, but the real purpose of heading levels is structure and meaning — not just visual size.

<h1>Main Page Title</h1>n<h2>Section Heading</h2>n<h3>Sub-section Heading</h3>n<h4>Smaller Sub-section</h4>n<h5>Even Smaller</h5>n<h6>Smallest Heading</h6>

One thing that matters a lot for SEO and accessibility — every page should have exactly one <h1>. It tells search engines and screen readers what the page is fundamentally about. After that, use <h2> for main sections, <h3> for sub-sections, and so on in logical order. Never skip levels randomly or use heading tags just to make text bigger — that is what CSS is for.

Paragraphs in HTML

The <p> tag creates a paragraph. The browser automatically adds space above and below each paragraph so your text does not all blur together into one block.

<p>HTML was invented by Tim Berners-Lee in 1991.</p>n<p>It has gone through many versions and improvements since then.</p>

Something that catches beginners off guard: extra spaces and line breaks inside your HTML code don’t appear on the webpage. You can press Enter ten times inside a <p> tag and the browser still renders it as a single continuous line of text. The browser collapses all that whitespace. If you want an actual line break, you need to explicitly use the <br> tag.

<p>Line one.<br>Line two starts right here.</p>

Bold and Italic Text

There are two ways to make text bold — <strong> and <b>. Two ways to make text italic — <em> and <i>. They look visually identical but mean different things semantically, and that distinction matters.

<strong> signals that the content is important. Screen readers may announce it differently to visually impaired users. <b> just makes text visually bold without implying any importance. The same logic applies to <em> (meaningful emphasis) versus <i> (just visual italic styling). For most writing, use <strong> and <em> — they carry meaning, which is better for accessibility and search engines.

<p>This is <strong>very important</strong> information.</p>n<p>The term <em>semantic HTML</em> means HTML that describes meaning.</p>

Other Useful Text Formatting Tags

HTML has a handful of other text tags you will encounter. <mark> highlights text like a yellow marker pen. <del> shows deleted text with a strikethrough line. <ins> underlines text to indicate it was inserted. <sub> creates subscript useful for chemical formulas. <sup> creates superscript good for footnotes or mathematical notation.

<p>Water is written as H<sub>2</sub>O.</p>n<p>Price was <del>$50</del> — now <mark>$30</mark>.</p>n<p>Area formula: r<sup>2</sup></p>

Preformatted Text and Code Display

When displaying code or any content where spacing and line breaks matter exactly, the <pre> tag preserves all whitespace and line breaks as written. Combine it with <code> for displaying code samples — which is exactly what every tutorial site uses.

<pre><code>nfunction greet(name) {n    return "Hello, " + name;n}n</code></pre>

The browser renders the content exactly as indented and spaced in the source file. Perfect for tutorials and documentation where the formatting of code itself is important.

Now that text formatting is clear, the next step is learning how to connect pages together. Head to HTML Links and Anchor Tags — Complete Tutorial with Examples and learn how to turn plain text into clickable links — the feature that makes the web actually a web.