Text and Content Elements
Use headings, paragraphs, emphasis, quotes, and inline semantics correctly for readable and accessible HTML documents.
Use headings, paragraphs, emphasis, quotes, and inline semantics correctly for readable and accessible HTML documents. This hands-on tutorial focuses on practical implementation of text and content elements concepts.
Text and Content Elements
Modern HTML is about giving meaning to your text, not just changing its appearance. When you use the correct elements, you help search engines and screen readers understand your hierarchy.
Lesson Path
- Previous lesson: VS Code Setup for HTML
- In this lesson: You learn to structure text for readability, SEO, and accessibility.
- Next lesson: Links and Navigation
Headings: The Hierarchy of Truth
HTML provides six levels of headings. Think of them like an outline for a book.
<h1>: The main title of the page. Use only one per page.<h2>: Major sections.<h3>: Sub-sections under anh2.<h4>to<h6>: Finer levels of detail.
Pro Tip: Never skip heading levels (e.g., jumping from
h1directly toh3). This breaks the logical structure for assistive technologies.
Paragraphs and Line Breaks
The <p> tag is for blocks of text. Browsers automatically add vertical space between paragraphs.
If you need a line break without a new paragraph, use <br />. However, use it sparingly—usually only for addresses or poems.
Meaningful Emphasis
In the past, we used <b> for bold and <i> for italics. In modern HTML, we use tags that carry semantic weight:
| Element | Meaning | Default Style |
| --- | --- | --- |
| <strong> | High importance or urgency | Bold |
| <em> | Stress emphasis (changes meaning) | Italics |
| <mark> | Relevant highlighted text | Yellow background |
| <small> | Side comments or "fine print" | Smaller text |
Lists: Organizing Data
- Unordered (
<ul>): For bulleted lists where order doesn't matter. - Ordered (
<ol>): For numbered lists where the sequence is critical (like steps in a recipe). - List Item (
<li>): The individual entries inside aulorol.
Quotes and Citations
<blockquote>: For long, multi-line quotes.<q>: For short, inline quotes (browsers add quotation marks automatically).<cite>: To reference the title of a work (like a book or movie).
Build a Professional Article
Use the elements you've learned to create a structured blog post. Notice how the hierarchy makes the content easy to scan.