Inline elements in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the word italic using an inline element.

HTML

<p>This is an [1] element example.</p>

Drag options to blanks, or click blank then click option'

Adiv

Bem

Csection

Darticle

Attempts:

3 left

💡 Hint

Common Mistakes

Using block elements like

or

which break the line.

Confusing with which makes text bold.

The em tag is an inline element used to emphasize text, usually rendering it in italics.

2fill in blank

medium

Complete the code to make the word bold using an inline element.

HTML

<p>This word is [1].</p>

Drag options to blanks, or click blank then click option'

Astrong

Bdiv

Cem

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using block elements like

which break the line.

Using which italicizes but does not bold.

The tag is an inline element used to make text bold and indicate strong importance.

3fill in blank

hard

Fix the error in the code to correctly underline the text using an inline element.

HTML

<p>This is an [1] text example.</p>

Drag options to blanks, or click blank then click option'

Au

Bunderline

Cdiv

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'underline' which is not a valid HTML tag.

Using without CSS to underline text.

The tag is the correct inline element to underline text in HTML.

4fill in blank

hard

Fill both blanks to create a sentence where the first word is italic and the second word is bold.

HTML

<p><[1]>Hello</[1]> <[2]>World</[2]></p>

Drag options to blanks, or click blank then click option'

Aem

Bdiv

Cstrong

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using block elements like

or

which break the line.

Mixing up the tags and their purposes.

The tag italicizes text and the tag makes text bold. Both are inline elements.

5fill in blank

hard

Fill all three blanks to create a sentence with an inline link, italic text, and bold text.

HTML

<p><a href="#">[1]</a> is <[2]>important</[2]> and <[3]>strong</[3]> text.</p>

Drag options to blanks, or click blank then click option'

AClick here

Bem

Cstrong

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using block elements inside the paragraph.

Confusing the order of and tags.

The tag creates a clickable link, italicizes text, and makes text bold. All are inline elements.

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