HTML Span <span>

In HTML, there are no default tags that allow us to style text.

This is where the span tag comes in.

The <span> tag allows us to select an inline portion of code to which we can later apply CSS styling.

Span tags are inline elements, meaning we wrap them around portions of text that we want to style vs div tags which can be wrapped around entire blocks.

Usage

Use a unique ‘id’ within the span so that each one can be identified when needed.

Examples below.

Code:


<!DOCTYPE html>
<html>
<head>
<!-- This is the stylesheet John created in 2020 -->
<link rel="stylesheet" href="/file/stylesheet.css">
</head>

<body>

<p>Welcome <span class="blue">to my webpage</span> and paragraph 1.</p>

<p>I have so much to say I'm going to need a lot of paragraphs!</p>

</body>

</html>

Output:

Welcome to my webpage and paragraph 1.

I have so much to say I’m going to need a lot of paragraphs!


As you can see, there is no change in the output, however the copy ‘to my webpage’ can now be styled via CSS, changing the color, size, changing the font-weight and much more.