HTML5: How to define a span in a document ?

Last update on February 12 2024 12:51:51 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to define a span in a document</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<p>HTML, stands for <!-- Paragraph with text explaining HTML -->
<span style="color:red;font-weight:bold">Hyper Text Markup Language</span><!-- Span element with red color and bold font weight applied -->
</p><!-- End of paragraph -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a paragraph containing text about HTML.
Within the paragraph, a <span> element is used to apply specific styling to a portion of the text.
The style attribute in the <span> tag specifies inline CSS styles to change the color to red and make the text bold.
The text "Hyper Text Markup Language" within the <span> element will appear in red color and bold font weight, while the rest of the paragraph text remains unaffected.
The <span> element is commonly used to apply styles to small sections of text within larger blocks of content.

Live Demo:

See the Pen span-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go To Home page