Text Fundamentals: Typography

Text is the foundation of the web. Before you can build anything visual, you need to master how HTML structures written content — from the bold headline at the top of a page down to a single emphasized word in a sentence.

Headings (<h1> to <h6>)

HTML provides exactly six levels of headings. Think of them like the Table of Contents in a textbook — they create a logical hierarchy that both humans and search engines use to understand your page.

<h1> — The Main Heading

This is the primary topic of the entire page. Think of the massive front-page headline of a newspaper: "MAN WALKS ON MOON." It tells you exactly what everything below is about.

• Rule: Use only one <h1> per page
• SEO: Google treats this as the most important text for understanding your page

<h1>The Ultimate Guide to Space Travel</h1>

<h2> — Primary Subheadings

These divide your main topic into major sections — like chapter titles in a textbook. You can have multiple <h2> tags on one page.

<h2>Chapter 1: Preparing for Launch</h2>
<h2>Chapter 2: Life in Orbit</h2>

<h3> — Secondary Subheadings

Used for subsections inside an <h2>. Inside "Chapter 1: Preparing for Launch," you might break it down into "Physical Training," "Mental Preparation," and "Packing."

<h3>Physical Training Requirements</h3>

<h4> through <h6>

These go progressively deeper. <h4> is for detailed sub-topics, <h5> for minor labels or sidebars, and <h6> for fine print, copyright notices, or photo credits.

<h4>Daily Cardio Routine</h4>
<h5>Fun Fact about Gravity</h5>
<h6>Copyright 2026 SkyBrance Tech</h6>

The Full Hierarchy in Action

<h1>The Solar System</h1>
  <h2>The Inner Planets</h2>
    <h3>Planet Earth</h3>
      <h4>The Moon</h4>
      <p>Earth has one moon.</p>
  <h2>The Outer Planets</h2>
    <h3>Planet Jupiter</h3>

Pro tip: Never skip heading levels. Do not jump from <h1> directly to <h4> just because you like the size. This confuses screen readers and damages your SEO. If you want a different visual size, use CSS — not a different heading tag.

---

The Paragraph Tag (<p>)

The <p> tag defines a paragraph of text. It is the most common tag you will use for writing content. Browsers automatically add spacing before and after each paragraph.

Think of it like bread slices in a sandwich — they separate the ingredients into bite-sized, edible chunks. Without them, all your text runs together in one unreadable blob.

<p>This is the first idea I want to share.</p>
<p>This is a completely different idea, so it gets its own paragraph.</p>

Pro tip: Pressing Enter in your code file does nothing. HTML ignores extra whitespace. If you want separate blocks of text, you must use <p> tags.

---

Line Break (<br>) and Horizontal Rule (<hr>)

These two tags are void elements — they stand alone and do not wrap around content.

<br> — Line Break

Forces a line break at exactly that point. Think of it as pressing the Enter key on a typewriter. Use it when the line break is part of the content itself — like a poem or a postal address.

<p>
  My Address:<br>
  123 Web Street<br>
  Internet City, HTML Land
</p>

Output:

My Address: 123 Web Street Internet City, HTML Land

Pro tip: Don't abuse <br>. Never write <br><br><br> to create vertical space between sections — that's what CSS margins are for.

<hr> — Horizontal Rule

The <hr> tag represents a thematic break — a shift in topic. Browsers display it as a horizontal line. Think of it as the scene change in a movie, or the row of stars *** between sections of a novel.

<h2>Chapter 1: The Beginning</h2>
<p>Once upon a time, there was a coder who loved HTML.</p>

<hr>

<h2>Chapter 2: The Middle</h2>
<p>One day, the coder discovered CSS and made everything beautiful.</p>

Pro tip: You can style <hr> with CSS to be dotted, dashed, colored, or thicker. In your HTML it is always just <hr>.

---

Strong Importance (<strong>)

The <strong> tag marks text with strong importance. Browsers display it as bold, but the visual boldness is just a side effect — the real purpose is to flag content as critical or urgent.

Think of a warning label: "Please be careful" is a polite suggestion. "DANGER: HIGH VOLTAGE" is a critical warning. <strong> is that warning voice.

<p>You can click the blue button to save, but
<strong>do not click the red button</strong>
or you will lose everything.</p>

Output: You can click the blue button to save, but do not click the red button or you will lose everything.

<strong> vs <b>

Tag	Meaning	When to use
<strong>	This content is important	Warnings, critical phrases
<b>	Bold for decoration only	Rarely — prefer CSS

Screen readers may change tone or volume for <strong> text. Google uses it to identify key phrases on your page. Always prefer <strong> over <b>.

---

Emphasis (<em>)

The <em> tag marks emphasized text. Browsers render it in italics, but the meaning is stress — it changes how the sentence is interpreted.

Consider: "I did not eat the cake."

• "I did not eat the cake" → defensive proof of innocence
• "I did not eat the cake" → maybe you ate the pie

The <em> tag tells the browser which reading is correct.

<p>We <em>really</em> need to finish this project today.</p>

Output: We really need to finish this project today.

<em> vs <i>

Tag	Meaning	When to use
<em>	Stress emphasis — changes meaning	"I love HTML!"
<i>	Alternate voice — names, terms, thoughts	"H.M.S. Victory sailed away"

Pro tip: Visuals are deceptive — <em> and <i> look identical in a browser. Use <em> when removing the emphasis would change the meaning. Use <i> for titles, foreign phrases, and technical terms. Use CSS if you just want a decorative slant.