In this lab, you will learn how to use HTML <span> tags to create inline text styling and enhance the visual presentation of web content. The lab focuses on understanding the purpose of span tags, creating a basic HTML document structure, and applying custom inline styles to specific text segments.
Through a practical, evolving example, you will explore how span tags can be used to target and style small portions of text without disrupting the document's flow. By the end of this lab, you will be able to apply custom text colors, backgrounds, and other inline styling techniques using HTML span elements, providing more dynamic and visually appealing text formatting in your web pages. We will build upon a single HTML file throughout this lab, gradually adding more features and styles.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"])
html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"])
html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"])
html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"])
html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`")
html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`")
html/TextContentandFormattingGroup -.-> html/text_dir("`Text Direction`")
html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`")
html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`")
subgraph Lab Skills
html/basic_elems -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}}
html/text_head -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}}
html/text_dir -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}}
html/doc_flow -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}}
html/inter_elems -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}}
end
Understanding the Purpose of Span Tags
In this step, you'll learn about the purpose and functionality of <span> tags in HTML. <span> tags are inline-level elements. This means they are designed to work within the flow of a text, unlike block-level elements like <p> or <div> which create line breaks before and after them. <span> tags allow you to apply specific styling or add semantic meaning to a small portion of text within a larger block of content.
Think of it like highlighting a specific word in a sentence with a marker. The <span> tag acts like that marker, allowing you to target that specific word for styling.
They are particularly useful for:
Applying inline styles: Changing the appearance of specific words or phrases.
Adding custom formatting: Making parts of the text bold, italic, colored, etc.
Highlighting specific text: Drawing attention to important parts of your content.
Targeting small text segments for JavaScript or CSS manipulation: Giving you precise control over individual pieces of text.
Let's create a simple HTML file to demonstrate the use of <span> tags. Open the WebIDE and create a new file called styling-example.html in the ~/project directory. This file will be our canvas for the rest of the lab.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>This line contains a <span>special</span> word.</p>
</body>
</html>
In this example, the <span> tag wraps around the word "special". Right now, it doesn't change the appearance, but it marks that word as something we can style later.
Notes: Learn more about How to preview HTML files in the WebIDE. Take a moment to preview styling-example.html in the WebIDE. You'll see both paragraphs displayed normally. The <span> tag, by itself, doesn't change how the text looks.
Applying Basic Inline Styling
Now, let's make the word "special" stand out. In this step, you'll learn how to apply inline styling directly to the <span> element using the style attribute. Inline styling means adding CSS properties directly within the HTML tag.
Open the styling-example.html file in the WebIDE and modify the <span> tag like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a <span style="font-weight: bold;">special</span> word.
</p>
</body>
</html>
We've added the style attribute to the <span> tag. Inside the style attribute, we've written font-weight: bold;. This is a basic CSS property that makes the text bold.
Here's a breakdown:
style=" ... ": This is the HTML attribute that allows you to apply CSS rules directly to this element.
font-weight: bold;: This is a CSS declaration.
font-weight: This is the CSS property that controls how bold the text is.
bold: This is the value we're assigning to the font-weight property.
;: The semicolon is important! It separates different CSS declarations within the style attribute. If you want to add more styles later, you'll need to separate them with semicolons.
Preview styling-example.html in the WebIDE again. You should now see the word "special" in bold. This demonstrates how <span> tags allow you to target specific text for styling.
Adding More Inline Styles
Let's make the styling more interesting. You can apply multiple inline styles to a single <span> tag. In this step, we'll add italics and underline to our "special" word.
Open styling-example.html in the WebIDE and modify the <span> tag to include more styles:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline;"
>special</span
>
word.
</p>
</body>
</html>
We've added two more CSS declarations within the style attribute, separated by semicolons:
font-style: italic;: This makes the text italic.
text-decoration: underline;: This adds an underline to the text.
Remember the semicolon after each declaration! It's crucial for the browser to understand where one style ends and the next begins.
Preview styling-example.html. The word "special" should now be bold, italicized, and underlined. This shows the power of combining multiple inline styles with the <span> tag.
Customizing Text Color and Background
Now let's change the colors of the text and its background. In this step, you'll learn how to use the color and background-color CSS properties within the style attribute of the <span> tag.
Open styling-example.html and modify the <span> tag again:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
>special</span
>
word.
</p>
</body>
</html>
We've added two new CSS declarations:
color: blue;: This sets the text color to blue. You can use various color names (like red, green, black, etc.) or hexadecimal color codes (like #FF0000 for red).
background-color: lightyellow;: This sets the background color of the span to light yellow. Similar to color, you can use named colors or hexadecimal codes.
Preview styling-example.html. The word "special" should now be bold, italicized, underlined, blue, and have a light yellow background. This demonstrates how you can significantly change the appearance of specific text using <span> tags and inline styles.
A More Practical Example
Let's see how you might use <span> tags in a more realistic scenario. Imagine you're creating a product description. You might want to highlight certain features or the price.
Open styling-example.html and replace its content with the following:
We've used <span> to make the price larger and red. Notice the font-size property here, showing you can control text size too! The em unit is a relative unit, making the text size relative to the parent element's font size.
We've used <span> to highlight a special offer with a background color and padding. padding adds space around the text within the background color.
Preview styling-example.html. You'll see how <span> tags can be used to add visual emphasis and structure to your content, making it more engaging and easier to read.
Summary
In this lab, you've learned about the purpose and implementation of HTML <span> tags, focusing on their role in applying inline text styling. You've seen how <span> tags, as inline-level elements, allow you to target and style specific portions of text without disrupting the overall flow of your document.
You practiced creating a basic HTML document and progressively added inline styles using the style attribute within <span> tags. You explored various CSS properties like font-weight, font-style, text-decoration, color, and background-color, learning how to combine them to achieve different visual effects. Finally, you applied your knowledge to create a more practical product description example, demonstrating how <span> tags can enhance the presentation and readability of your web content. You are now equipped to use <span> tags effectively to add dynamic and visually appealing text formatting to your web pages.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy