HTML Inline Elements: Syntax, Usage, and Examples

HTML inline elements keep content within the same line and take up only as much width as necessary. Unlike block elements, they do not force a line break before and after them, allowing content to flow naturally within a paragraph or other text-based structures.

How to Use HTML Inline Elements

You can use inline elements to apply formatting, create links, and add interactive elements within a line of text.

Basic Syntax

<p>This is an <strong>inline element</strong> inside a paragraph.</p>

In this example, the <strong> tag bolds the text while keeping it within the paragraph, preserving the natural flow.

Common HTML Inline Elements

• <a> – Creates a hyperlink
• <b> – Makes text bold
• <i> – Italicizes text
• <span> – Wraps content for styling or scripting
• <strong> – Highlights important text (bold)
• <em> – Emphasizes text (italic)
• <img> – Embeds an image
• <code> – Displays inline code

When to Use HTML Inline Elements

Use inline elements when you need to modify or structure text without affecting the document’s layout.

Styling and Formatting Text

You can apply inline styles to text within paragraphs.

<p>This <em>italicized</em> word adds emphasis.</p>

The <em> tag italicizes the word while keeping the sentence structure intact.

Adding Hyperlinks

Since links integrate smoothly with surrounding text, the <a> tag works as an inline element.

<p>Visit <a href="https://www.example.com">our website</a> for more details.</p>

This approach makes only the linked text clickable instead of affecting the entire paragraph.

Embedding Media

When you insert an image within text, the <img> tag keeps it inline.

<p>Our logo: <img src="logo.png" alt="Company Logo" width="100"></p>

This ensures the image aligns with the text instead of appearing on a new line.

Examples of HTML Inline Elements

Using a <span> for Inline Styling

A <span> element lets you apply CSS styles to specific words or sections of text.

<p>The sky is <span style="color:blue;">blue</span> today.</p>

This changes the color of the selected word while leaving the rest of the sentence unchanged.

Using Inline Elements in Links

<p>Click <a href="https://example.com">here</a> to read more.</p>

Since the <a> tag is inline, only the linked word becomes clickable, rather than the entire paragraph.

Using Inline Elements for Code Blocks

<p>Use the <code>display: inline</code> property for inline elements.</p>

The <code> tag highlights programming syntax while keeping the text inline.

Learn More About Inline Elements in HTML

Block and Inline Elements in HTML

Block elements, such as <div> and <p>, create new sections, while inline elements blend seamlessly within the content.

<p>This is a <span style="color:red;">red word</span> in a sentence.</p>

Unlike a <div>, which forces a new line, <span> keeps text inline.

HTML Block vs. Inline Elements

Block elements start on a new line, while inline elements remain within a text flow.

• Block elements: <div>, <p>, <h1> - <h6>, <ul>, <table>
• Inline elements: <a>, <span>, <strong>, <em>, <img>

Transforming Block Elements into Inline

You can use CSS to change a block element into an inline element.

<style>
  div {
    display: inline;
  }
</style>
<div>This div is now inline.</div>

This forces the <div> to behave like an inline element.

HTML inline elements let you format, structure, and embed content efficiently while keeping the document clean.