Emphasis, Importance & Quotes

After this lesson, you can choose strong, em, blockquote, and q according to a sentence's intent.

BEGIN WITH A QUESTION

Understanding begins with a question.

‘I want that book’ and ‘I want THAT book’ emphasize different things. HTML communicates emphasis, importance, and quotations as meaning rather than decoration alone.

Choose strong, em, blockquote, and q according to a sentence's intent.

UNDERSTAND THE CONCEPT

Importance and emphasis are different

Strong marks importance, seriousness, or urgency, such as a warning. Em marks stress within a sentence: ‘I want that book, not another one’. Browsers usually display strong in bold and em in italics, but meaning is the reason to choose them.

Long and short quotations

Use blockquote for a quotation in a separate block; use q for a short quotation within a sentence. Provide a readable source when quoting a real person or work. This exercise uses fictional statements identified as practice examples.

Do not emphasize every word

If every word is marked as important, readers lose their clues about priority. Select the parts that change meaning or require attention. Use CSS for purely visual effects when it is introduced later.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<p><strong>Important:</strong> return the book dry.</p>
<p>I want to read <em>today</em>, not tomorrow.</p>
<blockquote><p>Start with one page.</p></blockquote>
<p>That is a fictional character's message in this exercise.</p>
<p>The character also said, <q>Read slowly.</q></p>

BROWSER RESULT

Strong marks importance, em changes stress, and blockquote and q identify quotations with source context.

COMMON MISTAKES

<strong>The entire article is bold just to make it look interesting.</strong>

Strong does not replace typographic design. Use it for important content; leave ordinary explanations as ordinary text.

TRY TOGETHER

Practice clarifies understanding.

01 Which element suits the urgency of the warning ‘Do not drink this water’?

strongem for every word because it is italich1 in the middle of the paragraph

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Give the garden sign meaning

Create a paragraph with strong for ‘Do not step on seedlings’, a paragraph with em for ‘morning’, one blockquote containing the fictional message ‘Care a little every day.’, and one q within a paragraph. State that the quotations are fictional.

<p>Do not step on seedlings.</p>
<p>Watering takes place in the morning.</p>

index.htmlHTMLLn 1, Col 12 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Strong is for importance; em is for stress.
Blockquote is for block quotations; q is for inline quotations.
Provide source context for quotations and never invent an attribution.

Meaningful text

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Semantic HTML °HTML element °

Library: Three languages behind one page ↗

Next lesson →