Bird
Raised Fist0
HTMLmarkup~5 mins

Inline elements in HTML

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Inline elements let you style or organize small parts of text or content without breaking the flow of the paragraph or line.

When you want to emphasize a word inside a sentence, like making it bold or italic.
When adding a link inside a paragraph without starting a new line.
When inserting an image or icon inside a line of text.
When you want to style a few words differently without affecting the whole block.
When you need to add a tooltip or small interactive element inside text.
Syntax
HTML
<tagname>content</tagname>
Inline elements do not start on a new line and only take up as much width as necessary.
Common inline tags include , , , , and .
Sample Program

This example shows different inline elements inside paragraphs. The text stays on the same line except where it naturally wraps. The strong and em tags style words bold and italic. The a tag creates a clickable link with an accessible label. The span adds a yellow background highlight. The img tag inserts a small icon aligned with the text.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline Elements Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>This is a <strong>bold</strong> word, an <em>italic</em> word, and a <a href="https://example.com" aria-label="Example website">link</a> inside a sentence.</p>
  <p>Here is a <span class="highlight">highlighted text</span> inside the paragraph.</p>
  <p>And here is an inline image <img src="https://via.placeholder.com/20" alt="small icon" style="vertical-align: middle;"> inside text.</p>
</body>
</html>
OutputSuccess

Practice

(1/5)
2. Which of the following is the correct syntax to make text italic using a semantic inline element?
easy

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

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

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

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