Coding/Learn/html/text formatting
HTML Beginner Course
01.Introduction to HTML
02.Anatomy of an HTML Element
03.The Sacred HTML5 Skeleton
04.Headings (h1 to h6)
05.Paragraphs, Line Breaks & Dividers
06.Text Formatting & Emphasis
07.Hyperlinks & Navigation (<a>)
08.Images & The Sacred Alt Text (<img>)
09.Ordered & Unordered Lists (<ul>, <ol>, <li>)
10.Block vs Inline Elements
11.Generic Containers (<div> & <span>)
12.Semantic HTML (<header>, <nav>, <main>, <footer>)
13.Tables (<table>, <tr>, <th>, <td>)
14.Native Audio & Video Elements
15.The Invisible Brain (<head> & Meta Tags)
16.Interactive Forms (<form>)
17.Input Types (<input>)
18.Accessible Labels & Submit Buttons
19.Textareas & Select Dropdowns (<textarea>, <select>)
20.Capstone: Building Your First Web Profile Page
Course Certificate0%

Complete all lessons to earn

LearnText Formatting & Emphasis
6 / 20 0%
Lesson 06 of 20
5 mins read

Text Formatting & Emphasis

PreviousNext Lesson
In Plain English

HTML gives you semantic tags to express meaning and emphasis: <strong> for importance, <em> for vocal stress, <mark> for yellow highlighting, <code> for inline code, and <del> for strikethrough.

The Mental Model

"Imagine reading a recipe. <strong> is "DO NOT TOUCH THE HOT PAN". <em> is "freshly ground pepper (not canned)". <code> is "add 5ml". <del> is "<s>sugar</s> honey"."

Deep Dive: How It Works

<strong> vs <b>: <b> only makes text bold visually, while <strong> tells screen readers and search engines: "This text is critically important!"

<em> vs <i>: <i> only tilts text into italics, while <em> indicates verbal stress or foreign words.

<mark>: Gives text a classic yellow highlighter pen effect.

<code>: Renders text in a monospaced programmer font like JetBrains Mono.

Syntax Blueprint

<p>This is <strong>important</strong> and this is <code>console.log()</code>.</p>

Use inline semantic tags to highlight words without breaking paragraph flow.

PointCore Rules to Remember

Point star
Semantic Meaning First: Always prefer <strong> and <em> over plain <b> and <i> for accessibility.
Point star
Inline Elements: Formatting tags flow naturally inside text without forcing new lines.
Point star
Code Tag: Use <code> for function names, variables, and technical terms.

Common Beginner Traps & How to Fix Them

Mistake:Using <strong> for entire paragraphs

Why it happens: Thinking bold makes everything more readable.

How to fix: Reserve <strong> for key phrases, warnings, and vital terms.

Pro Tip: Wrap keyboard shortcuts in <kbd> (e.g. <kbd>Ctrl</kbd> + <kbd>C</kbd>) for cool native styling!

Live Interactive Example

Hit Run Code to see it live
Semantic Formatting Showcase
HTML5
1
2
Live Browser Preview
Click "Preview / Apply" to view the rendered output.
How it works: <strong> emphasizes danger, <code> displays code styling, and <mark> highlights text.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Format words with strong and code tags

  • PointWrite a <p> tag containing: "Learn <strong>HTML</strong> and <code>CSS</code> today."
1
2
Browser Preview & Output
Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

PreviousNext Lesson
Overview100 SheetLearnCertificates