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.

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.

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.

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'.

Hint

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

Practice

1. Which of the following is an inline element in HTML?

easy

A. <article>

B. <div>

C. <section>

D. <span>

Solution

1. Step 1: Understand inline vs block elements

   Inline elements do not start on a new line and only take up as much width as necessary.

2. Step 2: Identify the inline element among options

   <span> is an inline element, while <div>, <section>, and <article> are block elements.

3. Final Answer:

   <span> -> Option D

4. Quick Check:

   Inline element = <span> [OK]

Hint: Inline tags don't break lines, block tags do [OK]

Common Mistakes:

• Confusing <span> with <div>
• Thinking <section> is inline
• Assuming all tags are inline

2. Which of the following is the correct syntax to make text italic using a semantic inline element?

easy

A. <i>Text</i>

B. <italic>Text</italic>

C. <em>Text</em>

D. <strong>Text</strong>

Solution

1. Step 1: Identify inline tags for italic style

   The <em> tag is used to emphasize text, typically rendering it in italics.

2. Step 2: Check other options

   <i> also italicizes but <em> is preferred for meaning; <strong> is for strong importance; <italic> is not a valid tag.

3. Final Answer:

   <em>Text</em> -> Option C

4. Quick Check:

   Italic inline tag = <em> [OK]

Hint: Use <em> for emphasis italics, not <italic> [OK]

Common Mistakes:

• Using non-existent <italic> tag
• Confusing <strong> with italic
• Choosing <i> over <em> without meaning

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

<p>Hello <strong>World</strong>!</p>

medium

A. Hello World! (with 'World' bolded)

B. Hello World! (all normal text)

C. Hello World! (tags visible)

D. Hello World! (with 'World' italicized)

Solution

1. Step 1: Understand the tag effect

   The <strong> tag makes text bold and emphasizes it.

2. Step 2: Visualize the output

   The word 'World' inside <strong> will appear bold, while the rest remains normal.

3. Final Answer:

   Hello World! (with 'World' bolded) -> Option A

4. Quick Check:

   <strong> = bold text [OK]

Hint: Strong tag makes text bold without breaking line [OK]

Common Mistakes:

• Thinking <strong> italicizes text
• Expecting tags to show as text
• Assuming whole sentence is bold

4. Find the error in this HTML snippet:

<p>Click <a href='https://example.com'>here</p></a>

medium

A. The <p> tag cannot contain inline elements

B. The <a> tag is not closed properly inside <p>

C. The href attribute is missing quotes

D. The <a> tag should wrap the entire paragraph

Solution

1. Step 1: Check tag nesting rules

   Inline elements like <a> must be properly opened and closed inside block elements like <p>.

2. Step 2: Identify the error in closing tags

   The <a> tag is opened inside <p> but closed after </p>, which breaks proper nesting.

3. Final Answer:

   The <a> tag is not closed properly inside <p> -> Option B

4. Quick Check:

   Inline tags must close before block ends [OK]

Hint: Close inline tags before closing block tags [OK]

Common Mistakes:

• Closing <a> after

• Thinking <p> can't contain inline tags
• Ignoring tag nesting order

5. You want to style only a few words inside a paragraph differently without breaking the line. Which inline element is best to use?

hard

A. <span>

B. <article>

C. <section>

D. <div>

Solution

1. Step 1: Understand the purpose of inline styling

   To style small parts of text without breaking lines, an inline element that does not create new blocks is needed.

2. Step 2: Identify the best inline element for styling

   <span> is a generic inline container used to apply styles or classes to parts of text without affecting layout.

3. Final Answer:

   <span> -> Option A

4. Quick Check:

   Use <span> for inline styling [OK]

Hint: Use <span> to style text inline without line breaks [OK]

Common Mistakes:

• Using block tags like <div> for inline styling
• Confusing <section> or <article> with inline tags
• Trying to style text without a container