Structuring Text with Headings
HTML gives you six levels of headings: <h1> through <h6>. They're not just about size — they describe a hierarchy, the same way a book has a title, chapter headings, and section headings within each chapter.
<h1> is the most important heading on a page — typically the page's main title — and should generally appear only once. Each level after that (<h2>, <h3>, and so on) represents a smaller subsection nested beneath the one above it.
Heading Level 1<h1>
Heading Level 2<h2>
Heading Level 3<h3>
Heading Level 4<h4>
Heading Level 5<h5>
Heading Level 6<h6>
- ✓Use headings in order — don't skip from <h1> straight to <h4> just because you want smaller text.
- ✓Screen readers use heading levels to build a page outline — real structure matters for accessibility.
- ✓Never pick a heading level just because of how big or small it looks — that's a job for CSS, which you'll meet in Module 03.
The Paragraph Tag
The <p> tag wraps a block of running text — a paragraph, exactly like in a word processor. Browsers automatically add space above and below each <p>, which is why you should never use empty paragraphs just to create blank space.
<p>This is one paragraph. It can hold as many sentences as you like — the browser will wrap the text automatically to fit the screen.</p> <p>This is a second, separate paragraph.</p>
Notice the line breaks in the source code don't matter — only the <p> tags control spacing in the browser.
Emphasis & Importance
Inside a paragraph, you'll often want to draw attention to a word or phrase. HTML gives you tags for this that carry real meaning, not just a visual look.
Marks text as important. Browsers render it bold by default.
Marks text with stress emphasis. Browsers render it italic by default.
Represents fine print or side comments — rendered in a smaller size.
Highlights text as relevant, rendered with a yellow background by default.
Marks an abbreviation and can carry a full explanation via a title attribute.
This sentence has strong importance, stress emphasis, some small print, and a highlighted phrase.
You may also see <b> and <i> in older code — they apply bold and italic styling with no added meaning. Prefer <strong> and <em> when the emphasis is meaningful, not purely visual.
Breaking Down What You Just Learned
A quick reference for how each tag actually behaves.
<h1> – <h6>Six heading levels describing a document's outline, from most important (1) to least (6).
<p>A block of body text. Browsers add spacing automatically — you never need empty paragraphs for gaps.
<strong> vs <b><strong> means "this matters"; <b> just means "make this bold" with no semantic weight.
<em> vs <i><em> means "read this with emphasis"; <i> just means "make this italic."
<mark>Highlights text the way a highlighter pen would on a printed page.
Try It Yourself
In your day2.html file from yesterday, wrap "Riya" in <strong>, wrap "one day at a time" in <em>, and add a <small> tag beneath the paragraph that says "Last updated today." Save and refresh to check the result.
Build a Formatted Bio Page
Headings, paragraphs, and emphasis together
Create a new file called day3.html inside your course folder and build a short bio page using proper heading structure.
- Start with the full DOCTYPE, html, head, and body structure.
- Add one <h1> with your name, and one <h2> underneath it like "About Me."
- Write two <p> paragraphs about yourself under the <h2>.
- Bold one important fact using <strong>, and emphasize one phrase using <em>.
- Add a second <h2> called "Fun Fact" with one <p> underneath, using <mark> to highlight the most surprising word.
- Add a <small> line at the very bottom noting when the page was created.
Recap
<h1> through <h6> describe a page's outline — use them in order, not for size.
<p> wraps a block of text and gets automatic spacing above and below.
<strong> and <em> carry meaning; <b> and <i> are purely visual.
<small> shrinks fine print; <mark> highlights text like a highlighter pen.
Key Takeaways
- Headings (<h1>–<h6>) describe hierarchy and structure, not just font size.
- <p> is the standard tag for a block of body text.
- <strong> and <em> add real meaning; <b> and <i> only change appearance.
- <small> and <mark> give you fine print and highlighting with semantic intent.
- Choosing the right tag now will make styling with CSS far easier later in the course.