HTML <span> Element

The <span> element is an inline container used to style or manipulate part of text inside other elements like paragraphs, headings, or divs. Unlike <div>, it does not start on a new line.

1. Basic Usage

You can use <span> to highlight text:

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

This is a red word.

2. Styling Text Inside a Paragraph

You can change font, background, size, or any style for part of a paragraph:

<p>Hello, <span style="background-color:yellow">world</span>!</p>

Hello, world!

3. Using Class or ID with Span

Better way is to use class or id for styling:

<style>
  .highlight { color:blue; font-weight:bold; }
</style>

<p>This is a <span class="highlight">blue</span> word.</p>

This is a blue word.

4. Difference Between Div and Span

Div: Block element, starts on new line, used for grouping sections.
Span: Inline element, stays in the same line, used for styling part of text.

Next Lesson → HTML Class Attribute

Previous Lesson → HTML <div> Element