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

Need a 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


    

Need a 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
    

Need a 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.

Need a hint?

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