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.