HTML Text Basics: Paragraphs, Headings, Lines and Spans

What you will learn

Almost every web page is mostly text, so the text elements are the ones you will use every day. In this lesson you will learn the paragraph (<p>), the six heading levels (<h1> to <h6>), the horizontal rule (<hr>), the line break (<br>) and the span (<span>). For each one you will learn what it means, not just how it looks, plus the mistakes that trip up almost every beginner.

How browsers treat text and whitespace

Before the elements, one rule you must know: HTML collapses whitespace. Any run of spaces, tabs and line breaks in your code is displayed as a single space.

<p>Hello        world



again</p>

That paragraph displays as Hello world again. This is why you cannot create spacing by pressing Enter or the space bar in your HTML file. You need the right element (like a new paragraph) or CSS. It is also why you can freely indent and split long lines in your code without changing how the page looks.

Paragraphs: <p>

The <p> element represents a paragraph: a block of related sentences.

<p>HTML is the standard language for creating web pages.</p>
<p>Every paragraph starts on a new line, with space above and below it.</p>

What to know:

• A paragraph is a block element. It starts on a new line and takes the full width available.
• Browsers add a default gap above and below each paragraph (16px in most browsers). You can change it later with CSS margin.
• Use a new <p> for each paragraph. Don’t use empty <p></p> elements or repeated spaces to make gaps.
• A paragraph may contain only text and inline elements (<span>, <strong>, <a>, <br>, and so on). It cannot contain another <p>, a heading, a list or a <div>.

Mistake: a paragraph inside a paragraph

This is one of the most common HTML errors, and it looks harmless:

<p>First part of the paragraph.<p>A second paragraph.</p> Some leftover text.</p>

A <p> cannot contain a <p>. When the browser meets the second opening <p>, it closes the first one for you. Then the final </p> has nothing to close, so the browser invents an empty paragraph. What the browser actually builds is this:

<p>First part of the paragraph.</p>
<p>A second paragraph.</p>
Some leftover text.
<p></p>

Notice the two problems: “Some leftover text.” now sits outside any paragraph, and there is an empty <p> at the end. The page may look almost right, which makes the bug easy to miss. The same thing happens if you put a <div>, a heading or a list inside a <p>.

The fix is to close each paragraph before starting the next one:

<p>First part of the paragraph.</p>
<p>A second paragraph. Some leftover text.</p>

Headings: <h1> to <h6>

Headings give your page an outline, just like chapter titles and section titles in a book. There are six levels: <h1> is the most important and <h6> the least.

<h1>Web Development</h1>
<h2>HTML</h2>
<h3>Text elements</h3>
<h3>Links and images</h3>
<h2>CSS</h2>
<h3>Selectors</h3>

That code describes an outline like this:

Web Development
  HTML
    Text elements
    Links and images
  CSS
    Selectors

Default sizes

Browsers give each level a default size and make headings bold. In most browsers the sizes are:

• <h1>: 32px
• <h2>: 24px
• <h3>: about 18.7px
• <h4>: 16px (the same size as normal text)
• <h5>: about 13.3px (smaller than normal text)
• <h6>: about 10.7px

Because <h5> and <h6> are smaller than body text, beginners sometimes think they are for “small text”. They are not. Levels describe importance and structure, not size, and you will restyle them with CSS anyway.

The rules for good headings

1. Use one <h1> per page. It is the main title of that page’s content. The HTML specification does allow more, but one clear <h1> is best for readers, screen readers and search engines.
2. Don’t skip levels. Go h1 → h2 → h3. Jumping from <h2> straight to <h4> leaves a hole in the outline.
3. Never choose a heading for its size. If you want bigger or smaller text, use CSS. Choose the heading level that matches the content’s place in the outline.
4. Don’t use headings just to make text bold. Use a paragraph and style it, or use <strong> (covered in a later lesson).
5. There is no <h7>. If you seem to need a seventh level, restructure the content.

Why this matters: people who use screen readers often move around a page by jumping from heading to heading. A clean outline makes the page usable for them, and search engines use headings to understand what your page is about.

Horizontal rule: <hr>

The <hr> element is a void element (no closing tag), and it produces a horizontal line by default.

<p>The first topic ends here.</p>
<hr>
<p>The next topic starts here.</p>

The name comes from “horizontal rule”, but in modern HTML its meaning is a thematic break: a shift of topic between paragraphs, like a scene change in a story. The line is just how browsers show it by default, and CSS can restyle it or remove it.

• Use it when the content really changes topic.
• Don’t use it as decoration or to create space. For a decorative line, use a CSS border. For space, use CSS margin.

Line break: <br>

The <br> element is also a void element. It forces the text to continue on a new line inside the same paragraph.

<p>This is the first line.<br>This is the second line.</p>

The right use of <br> is when the line breaks are part of the content itself, such as an address or a short poem:

<p>
  MyCodeNest Learning Hub<br>
  12 Example Street<br>
  Sample City, 000000
</p>

The wrong use is stacking <br> tags to make gaps:

<p>Section one</p>
<br><br><br>
<p>Section two</p>

This “works”, but it mixes layout into your content, gives inconsistent results on different screens, and confuses screen readers. To create space between blocks, use CSS margin or padding. To separate ideas, use separate <p> elements.

Span: <span>

The <span> element is a generic inline container. By itself it does nothing: no style, no meaning, and no line break. Its job is to mark a piece of text so you can style it with CSS or find it with JavaScript.

<p>This is a <span style="color: red;">red</span> word.</p>

The style attribute above sets the colour with CSS. It is fine for experiments, but on real websites you will give the span a class and write the CSS in a separate stylesheet, which the CSS lessons cover.

Things to know about <span>:

• It is inline, so it stays inside the line of text.
• Because it is inline, it ignores width and height. A <span> given 300px by 80px still takes only as much space as its text.
• Its block-level counterpart is <div>, which starts on a new line.
• Use a span only when no meaningful element fits. If you want to say a word is important, use <strong>. If you want to highlight a word for its relevance, HTML has <mark> for exactly that. A span carries no meaning at all, so it should be the last choice, not the first.

Putting it together

Here is a small page that uses everything from this lesson correctly:

<h1>Why I Am Learning HTML</h1>

<p>I want to build my own website. HTML is the first step, because every page on the web starts with it.</p>

<h2>My goals</h2>
<p>By the end of this course I want to:</p>
<p>build a personal portfolio,<br>understand how pages are structured,<br>and move on to CSS.</p>

<hr>

<h2>My schedule</h2>
<p>I practice for <span style="color: tomato;">one hour</span> every day.</p>

Common mistakes

• Nesting a <p> inside a <p>, or putting a heading, list or <div> inside a paragraph.
• Using headings for size or skipping levels (<h2> then <h4>).
• Several <h1> elements on one page for no reason.
• Using <br><br> or empty <p></p> for spacing.
• Using <hr> as decoration instead of for a real change of topic.
• Using <span> for everything. If a meaningful element exists, use it.
• Leaving text loose inside <body> without wrapping it in an element such as <p>. It displays, but it has no structure.

Practice

1. Use the Practice in Editor button. Change the <h1> to your own title, then add an <h2> and two paragraphs under it.

2. Fix this broken code. There are three mistakes (a paragraph inside a paragraph, a skipped heading level, and <br> used for spacing):

   <h1>My Page</h1>
   <h4>About me</h4>
   <p>I love coding.<p>I am learning HTML.</p></p>
   <br><br><br>
   <p>Thanks for reading.</p>

3. Write an address using <br>, then rewrite it as three separate <p> elements. Which do you think reads better, and why?

4. Create a paragraph with one <span> word in a colour of your choice. Then try giving the span width: 200px and see what happens.

Recap

• HTML collapses whitespace; use elements and CSS for spacing, not extra spaces or blank lines.
• <p> is a paragraph. It can only hold text and inline elements, never another <p>.
• <h1> to <h6> build the outline of the page: one <h1>, no skipped levels, never chosen for size.
• <hr> is a thematic break between topics, and <br> is a line break that belongs in the content. Both are void elements.
• <span> is a generic inline container with no meaning; use it only when nothing more meaningful fits.