Emphasis and Quotes

Introduction

When you write a webpage, the tags you choose should communicate meaning, not just appearance. HTML includes semantic elements that tell browsers, screen readers, and other tools what a piece of text means.

In this lesson, you will use strong and em for important or emphasized text, blockquote for longer quotations, and code for short code snippets. You will finish by adding these elements to a short website section about learning to code.

Key concepts

Strong importance with strong

Use the <strong> element when text has strong importance. Browsers commonly display it in bold, but its meaning is more important than its appearance.

<p><strong>Save your work often.</strong></p>

The sentence tells the reader that saving work is especially important.

Emphasis with em

Use the <em> element when you want to stress a word or phrase. Browsers commonly display emphasized text in italics.

<p>HTML gives a page its <em>structure</em>.</p>

The emphasis changes how the sentence should be understood or read aloud. Do not use <em> only because you want slanted text.

Long quotations with blockquote

Use <blockquote> for a quotation that stands apart from your own writing. Put the quoted words inside the element.

<blockquote>
  The best way to learn is to build.
</blockquote>

A blockquote is suitable for a complete sentence, paragraph, or longer passage. For a very short quotation within a paragraph, HTML also has an inline quotation element, but this lesson focuses on blockquotes.

Code snippets with code

Use <code> when writing a short piece of computer code, such as an element name or command.

<p>Use the <code>&lt;h1&gt;</code> element for a main page heading.</p>

Notice that the angle brackets inside the code example are written as < and >. These character references make the brackets appear as text instead of being interpreted as HTML.

Worked example

Imagine you are creating a page called “My Coding Journey.” This paragraph explains an important habit, emphasizes one idea, includes a code element, and presents advice as a quotation.

<p><strong>Practice a little every day.</strong> Even ten minutes can help you understand <em>why</em> code works. Try writing a <code>&lt;p&gt;</code> element for your next idea.</p>

<blockquote>
  Build small projects, test your ideas, and learn from mistakes.
</blockquote>

The paragraph contains the writer’s own ideas. The blockquote clearly separates the quoted advice. Each element describes the purpose of its content.

Guided activity: Build a learning tip

Work along with your teacher. Open your existing practice page or create a new HTML file in your editor.

1. Create a paragraph that tells visitors one important coding habit. Mark the most important words with <strong>.

2. Add a second sentence that stresses one word or phrase. Wrap that word or phrase in <em>.

3. Include a short code example, such as <h2>, <p>, or <ul>. Put it inside <code> and use character references for angle brackets.

4. Add a short piece of advice as a block quotation using <blockquote>.

5. Save the file and open it in a browser. Check that the important text, emphasized text, quotation, and code snippet are easy to identify.

Your content might look like this:

<p><strong>Check your code carefully.</strong> Read it <em>slowly</em> before changing it. The <code>&lt;ul&gt;</code> element creates an unordered list.</p>

<blockquote>
  Every error is information that can help you improve.
</blockquote>

Common mistake

A common mistake is choosing an element because of how it looks instead of what it means. For example, using <strong> simply to make a word bold may make the page less meaningful. Use it when the text is especially important. Similarly, use <em> for genuine emphasis, not for every word you want displayed in italics.

Another frequent error is placing HTML tags directly inside a code example. If you write <code><p></code>, the browser may treat the paragraph tag as real HTML instead of displaying it. Write <p> inside the code element when you want readers to see the tag.

Independent challenge

Create a “Three Tips for New Coders” section using only the elements you have practiced in this lesson.

• Write one paragraph containing a strongly important tip.
• Use emphasis on a word that changes the focus of a sentence.
• Show one HTML element as a code snippet.
• End with a blockquote containing a short, original piece of encouragement.

Before you finish, review your HTML. Ask yourself: Does each element describe the meaning of the content? Are all opening elements closed? Did you use character references when displaying HTML tags as code?

Quick review

<strong> marks strong importance. <em> marks emphasis. <blockquote> identifies a longer quotation. <code> identifies a short code snippet. Semantic HTML helps people and technology understand your content more clearly.