Inline Spans
Part of the Fundamentals section of Coddy's HTML journey — lesson 26 of 60.
What if we have a sentence and need to highlight just one word or a small part of it? We can use the <span> tag! It helps us apply styles or make changes to only a specific part of the text without affecting the rest.
Here's the basic syntax for using a span in HTML:
<span>This is some text.</span>Here's an example of how to use span tags to highlight a portion of text within a paragraph:
<p>This is a <span style="color: blue;">blue</span> word.</p>In this example, the word "blue" will be displayed in blue color.
We will learn about the style attribute later on!
Challenge
EasyGiven an HTML document with a paragraph. Your task is to use a <span> tag to wrap the text "qwerty12345".
Cheat sheet
The <span> tag is used to apply styles or make changes to a specific part of text without affecting the rest.
Basic syntax:
<span>This is some text.</span>Example with inline styling:
<p>This is a <span style="color: blue;">blue</span> word.</p>Try it yourself
<!DOCTYPE html>
<html>
<body>
<!-- Write code here -->
<p>The secret password is qwerty12345.</p>
</body>
</html>
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Fundamentals
2Text and Formatting
HeadingsParagraphsLine BreaksBold and Italic TextBold and Italic AgainRecap - Formatting8Forms and Inputs Part 1
Form BasicsText InputsInput AttributesPassword FieldLabels for InputsRecap - Basic Form11Event Registration Page
Project OverviewHeader Section
Event Details SectionRegistration FormFooter Section9Forms and Inputs Part 2
Radio ButtonsCheckboxesDropdownsButtonsButtons in FormsRecap - Forms #1Recap - Forms #2