Inline elements in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are inline elements in HTML?

Inline elements are HTML elements that do not start on a new line and only take up as much width as necessary. They flow within the text.

beginner

Name three common inline elements in HTML.

Common inline elements include <span>, <a>, and <strong>.

beginner

How do inline elements differ from block elements?

Inline elements stay within the line and do not break the flow, while block elements start on a new line and take full width by default.

intermediate

Can inline elements contain block elements inside them?

No, inline elements should not contain block elements. This can cause unexpected layout issues.

beginner

What is the purpose of the <span> element?

<span> is an inline element used to group text or other inline elements for styling or scripting without affecting layout.

Which of the following is an inline element?

A <code>&lt;em&gt;</code>

B <code>&lt;div&gt;</code>

C <code>&lt;section&gt;</code>

D <code>&lt;article&gt;</code>

<em> is an inline element used for emphasis. <div>, <section>, and <article> are block elements.

What happens when you put a block element inside an inline element?

A It works perfectly with no issues.

B The block element will be ignored.

C It can cause layout problems and is invalid HTML.

D The inline element becomes a block element automatically.

Putting block elements inside inline elements is invalid HTML and can cause layout problems.

Which inline element is best for adding a link inside a paragraph?

A <code>&lt;a&gt;</code>

B <code>&lt;section&gt;</code>

C <code>&lt;span&gt;</code>

D <code>&lt;div&gt;</code>

<a> is the inline element used to create hyperlinks.

Inline elements by default:

A Start on a new line and take full width.

B Always have a border.

C Are invisible in the browser.

D Do not start on a new line and take only needed width.

Inline elements flow within text and only take as much width as needed.

Which inline element is used to apply styles or scripts to part of text without changing layout?

A <code>&lt;div&gt;</code>

B <code>&lt;span&gt;</code>

C <code>&lt;header&gt;</code>

D <code>&lt;footer&gt;</code>

<span> is an inline element used for grouping inline content for styling or scripting.

Explain what inline elements are and how they behave in HTML layout.

Think about how text flows naturally in a sentence.

List some common inline elements and describe a use case for each.

Consider elements you use inside paragraphs.

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