—HTML Series · Post 4: Text and Content Elements
📚 Text & Content Elements
Headings, paragraphs, bold, italic, highlights, and more — these are the elements you'll use on literally every page you ever build. Time to master them.
The Content Layer
If HTML is the structure of a house, the text and content elements are the rooms you actually live in. These are the elements that hold your words — your headings, your paragraphs, your emphasized points, your fine print. They're not flashy. They're not complex. But they're the elements you'll reach for on every single page you build, for the rest of your career.
Let's learn them properly.
Headings: <h1> Through <h6>
HTML gives you six levels of headings, from <h1> (the biggest and most important) down to <h6> (the smallest). Headings aren't just about size — they create a content hierarchy that tells both browsers and screen readers how your information is organized.
<h1>CodeHerWay</h1>
<h2>HTML Course</h2>
<h3>Lesson 4: Text Elements</h3>
<h4>Why Headings Matter</h4>Headings are not about making text bigger or bolder. That's what CSS is for. Headings are about meaning and hierarchy. Don't use an <h3> because you like the size — use it because it's a subsection under an <h2>. Screen readers use heading levels to help users navigate your page. Google uses them to understand your content. Get the hierarchy right and everything else follows.
Use only one <h1> per page. It should describe the main topic of the page — your name on a portfolio, the article title on a blog post, the product name on a product page. Multiple <h1> tags confuse search engines about what your page is actually about. In practice you'll mostly use <h1> through <h3>. Reaching for <h5> or <h6> usually means your content needs reorganizing.
Paragraphs: <p>
The <p> element is the most common element in HTML. Every block of body text you write goes in a paragraph tag. The browser automatically adds vertical spacing between paragraphs, creating readable separation without any CSS.
<p>This is the first paragraph. It explains the main idea.</p>
<p>This is the second paragraph. It adds detail or a new point.</p>
<p>Each paragraph gets its own block of space on the page.</p>A common beginner mistake: using <br> tags to create space between text instead of using separate <p> elements. If your text represents a new thought or paragraph, it should be a new <p>. Line breaks are for spacing within a single block of content (like lines in an address), not for spacing between paragraphs.
Text Formatting Elements
Sometimes you need to emphasize, highlight, or annotate specific words within a paragraph. HTML gives you semantic elements for this — and "semantic" is the key word. These tags carry meaning, not just appearance.
<strong> — Important Text
<strong> marks text as strongly important. Browsers render it bold by default, but the point isn't the boldness — it's the meaning. Screen readers change their tone when they hit <strong> text. Search engines give it extra weight. It says "this matters more than the text around it."
<p>Do <strong>not</strong> skip the fundamentals.</p><em> — Emphasized Text
<em> marks text with emphasis — a stress on that word that changes the meaning of the sentence. Browsers display it italic by default. Screen readers literally emphasize it with vocal stress.
<p>You <em>can</em> do this. I promise.</p><mark> — Highlighted Text
<mark> highlights text like a yellow highlighter on paper. It's used to draw attention to a specific term or phrase — often for search results or key takeaways.
<p>The most important rule: <mark>structure first, style later</mark>.</p><small> — Fine Print
<small> represents side comments and fine print — disclaimers, copyright notices, legal text. It renders smaller by default, but the meaning is "this is secondary, less prominent information."
<p><small>© 2025 CodeHerWay. All rights reserved.</small></p><sup> and <sub> — Superscript & Subscript
<sup> raises text above the baseline (superscript) — used for footnotes, ordinals (1st, 2nd), and exponents (x2). <sub> drops text below the baseline (subscript) — used in chemical formulas (H2O) and mathematical notation.
<p>E = mc<sup>2</sup></p>
<p>Water is H<sub>2</sub>O</p>
<p>This is the 1<sup>st</sup> lesson you'll never forget.</p>Water is H2O
This is the 1st lesson you'll never forget.
Line Breaks & Horizontal Rules
<br> — Line Break
The <br> element forces a line break without starting a new paragraph. It's self-closing — no content goes inside it. Use it when you need a new line within the same block, like lines in a poem or an address.
<p>
CodeHerWay<br />
123 Dev Street<br />
Chicago, IL 60601
</p>If you're using multiple <br> tags in a row to create vertical space, you're doing it wrong. That's CSS's job (margin and padding). Line breaks are for content that genuinely needs to be on separate lines within the same block — like an address or poetry. Never use them for layout spacing.
<hr> — Horizontal Rule
The <hr> element creates a thematic break — a visible horizontal line that separates sections of content. It's self-closing and semantic, meaning it tells the browser "the topic changes here."
<p>End of section one content.</p>
<hr />
<p>Beginning of a completely different topic.</p>Notice how every element we've covered has a reason behind it. <strong> isn't "the bold tag" — it's "the importance tag." <em> isn't "the italic tag" — it's "the emphasis tag." This distinction matters because CSS can change how any element looks, but HTML defines what it means. Always think meaning first, appearance second.
For an embarrassingly long time, I used <b> instead of <strong> and <i> instead of <em>. They look the same in the browser, so I figured they were the same thing.
They're not. <b> and <i> are purely visual — they make text bold or italic with zero semantic meaning. <strong> and <em> carry meaning. A screen reader will stress <em> text and announce <strong> text with urgency. A search engine will weigh <strong> text more heavily.
It's the difference between looking professional and actually being professional. Using the right tags isn't about being perfect — it's about caring enough to write code that works for everyone, not just people who can see the screen. That switch in thinking was one of the biggest level-ups in my early development journey.
🏆 Mini Build: Styled Blog Post Intro
Create the intro section of a blog post using every text element from this lesson. Your HTML should include:
Recap
Headings (<h1> through <h6>) create a content hierarchy — use one <h1> per page and don't skip levels. Paragraphs (<p>) hold your body text. <strong> marks important text. <em> adds emphasis. <mark> highlights. <small> is for fine print. <sup> and <sub> handle superscript and subscript. <br> breaks a line, and <hr> breaks a section. Every one of these elements is about meaning, not just appearance.
Next up: links and navigation — how HTML connects pages together and lets users move through your site.
