Text Elements
Working with Text in HTML
Text is the backbone of most web pages. HTML provides a rich set of elements for structuring and styling text with meaning.
Headings
HTML has six levels of headings, from <h1> (most important) to <h6> (least important):
<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>
Rules for headings:
- Use only one
<h1>per page — it is the main title - Don't skip levels (don't jump from h2 to h4)
- Headings create a document outline that screen readers and search engines rely on
Paragraphs
<p>This is a paragraph. It contains one or more sentences of text.</p>
<p>This is a second paragraph. Browsers automatically add space between paragraphs.</p>
The <p> element is the standard container for body text. Browsers add top and bottom margins automatically.
Inline Text Formatting
These elements modify the appearance of text within a paragraph or heading:
| Element | Result | Use for |
|---|---|---|
<strong> | bold | Important, critical text |
<em> | italic | Emphasis, stress |
<u> | underlined | Annotations, proper names |
<s> | Removed or outdated content | |
<mark> | highlighted | Search results, key terms |
<small> | smaller text | Fine print, captions |
<sub> | subscript (H₂O) | Chemical formulas |
<sup> | superscript (x²) | Exponents, footnotes |
<code> | monospace | Code snippets, variable names |
<p>
This is <strong>important</strong> and this is <em>emphasized</em>.
Use <code>console.log()</code> to debug JavaScript.
Water is H<sub>2</sub>O. Area is r<sup>2</sup>.
</p>
Line Breaks and Horizontal Rules
<br> inserts a single line break without starting a new paragraph:
<p>
123 Tech Street<br />
Lagos, Nigeria<br />
+234 800 000 0000
</p>
<hr> draws a horizontal dividing line:
<section>
<h2>About Us</h2>
<p>We help people build tech careers.</p>
</section>
<hr />
<section>
<h2>Contact</h2>
<p>Reach us at hello@yourcareerex.com</p>
</section>
Blockquote
For longer quotations from an external source:
<blockquote>
<p>"The best time to start learning to code was yesterday. The second best time is today."</p>
<footer>— <cite>CareerEx Team</cite></footer>
</blockquote>
Lists
HTML has three types of lists:
Unordered list (bullet points):
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered list (numbered):
<ol>
<li>Sign up for CareerEx</li>
<li>Complete the HTML module</li>
<li>Build your first project</li>
</ol>
Description list (term + definition):
<dl>
<dt>HTML</dt>
<dd>The structure of a web page</dd>
<dt>CSS</dt>
<dd>The styling and layout of a web page</dd>
</dl>
Try it yourself
Key Takeaways
- Use one <h1> per page and do not skip heading levels — they create a document outline
- Use <p> for body text paragraphs; browsers automatically add spacing between them
- <strong> marks important text and <em> marks emphasized text — both have semantic meaning beyond just appearance
- Use <ul> for unordered bullet lists and <ol> for numbered lists where sequence matters
- <br> inserts a line break and <hr> draws a horizontal dividing line
- Use <code> for inline code snippets and <pre><code> for multi-line code blocks
Quick Quiz
1.How many <h1> elements should a page typically have?
2.What is the semantic difference between <strong> and <em>?
3.Which element should you use for a list where order matters (like steps)?
4.What does the <br> element do?
5.Which element displays text in monospace font to signal it is computer code?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx