HTML Academy · Lesson

Paragraphs em strong and b i

Mark up prose with semantic emphasis and bold tags.

Paragraphs em strong and b i is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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?

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

Frequently asked questions

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

Yes — the full text of “Paragraphs em strong and b i” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

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