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.