HTML Text Elements: Headings, Paragraphs, Lists, and Emphasis

Now that you know how an HTML document is structured, it’s time to fill that body with real content. On most web pages, the bulk of the content is text — articles, descriptions, instructions, lists. So the elements that handle text are the ones you’ll reach for far more often than any others.

This article walks through the everyday text elements: headings, paragraphs, line breaks, the tags that emphasize words, and lists. None of them are hard. The trick is picking the right one for each job — that’s what separates clean, well-structured HTML from a tangled mess. Let’s go through them.

Headings: <h1> to <h6>

Headings label the sections of your page — just like the headings running through this very article. HTML gives you six levels, from <h1> (the most important) down to <h6> (the least):

<h1>The biggest, most important heading</h1>
<h2>A section heading</h2>
<h3>A sub-section heading</h3>
<h4>Even smaller</h4>
<h5>Smaller still</h5>
<h6>The smallest heading</h6>

Think of headings as the outline of a document. The <h1> is the title of the whole page, so there’s usually just one. Then <h2> marks the main sections, <h3> marks subsections within those, and so on down the line. Together they form a hierarchy, much like a table of contents.

The key rule: use headings for their meaning, not their size. It’s tempting to grab an <h4> just because you want smaller-looking text, but that’s the wrong reason to reach for it. Headings tell search engines and screen readers how your page is structured — they’re not a font-size dial. When you only want text to look a certain size, that’s a job for CSS later, not for picking the wrong heading level.

Paragraphs: <p>

The paragraph is the workhorse of web text. Any block of ordinary prose goes inside a <p>:

<p>This is a paragraph. It can be as long or as short as you like, and the browser will automatically wrap the text to fit the screen width.</p>
<p>This is a second, separate paragraph. Browsers add a bit of space between paragraphs automatically.</p>

Each <p> is one distinct paragraph. The browser handles the spacing between them and wraps the lines for you, so you never add manual line breaks just to make text fit. Write your sentence, wrap it in <p>, and let the browser do the layout.

One thing that trips people up early on: extra spaces and line breaks in your HTML source don’t show up on the page. Write this, for example:

<p>Hello        world.
This is still the same line.</p>

…and the browser collapses all that whitespace into a single space, displaying “Hello world. This is still the same line.” on one flowing line. HTML treats any run of spaces, tabs, and newlines as a single space. That’s by design: it lets you indent and format your source neatly without changing what readers see.

Line breaks and horizontal rules

Sometimes you genuinely do want a line to break at a specific point — an address, or a few lines of a poem, say. That’s exactly what <br> is for:

<p>
  ACY Partner Indonesia<br />
  Jakarta, Indonesia
</p>

<br> is a self-closing element (no closing tag) that forces a line break right where you drop it. Use it sparingly, though — only where the break is genuinely part of the meaning, like an address. Don’t stack up a pile of <br> tags to push things apart or fake some spacing; that’s a layout job, and it belongs to CSS.

There’s also <hr>, a “horizontal rule” — a dividing line that separates one section of content from the next:

<p>The end of one topic.</p>
<hr />
<p>The start of a new topic.</p>

It draws a horizontal line across the page and signals a thematic break — a shift from one subject to another.

Emphasis: <strong> and <em>

When you want to call attention to a word or phrase, HTML gives you two main elements:

<p>This is <strong>really important</strong> information.</p>
<p>I <em>strongly</em> recommend reading this twice.</p>

• <strong> marks text as important. Browsers render it bold by default.
• <em> marks text for emphasis — the kind of stress you’d put on a word when speaking. Browsers render it in italics by default.

Here’s the part beginners often miss: these elements are about meaning, not just looks. <strong> says “this is important,” and <em> says “emphasize this” — a screen reader may even shift its tone of voice when it hits them. HTML does have plain <b> (bold) and <i> (italic) elements that change only the appearance and add no meaning, but most of the time <strong> and <em> are the better pick: they carry intent, not just style.

Lists: <ul>, <ol>, and <li>

Lists are everywhere on the web — navigation menus, steps in a tutorial, bullet points, feature lists. HTML gives you two main kinds.

An unordered list (<ul>) is for items where the order doesn’t matter. It shows them as bullet points:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

An ordered list (<ol>) is for items where the order does matter. It numbers them automatically:

<ol>
  <li>Write your HTML</li>
  <li>Add CSS for styling</li>
  <li>Add JavaScript for interactivity</li>
</ol>

In both cases, each item is wrapped in an <li> (“list item”). The only real difference is the container: wrap your <li> items in a <ul> for bullets or an <ol> for numbers. Choose by meaning — are these steps in a sequence (ordered), or just a collection of things (unordered)?

Lists can also nest inside one another for sub-items:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Just remember to put the nested list inside the parent <li>, and to close every tag in the right order.

Quotes and inline code

Two more text elements are worth knowing early on. When you’re quoting a longer passage from somewhere else, reach for <blockquote>:

<blockquote>
  <p>The best way to learn to code is to write code.</p>
</blockquote>

And when you’re writing about code and want to show a snippet inline — like mentioning the <title> tag in a sentence — you use <code>:

<p>The <code>&lt;title&gt;</code> element sets the page title.</p>

The <code> element renders its text in a monospace font, which quietly tells the reader “this is code, not regular prose.” It’s handy any time you mention a tag, a filename, or a command in the middle of a sentence.

Choosing the right element

Here’s a quick reference for the text elements covered here:

Whenever you’re unsure which one to use, ask what the content is, not what you want it to look like. The looks come from CSS later; the element is about meaning.

Wrapping up

You’ve now got the core toolkit for putting text on a page:

• Headings (<h1>–<h6>) structure your page into a logical outline — use them by meaning, in order, without skipping levels.
• Paragraphs (<p>) hold your regular prose, with the browser handling wrapping and spacing.
• <br> forces a line break where it’s meaningful; <hr> divides sections.
• <strong> and <em> add importance and emphasis — chosen for meaning, not just the bold/italic look.
• Lists (<ul>, <ol>, <li>) organize items as bullets or numbers depending on whether order matters.

With just these, you can already write the full text content of a real article or page. Next up are the two things that make the web a web in the first place: links and images — how to connect pages to one another and bring pictures into the mix.