/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Why are <span> tags useful?

Copy linkTweet thisAlerts:
May 01.2013

I was just reviewing a brief tutorial on W3Schools and after reviewing <span> tags, I have a question. What are they for?

[B]Here’s some HTML with <span> tags… [/B]

[CODE]
<!DOCTYPE html>
<html>
<body>

<p>My mother has <span style=”color:blue;font-weight:bold”>blue</span> eyes and my father has <span style=”color:darkolivegreen;font-weight:bold”>dark green</span> eyes.</p>

</body>
</html>
[/CODE]

[B]And here’s some HTML without <span> tags, utilizing other tags… [/B]

[CODE]
<!DOCTYPE html>
<html>
<body>

<p>My mother has <font color=”blue”><strong>blue</strong></font> eyes and my father has <font color=”yellow”><strong>dark green</strong></font> eyes.</p>

</body>
</html>
[/CODE]

So, if I can accomplish the same goal with both, is there a more significant use for <span> tags?

-Jared

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyMay 01.2013 — As your examples demonstrate, the <span> tag is used to provide a containing element for inline content. The code does get messy when you use the 'style' attribute in a <span> tag, but you always have the preferred option of using an 'id' or 'class' attribute instead to allow you to control the CSS in your stylesheet to give you easier access and to keep your HTML cleaner.
Copy linkTweet thisAlerts:
@jlnewnamauthorMay 01.2013 — So, within my HTML, <span> tags allow me to customize something within the HTML without using a formal <div id="id_name"></div>?

Can I create a syle (in the stylesheet) and then carry it over to HTML like this?

The quick sly fox jumped over the lazy <span class="brown">brown</span> dog.

Is that what you mean?
Copy linkTweet thisAlerts:
@rtretheweyMay 02.2013 — Yes, but to be clear, your entire document is HTML. The <span> tag is an inline element, so it would be used to contain other inline content like text or <img> tags, not block-level elements like <div> or <p>.
Copy linkTweet thisAlerts:
@CharlesMay 03.2013 — Be careful, though, that you aren't just apeing the old FONT element. Ask yourself why you are using a span. To change the color of a word or two? If you are doing that to add emphasis then use the EM element instead. Only use SPAN if no other HTML elements apply and then consider using a microformat. ( http://en.wikipedia.org/wiki/Microformat )
Copy linkTweet thisAlerts:
@cbVisionMay 03.2013 — In your example, you're using "strong." You could simply do this:

[CODE]<p>The quick <strong class="brown">brown</strong> fox jumped ...</p>[/CODE]

Then in your CSS, you'd have this:

.brown {color: brown;}
Copy linkTweet thisAlerts:
@shawnmichaelsMay 08.2013 — Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.
Copy linkTweet thisAlerts:
@noahwilsonMay 08.2013 — its so helpful and easy way to apply different format on any class or id.
×

Success!

Help @jlnewnam spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...