HTML inline elements are elements that normally appear within the same line as surrounding text. Unlike block elements, inline elements do not typically start on a new line or occupy the full width of their parent container.

Inline elements are commonly used to format text, create hyperlinks, emphasize words, display images, and add meaning to specific parts of a sentence.

For example, HTML elements such as <span>, <a>, <strong>, <em>, and <img> normally have inline display behavior.

In this tutorial, you will learn what HTML inline elements are, explore common examples, understand the difference between inline and block elements, and discover how to control inline elements using CSS.

What Are HTML Inline Elements?

HTML inline elements are elements whose default CSS display behavior is generally inline. They flow within the surrounding content and take up the space required by their content rather than automatically occupying the full available width.

For example:

<p>
  Learn <strong>HTML</strong> to create webpages.
</p>

In this example, the <strong> element emphasizes the word “HTML” without starting a new line.

Inline elements are useful when you want to format or identify part of a sentence without separating it into a new block.

Examples of HTML Inline Elements

HTML provides several inline elements for text formatting, links, images, and other content.

HTML Element	Purpose
<a>	Creates a hyperlink
<span>	Groups inline content for styling
<strong>	Indicates strong importance
<em>	Adds emphasis
<b>	Draws attention to text without adding importance
<i>	Represents text in an alternate voice or mood
<mark>	Highlights text
<small>	Represents side comments or fine print
<sub>	Displays subscript text
<sup>	Displays superscript text
<code>	Represents a fragment of computer code
<br>	Creates a line break
<img>	Embeds an image
<label>	Labels a form control

These elements have different semantic purposes, even when they share similar default display behavior.

HTML Inline Elements Example

The following example demonstrates how inline elements appear within a paragraph.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Inline Elements</title>
</head>
<body>

  <h1>HTML Inline Elements</h1>

  <p>
    Learn <strong>HTML</strong> to build webpages.
    Visit <a href="https://web4learners.com/">Web4Learners</a>
    for tutorials.
  </p>

  <p>
    HTML supports <em>emphasized text</em> and
    <mark>highlighted text</mark>.
  </p>

</body>
</html>

In this example:

• <strong> marks important text.
• <a> creates a clickable hyperlink.
• <em> adds emphasis.
• <mark> highlights text.

These elements normally remain within their paragraphs instead of creating separate blocks.

The HTML <span> Element

The <span> element is a generic inline container. It does not add a specific meaning to its content, but it allows you to apply CSS styles to selected words or phrases.

<p>
  HTML is a <span style="color: blue;">markup language</span>
  used to structure webpages.
</p>

In this example, the <span> element applies blue text color to the words “markup language”.

You can also use CSS classes to style inline content.

<style>
  .highlight {
    color: #0878d1;
    font-weight: bold;
  }
</style>

<p>
  Learn <span class="highlight">HTML and CSS</span>
  to create webpages.
</p>

The highlight class makes the selected words blue and bold without changing the paragraph’s overall layout.

HTML Inline Links

The <a> element creates a hyperlink to another webpage, a file, an email address, or a specific location within a page.

<p>
  Visit <a href="https://web4learners.com/">Web4Learners</a>
  to explore web development tutorials.
</p>

The linked text appears within the paragraph and normally does not start a new line.

You can style links using CSS.

<style>
  a {
    color: #0878d1;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
</style>

This example removes the default underline and adds an underline when the user hovers over a link.

Learn more in our HTML Links tutorial.

HTML Inline Text Formatting Elements

HTML includes several inline elements for formatting text and communicating its meaning.

The <strong> Element

The <strong> element indicates that its content has strong importance. Browsers typically display it in bold.

<p>
  <strong>Important:</strong> Save your work regularly.
</p>

Use <strong> when the content is important, rather than using it only to make text bold.

The <em> Element

The <em> element indicates emphasis. Browsers typically display emphasized text in italics.

<p>
  You should <em>always</em> check your HTML code.
</p>

The emphasis can affect how assistive technologies interpret the sentence.

The <mark> Element

The <mark> element highlights text that is relevant in a particular context.

<p>
  Learn <mark>HTML inline elements</mark> with practical examples.
</p>

Browsers usually display marked text with a highlighted background.

The <small> Element

The <small> element represents side comments, fine print, or similar content.

<p>
  Course Price: ₹999
  <small>Taxes may apply.</small>
</p>

The text inside <small> normally appears smaller than the surrounding text.

The <sub> and <sup> Elements

The <sub> element displays subscript text, while <sup> displays superscript text.

<p>Water formula: H<sub>2</sub>O</p>

<p>Mathematical expression: x<sup>2</sup></p>

These elements are useful for chemical formulas, mathematical expressions, and footnote markers.

HTML Inline Images

The <img> element embeds an image in a webpage. It normally behaves as an inline-level element, although its layout can be changed using CSS.

<p>
  HTML makes it possible to add images:
  <img src="html-logo.png" alt="HTML logo" width="50">
</p>

The image appears within the paragraph’s text flow.

Always provide meaningful alternative text through the alt attribute when the image conveys information. Use an empty alt value for purely decorative images.

You can control image dimensions and alignment using CSS.

<style>
  .inline-image {
    width: 50px;
    height: auto;
    vertical-align: middle;
  }
</style>

<p>
  Learn HTML
  <img class="inline-image" src="html-logo.png" alt="HTML logo">
  with practical examples.
</p>

The vertical-align: middle property aligns the image more closely with the surrounding text.

HTML Inline Elements and Line Breaks

The <br> element creates a line break without starting a new paragraph. It is useful when a line break is part of the content, such as in an address or poem.

<p>
  Web4Learners<br>
  HTML Tutorials<br>
  Learn Web Development
</p>

Each <br> moves the following content to the next line.

Use <br> for meaningful line breaks, not to create large gaps between sections. Use CSS margins and padding for spacing.

Difference Between HTML Inline and Block Elements

Inline and block elements have different default layout behaviors.

Block elements normally start on a new line and occupy the available width of their containing block. Inline elements usually flow within a line of text and occupy the space required by their content.

Feature	Inline Elements	Block Elements
New line	Normally stay within the current line	Normally start on a new line
Width	Usually fit their content	Usually fill the available width
Common purpose	Format text or link content	Organize sections and content
Examples	<span>, <a>, <strong>	<div>, <p>, <section>

Example:

<p>
  This is a paragraph with
  <span>inline content</span>
  inside it.
</p>

<div>This is a block element.</div>
<div>This is another block element.</div>

The <span> remains within the paragraph’s text flow. Each <div> normally appears on a separate line.

Remember that CSS can change an element’s display behavior.

Changing Inline Elements with CSS

The CSS display property controls how an element participates in layout. You can change an inline element to block, inline-block, flex, or another supported display type.

Using display: block

The block value makes an inline element behave like a block element.

<style>
  .inline-box {
    display: block;
    background-color: #eaf4ff;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>

<span class="inline-box">First item</span>
<span class="inline-box">Second item</span>

Each <span> behaves like a block-level box and normally starts on a new line.

Using display: inline-block

The inline-block value allows an element to flow alongside other inline-level content while supporting width and height.

<style>
  .tag {
    display: inline-block;
    padding: 8px 12px;
    margin: 4px;
    background-color: #eaf4ff;
    border-radius: 5px;
  }
</style>

<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>

The labels can appear on the same line when sufficient space is available. They can also have explicit widths and heights.

Using display: none

The none value removes an element from the layout.

<style>
  .hidden-text {
    display: none;
  }
</style>

<p>
  This is visible text.
  <span class="hidden-text">This text is hidden.</span>
</p>

The hidden span does not appear and does not occupy space in the layout.

Common HTML Inline Element Mistakes

Avoid these common mistakes when working with inline elements:

• Assuming all HTML elements are inline by default.
• Using <span> when a semantic element would communicate the content’s meaning more clearly.
• Using <br> repeatedly to create spacing instead of using CSS.
• Forgetting that the default display behavior can be changed with CSS.
• Using <strong> and <em> only for their visual appearance rather than their meaning.
• Forgetting alternative text for meaningful images.
• Assuming ordinary inline elements handle width and height in the same way as block elements.