Headings and Paragraphs: Writing Content That Makes Sense

Now that you understand document structure, let's focus on the two elements you will use more than any other: headings and paragraphs. They sound simple, and they are easy to type, but using them correctly is about meaning, not just appearance.

Heading Levels And Hierarchy

HTML gives you six levels of headings, <h1> through <h6>. <h1> is the most important heading on a page, typically the main title. <h6> is the least important, used for the smallest sub-sub-sections. Here is an example showing the hierarchy on an article about Iron Man's suits:

<h1>The Evolution of the Iron Man Suit</h1>
<h2>Early Prototypes</h2>
<h3>The Mark I</h3>
<h2>Modern Armor</h2>
<h3>The Mark 50</h3>
<h3>Nanotech Features</h3>

Notice the pattern: one <h1> for the whole page, then <h2> for major sections, then <h3> for subsections within those. This is not arbitrary. Screen readers let blind users navigate a page by jumping between headings, the same way sighted users scan bold section titles with their eyes. If your headings skip levels randomly, or if you use five <h1> tags on one page, that navigation experience breaks, and so does the logical outline search engines try to build of your content.

Choosing Headings By Meaning

A very common beginner mistake is picking heading levels based on font size rather than meaning. Beginners often think "this text needs to look bigger, I'll use an <h2>" even when it is not actually a section title. Resist this. If you want big, bold-looking text that is not actually a heading, that is a CSS styling problem, not a reason to misuse heading tags. Using the wrong tag for the wrong reason confuses both machines and future readers of your code, including future you.

Writing Paragraphs Correctly

Now let's talk paragraphs. The <p> tag represents a block of related text, usually a few sentences forming one thought. Browsers automatically add space above and below each paragraph, which is why beginners sometimes try to create extra spacing by stacking empty paragraphs like this:

<p>First thought here.</p>
<p></p>
<p></p>
<p>Second thought here.</p>

Avoid that. Empty paragraphs used purely for spacing are a meaning-free hack; real spacing control belongs to CSS margins, which comes later. For now, just write one paragraph per distinct thought, and trust that browsers will space them out reasonably on their own.

Another mistake is cramming an entire article into a single paragraph. Even though a wall of text will technically render inside one <p> tag, it hurts readability and it also hurts you structurally, because there is no way to target a specific thought with CSS or JavaScript later if everything is one undifferentiated block.

Let's build a small, realistic example: a short bio section for Vikesh Singh.

<h1>About Vikesh Singh</h1>
<p>Vikesh Singh is a developer who enjoys building clear, practical web pages.</p>
<p>This section is part of a learning project exploring how HTML documents are structured.</p>

Here the <h1> gives the section a clear title, and each paragraph covers one distinct idea: who the person is, and what this particular page is about. That separation is exactly what makes content scannable, both for humans skimming quickly and for machines trying to extract meaning.

Line Breaks Inside Paragraphs

One more detail worth knowing: inside a paragraph, pressing Enter in your HTML source code does not create a line break on the rendered page. Browsers collapse multiple spaces and line breaks in your source into a single space when displaying text. So this:

<p>This text
spans multiple
lines in the source.</p>

renders as one continuous line of text: "This text spans multiple lines in the source." This surprises nearly every beginner the first time they see it. If you genuinely need a line break inside a paragraph, without starting a whole new paragraph, there is a dedicated tag for that, <br>, which we will touch on properly in a later lesson about attributes and smaller inline elements.

Practice And Review

A practical tip: when writing real content, read your heading structure out loud, top to bottom, ignoring the paragraphs. It should sound like a sensible table of contents. If it doesn't, your heading levels probably need adjusting.

Hands-on check: write a short page about a topic you know well, with one <h1> title, at least two <h2> sections, and two or three paragraphs of real sentences under each section. Resist the urge to use heading tags just to make text look bold; save that instinct, you will understand exactly why in the CSS course later.