span
A generic inline container.
Platform under construction
HTML Span
Learn HTML Span with practical examples for structure, layout semantics, metadata, embedded content, scripts, accessibility, SEO and live practice.
HTML structure and layout
The span element is a neutral inline hook for text-level styling or scripting.
A span is like div, but inline. It has no meaning by itself and should usually live inside text or small inline interface pieces.
Use span when you need a styling hook around part of a sentence and no semantic element such as strong, em, code, mark or abbr fits.
A span should not replace meaningful text elements. If the text is emphasized, use em or strong. If it is code, use code. If it is just a visual highlight, span can be right.
inline hook
A small wrapper for styling part of text.
semantic alternative
strong, em, code, mark, abbr, time and more.
class
Often used to style a span consistently.
Syntax and structure
Use span when you need inline grouping without meaning.
A span is safe when it supports styling or scripting without pretending to be semantic content.
Inline visual highlight
<p> Learn <span class="highlight">semantic HTML</span> before styling everything with CSS. </p>
Span replacing meaningful elements
<span class="heading">Course title</span> <span class="important">Warning: payment required</span> <span onclick="submitForm()">Send</span>
Rules that matter
Structure should stay readable before the design layer is applied.
Layout-focused HTML is strongest when meaning, grouping, metadata and behavior hooks all have a clear reason to exist.
Use for inline hooks
Span is useful around a small phrase, number, icon label or status text.
Prefer semantic text elements
Use strong, em, code, mark, time or abbr when they match the meaning.
Do not make headings from spans
Visual size does not create document structure.
Do not make clickable actions from spans
Use button or a with href for real interaction.
Keep spans short
A span wrapping whole sections is probably the wrong element.
Name the class by role
Use names like status, price or highlight instead of random color names.
Production thinking
HTML structure affects design, accessibility, SEO and long-term maintenance.
Why does this matter?
This matters because small inline details often become design polish. Span gives you a hook without damaging the sentence structure.
Accessibility
Span adds no semantic information. If the distinction matters to assistive technology, choose a meaningful element.
Production note
Spans are common in design systems for badges, inline statuses and animated text. Keep their purpose narrow.
SEO note
A styled span does not create headings or emphasis for search engines. Use real elements when meaning matters.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Replace the highlight span with strong and explain the difference.
- Add a second status span with another value.
- Change the CSS without changing the paragraph text.
Practice assignment
Do this before moving to the next lesson.
- Write a paragraph with one visual span.
- Write a paragraph where strong or em is better than span.
- Explain why both examples are different.
Try it yourself
Highlight part of a sentence
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?