Inline elements in HTML - Mini Project: Build & Apply

Using Inline Elements in HTML

📖 Scenario: You are creating a simple webpage paragraph that highlights certain words using inline elements. Inline elements let you style or emphasize parts of text without breaking the flow.

🎯 Goal: Build a paragraph using inline HTML elements: <em> for emphasis, <strong> for strong importance, and <code> for code snippets.

📋 What You'll Learn

Create a paragraph with the exact text: "This is an example of inline elements: emphasis, strong importance, and code."

Wrap the word "emphasis" with the <em> tag.

Wrap the words "strong importance" with the <strong> tag.

Wrap the word "code" with the <code> tag.

Use semantic HTML5 structure with <main> and <section>.

💡 Why This Matters

🌍 Real World

Inline elements are used every day in webpages to emphasize text, show code snippets, or highlight important information without breaking the paragraph flow.

💼 Career

Knowing how to use inline HTML elements correctly is essential for web developers to create accessible, semantic, and well-structured content.

1

Create the basic HTML structure with a paragraph

Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and a <main> element containing a <section> with a paragraph. The paragraph text must be exactly: "This is an example of inline elements: emphasis, strong importance, and code."

HTML

    
    Inline Elements Example




This is an example of inline elements: emphasis, strong importance, and code.

Need a hint?

Start with the basic HTML5 page structure. Put the paragraph inside <main> and <section>.

2

Add <em> tag around the word 'emphasis'

Inside the paragraph, wrap the word emphasis with the <em> tag to show emphasis.

HTML

    
    Inline Elements Example




This is an example of inline elements: emphasis, strong importance, and code.

Need a hint?

Use the <em> tag exactly around the word emphasis inside the paragraph.

3

Add <strong> tag around 'strong importance'

In the paragraph, wrap the words strong importance with the <strong> tag to show strong importance.

HTML

    
    Inline Elements Example




This is an example of inline elements: emphasis, strong importance, and code.

Need a hint?

Use the <strong> tag exactly around the words strong importance inside the paragraph.

4

Add <code> tag around the word 'code'

Finally, wrap the word code in the paragraph with the <code> tag to show it as a code snippet.

HTML

    
    Inline Elements Example




This is an example of inline elements: emphasis, strong importance, and 'code'.

Need a hint?

Use the <code> tag exactly around the word code inside the paragraph.