70

What should I use?

<span style="color:red">test</span>

or

<font color="red">test</font>

and why?

1
  • 23
    fist one is actually inline CSS
    – PetrV
    Aug 30, 2013 at 9:40

7 Answers 7

68

You should use <span>, because as specified by the spec, <font> has been deprecated and probably won't display as you intend.

4
  • Span (and div) are not deprecated, but they are not semantic either. In other words, they add no "meaning" to the text. They should only be used to group elements without adding meaning: en.wikipedia.org/wiki/Span_and_div
    – Peter
    Nov 15, 2010 at 9:06
  • 5
    I never said Span or div are deprecated, I find it hard to believe they will ever be deprecated. span was designed exactly for its purpose: to non semantically be able to change certain parts of text.
    – Kyle
    Nov 15, 2010 at 9:15
  • 1
    I never said span and div are deprecated either and I agree with you that they will probably never be. But it seems reasonable to assume the OP has a meaning with red colored text, for example emphasis. So he ought to use a semantic tag for that. However, if the text just needs to be colored red without semantic meaning (e.g. just to create some colorfulness), then span is a fine choice.
    – Peter
    Nov 15, 2010 at 12:11
  • 5
    Aha, I understand. And in that case, your suggestion would be perfect, but as the OP only asked which element to use, <span> is preferred out of the two here. :)
    – Kyle
    Nov 15, 2010 at 12:22
33

Neither. You should separate content and presentation, giving your HTML code logical codes. Think of it this way; to a blind person, or on a browser that cannot display colors, what is left of your code? Why do you want it to be red?

Most probably, your decision to make text red is because you want to give it emphasis. So your HTML code should be:

<em>test</em>

This way, even non-visual browsers can make sure they give the text emphasis in one way or another.

Next step is to make the text red. But you don't want to add the color code everywhere, much more efficient to just add it once:

<style>
  em { color: red; }
</style>

This way, all emphasized code on your website becomes red, making it more constant.

16

1st preference external style sheet.

<span class="myClass">test</span>

css

.myClass
{
color:red;
}

2nd preference inline style

<span style="color:red">test</span>

<font> as mentioned is deprecated.

1
  • The only suggestion to improve is instead of "myClass" use "redText", or "red". Apr 11, 2017 at 9:57
9

Use style. The font tag is deprecated (W3C Wiki).

0
7
<span style="color:#ffffff; font-size:18px; line-height:35px; font-family: Calibri;">Our Activities </span>

This works for me well:) As it has been already mentioned above "The font tag has been deprecated, at least in XHTML. It always safe to use span tag. font may not give you desire results, at least in my case it didn't.

3
  • Great example; but it does not answer the question: Why?
    – jpaugh
    Dec 29, 2015 at 0:11
  • @jpaugh, why to use span in place of font tag already been address by other members above. The <font> tag has been deprecated, at least in XHTML. Thank you I will edit my answer. Dec 30, 2015 at 6:22
  • 1
    Well, that's one way to look at it. I meant, why use your solution (regardless of other solutions)? What is unique or beneficial about your example?
    – jpaugh
    Dec 30, 2015 at 21:13
5

The <font> tag has been deprecated, at least in XHTML. That means that it's use is officially "frowned upon," and there is no guarantee that future browsers will continue to display the text as you intended.

You have to use CSS. Go with the <span> tag, or a separate style sheet. According to its specification, the <span> tag has no semantic meaning and just allows you to change the style of a particular region.

2
  • No, don't target XHTML unless you really know what you're doing: webdevout.net/articles/beware-of-xhtml. 99.9% of the so-called XHTML out there, is not (valid) XHTML.
    – Peter
    Nov 15, 2010 at 8:34
  • @Peter: Fair enough, I acknowledge that there are multiple valid opinions on the issue. XHTML is just my personal preference. But it's worth pointing out that by "targeting," I meant to imply "writing valid" XML. Nov 15, 2010 at 8:38
4

Actually I would say the 1st preference would be an external style sheet (External CSS), the 2nd preference would be writing CSS in style tags in the header section of the current page (Internal CSS)

<style type="text/css">
<!-- CSS goes here -->
</style>

And as a 3rd option - or last resort rather - I'd use CSS in the tags themselves (Inline CSS).

3
  • Agree. Create a CSS class called "red", assign the class "red" to the tag - easy, and good practice.
    – RPM1984
    Nov 15, 2010 at 9:07
  • 2
    Actually... .red wouldn't be a great class name since it's not semantic. .red only describes the look of the class not what it means, .warning or .error would be better.
    – Damien
    Nov 15, 2010 at 9:10
  • Just curious - Is it a bad idea to use inline CSS as a rule?
    – Siddharth
    May 12, 2015 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.