Bold and italic text in HTML - Mini Project: Build & Apply

Bold and italic text

📖 Scenario: You are creating a simple webpage to show how to emphasize text using bold and italic styles. This is useful for highlighting important words or phrases in articles, blogs, or any web content.

🎯 Goal: Build a basic HTML page that displays a sentence with some words in bold and some words in italic style.

📋 What You'll Learn

Use semantic HTML tags for bold and italic text

Create a complete HTML5 document with lang, charset, and viewport meta tags

Include a heading and a paragraph with mixed bold and italic text

Ensure the page is accessible and uses proper structure

💡 Why This Matters

🌍 Real World

Using bold and italic text is common in writing articles, blogs, and web pages to emphasize important information and improve readability.

💼 Career

Understanding semantic HTML and accessibility is essential for web developers to create user-friendly and inclusive websites.

1

Create the basic HTML structure

Write the basic HTML5 skeleton with html, head, and body tags. Set the language to English using lang="en". Inside the head, add meta charset="UTF-8" and meta name="viewport" content="width=device-width, initial-scale=1.0". Add a title with the text Bold and Italic Text Example.

HTML

Hint

Remember to include the lang attribute in the html tag and the required meta tags inside head.

2

Add a heading to the page

Inside the body tag, add a heading level 1 with the text Welcome to Bold and Italic Text.

HTML

    
    
    Bold and Italic Text Example


    

Hint

Use the <h1> tag inside the body to add the heading.

3

Add a paragraph with bold and italic text

Below the heading, add a paragraph with the text: This is a bold word and this is an italic word. Use the <strong> tag for the bold word and the <em> tag for the italic word.

HTML

    
    
    Bold and Italic Text Example


    Welcome to Bold and Italic Text
    

Hint

Use the <p> tag for the paragraph and wrap the words with <strong> and <em> respectively.

4

Add accessibility and finalize the page

Add an aria-label attribute with the value Example of bold and italic text to the paragraph tag to improve accessibility.

HTML

    
    
    Bold and Italic Text Example


    Welcome to Bold and Italic Text
     >This is a bold word and this is an italic word.

Hint

Use the aria-label attribute inside the <p> tag to describe the content for screen readers.

Practice

1. Which HTML tag is used to make text bold to show importance?

easy

A. <em>

B. <strong>

C. <b>

D. <i>

Solution

1. Step 1: Understand the purpose of <strong> tag

   The <strong> tag is used to indicate that the text is important and should be displayed in bold.

2. Step 2: Compare with other tags

   The <em> tag is for emphasis (italic), <b> and <i> are purely visual without semantic meaning.

3. Final Answer:

   <strong> -> Option B

4. Quick Check:

   Bold importance = <strong> [OK]

Hint: Use <strong> for bold importance, not just style [OK]

Common Mistakes:

• Using <b> instead of <strong>
• Confusing <em> with bold
• Using <i> for bold text

2. Which of the following is the correct HTML syntax to make text italic for emphasis?

easy

A. <i>This is bold</i>

B. <strong>This is italic</strong>

C. <b>This is italic</b>

D. <em>This is italic</em>

Solution

1. Step 1: Identify the tag for italic emphasis

   The <em> tag is used to emphasize text, which browsers usually show as italic.

2. Step 2: Check the syntax correctness

   The syntax <em>This is italic</em> correctly wraps the text with opening and closing tags.

3. Final Answer:

   <em>This is italic</em> -> Option D

4. Quick Check:

   Italic emphasis = <em> [OK]

Hint: Use <em> tags for italic emphasis, not <b> or <strong> [OK]

Common Mistakes:

• Using <strong> for italic
• Using <b> instead of <em>
• Mixing <i> and <em> meaning

3. What will be the visual output of this HTML snippet?

<p>This is <strong>very</strong> important and <em>emphasized</em> text.</p>

medium

A. This is very important and emphasized text. (with 'very' bold and 'emphasized' italic)

B. This is very important and emphasized text. (all normal text)

C. This is very important and emphasized text. (all bold text)

D. This is very important and emphasized text. (all italic text)

Solution

1. Step 1: Identify the effect of <strong> tag

   The word 'very' inside <strong> will appear bold to show importance.

2. Step 2: Identify the effect of <em> tag

   The word 'emphasized' inside <em> will appear italic to show emphasis.

3. Final Answer:

   This is very important and emphasized text. (with 'very' bold and 'emphasized' italic) -> Option A

4. Quick Check:

   <strong> = bold, <em> = italic [OK]

Hint: Remember <strong> bolds, <em> italicizes text [OK]

Common Mistakes:

• Thinking <strong> italicizes
• Assuming all text is styled
• Confusing <em> with bold

4. Find the error in this HTML snippet that tries to make text bold and italic:

<p>This is <strong>very <em>important</strong> text</em>.</p>

medium

A. Tags are properly nested and correct

B. <strong> tag should be replaced with <b>

C. <em> tag is closed after </strong>, breaking nesting

D. Missing closing <em> tag

Solution

1. Step 1: Check tag nesting order

   The <strong> tag opens before <em>, but closes before </em> which breaks proper nesting.

2. Step 2: Understand correct nesting

   Tags must close in reverse order of opening: <strong><em>...</em></strong>.

3. Final Answer:

   <em> tag is closed after </strong>, breaking nesting -> Option C

4. Quick Check:

   Proper nesting = tags close in reverse order [OK]

Hint: Close inner tags before outer tags to fix nesting [OK]

Common Mistakes:

• Closing tags in wrong order
• Replacing semantic tags with visual ones
• Forgetting to close tags

5. You want to emphasize a word that is both important and emphasized. Which is the best way to write it in HTML?

hard

A. <strong><em>Word</em></strong>

B. <em><strong>Word</strong></em>

C. <b><i>Word</i></b>

D. <em>Word</em><strong>Word</strong>

Solution

1. Step 1: Understand semantic meaning of tags

   <strong> means important (bold), <em> means emphasis (italic).

2. Step 2: Nest tags correctly for combined effect

   Nesting <em> inside <strong> is correct and keeps semantic meaning clear.

3. Step 3: Avoid using <b> and <i> for meaning

   <b> and <i> are only visual, not semantic, so less accessible.

4. Final Answer:

   <strong><em>Word</em></strong> -> Option A

5. Quick Check:

   Semantic nesting <strong><em> = bold + italic [OK]

Hint: Nest <em> inside <strong> for combined bold and italic [OK]

Common Mistakes:

• Using <b> and <i> instead of semantic tags
• Incorrect tag nesting order
• Separating tags instead of nesting