HTML Academy · Lesson

Paragraphs em strong and b i

Mark up prose with semantic emphasis and bold tags.

Lesson 2 of 413 steps

Paragraphs em strong and b i is a free HTML Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

The Paragraph Element

The  element marks a block of text as a paragraph:

<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>

Semantic Emphasis: em

The  element marks text with stress emphasis — the word that changes the meaning of the sentence:

<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->

Semantic Importance: strong

The  element marks text as strongly important:

<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->

em vs i

 and  both render italic by default, but have different meaning:

 — semantic stress emphasis (use most often)
 — presentational italic: technical terms, titles, foreign phrases

<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>

strong vs b

 and  both render bold by default, but differ semantically:

 — semantic importance (use most often)
 — draw attention without implying importance: keywords, product names

<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>

Nesting em and strong

You can nest emphasis elements for combined effect:

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

Paragraphs Cannot Be Nested

A  element cannot contain another :

<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>

<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

Inline vs Block in Paragraphs

 is a block element that can only contain inline elements:

<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>

<!-- INVALID: block element inside p -->
<p>
  <div>A div inside p is invalid</div>
</p>

Accessibility of Emphasis

Why semantic markup matters for assistive technology:

Screen readers announce  with changed inflection in some implementations
 may be read with additional emphasis
CSS-only bold/italic (e.g. font-style: italic on a span) has no semantic meaning for screen readers

Common Mistakes

Avoid these common text markup errors:

<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph

<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Bad: bold for visual style only -->
<b>Heading Text</b>

<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>

When to Use Each Element

Quick decision guide:

A chunk of prose text → 
Stress a word that changes meaning → 
Mark critical information → 
Italicize a title or technical term → 
Call out a keyword without implying importance →

Quick Check

Which element should you use to mark text as critically important?

Answer it in the interactive lesson

Recap: Text Semantics

Text markup summary:

 — paragraphs of prose
 — stress emphasis, changes sentence meaning
 — strong importance
 — presentational italic (titles, terms)
 — draw attention without importance
Never use   for paragraph spacing

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

Is the “Paragraphs em strong and b i” lesson free?

Yes — any 3 lessons of the HTML Academy learning path, including “Paragraphs em strong and b i”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

What will I learn in “Paragraphs em strong and b i”?

Mark up prose with semantic emphasis and bold tags. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “Paragraphs em strong and b i” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy