Inline elements in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the inline element

Which of the following HTML tags is an inline element by default?

A <div>

B <span>

C <section>

D <article>

💡 Hint

Think about elements that do not start on a new line and are used inside text.

The <span> tag is an inline element used to style parts of text without breaking the flow. <div>, <section>, and <article> are block-level elements that start on a new line.

📝 Syntax

intermediate

Correct inline element usage

Which option correctly uses inline elements to emphasize text within a paragraph?

HTML

<p>This is a <em>very</em> important message.</p>

A <p>This is a <em>very</em> important message.</p>

B <p>This is a <div>very</div> important message.</p>

C <p>This is a <section>very</section> important message.</p>

D <p>This is a <article>very</article> important message.</p>

💡 Hint

Inline elements can be placed inside paragraphs without breaking the line.

The <em> tag is inline and used to emphasize text. Using block elements like <div>, <section>, or <article> inside a paragraph is invalid and breaks the flow.

❓ rendering

advanced

Visual difference between inline and block elements

What will you see in the browser when rendering this HTML?

<div>Block 1</div><span>Inline 1</span><div>Block 2</div><span>Inline 2</span>

HTML

<div>Block 1</div><span>Inline 1</span><div>Block 2</div><span>Inline 2</span>

A Block 1 on its own line, Inline 1 next to it, Block 2 on a new line, Inline 2 next to Block 2

B All four elements appear on the same line

C Block 1 and Block 2 appear on the same line, Inline 1 and Inline 2 each on new lines

D Block 1 and Inline 1 on one line, Block 2 and Inline 2 on the next line

💡 Hint

Block elements start on new lines, inline elements flow within lines.

Block elements like <div> start on new lines, so 'Block 1' and 'Block 2' appear each on their own line. Inline elements like <span> appear next to text on the same line.

❓ selector

advanced

CSS selector for inline elements

Which CSS selector will select all inline elements inside a container with id 'content'?

A #content div, #content section, #content article

B #content > *:not(div):not(section):not(article)

C #content span, #content em, #content a

D #content block

💡 Hint

Inline elements include tags like span, em, and a.

Option C selects common inline elements inside #content. Option C tries to exclude block elements but is complex and incomplete. Option C selects block elements. Option C is invalid.

❓ accessibility

expert

Accessibility of inline elements

Which practice improves accessibility when using inline elements for emphasis?

A Use &lt;span&gt; with CSS color change only, no semantic tags

B Use &lt;div&gt; with aria-label for emphasis

C Use inline styles with font-weight:bold on &lt;span&gt; without semantic tags

D Use &lt;em&gt; or &lt;strong&gt; tags to convey emphasis semantically

💡 Hint

Screen readers rely on semantic tags to understand emphasis.

Using semantic tags like <em> or <strong> helps screen readers announce emphasis. Styling alone with <span> or <div> does not convey meaning to assistive technologies.

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