Can anyone explain, in HTML, what that the <span> does??!, I think is the one....

The Computer Guy

Can anyone explain, in HTML, what <span> does??!

OwenM

A non block level element.

Used to id content within the span. If you had a span tag around text, you could hide it by setting the font color the same as the background, programatically, using javascript to manipulate the span by it's id. spans don't or shouldn't affect layout so you can scatter them in a block of text without affecting it's layout.

http://www.w3schools.com/tags/tag_span.asp

The Computer Guy

Oh great, Thanks(y).

I think I might understand it now!!,

By the way,
Thanks for the link

John_Mc

Just to add, non-block level means that styling such as margin and padding won't work. Span is generally used to style a specific piece of text. A good example would be highlighting specific text within a paragraph (<p>).

awec

So, <span style="font-weight:bold;">bold text</span> is the way you are encouraged to bold text these days instead of the <b></b> tags.

In this case, it's just saying to make this span of text bold.

John_Mc

awec wrote: »

So, <span style="font-weight:bold;">bold text</span> is the way you are encouraged to bold text these days instead of the <b></b> tags.

In this case, it's just saying to make this span of text bold.

No, I wouldnt agree with that as doing so removes the ability to set the style of a span through CSS.

Better off giving the span an id and setting the font style in CSS. Alternatively, use <strong></strong> instead of <b></b> but both would be better than what you have suggested.

awec

John_Mc wrote: »

No, I wouldnt agree with that as doing so removes the ability to set the style of a span through CSS.

Better off giving the span an id and setting the font style in CSS. Alternatively, use <strong></strong> instead of <b></b> but both would be better than what you have suggested.

I was referring to using the span instead of b, not the inline css.

ChRoMe

John_Mc wrote: »

No, I wouldnt agree with that as doing so removes the ability to set the style of a span through CSS.

No, it doesn't. CSS styles can still be associated with it. They are not mutually exclusive.

John_Mc

ChRoMe wrote: »

No, it doesn't. CSS styles can still be associated with it. They are not mutually exclusive.

An explicitly set local style will override a CSS style as it has precedence. In this example, giving span a font weight of normal in CSS will not work on spans that have a font-weight of bold explicitly set in markup.

So yes, they are mutually exclusive.

Creamy Goodness

not always the case as proved in this jsfiddle.

http://jsfiddle.net/ASQyk/

yes I cheated a little but, they're not entirely mutally exclusive.

the point ChRoMe was trying to get at was, yes a inline style will take precedence, but you can still add more CSS rules in a stylesheet to change other properties.

John_Mc

Creamy Goodness wrote: »

not always the case as proved in this jsfiddle.

http://jsfiddle.net/ASQyk/

yes I cheated a little but, they're not entirely mutally exclusive.

Come off it! That markup doesn't make sense (Class and explicit style in same tag) and the user of !important is obviously going to override the default behaviour which I described.

Nice try though

chakotha

I end up combining loads of simple classes for formatting text.

<style>
.size_2em { font-size:2em; }
.bold { font-weight:bold; }
</style>

Hello <span class="size_2em bold">World</span>

Creamy Goodness

chakotha wrote: »

I end up combining loads of simple classes for formatting text.

<style>
.size_2em { font-size:2em; }
.bold { font-weight:bold; }
</style>

Hello <span class="size_2em bold">World</span>

generally not a great idea to name your classes like that.

what happens if someone on your team changes the font-size: rule but doesn't update the class name and everywhere the class name is used? hilarity that's what

ChRoMe

John_Mc wrote: »

So yes, they are mutually exclusive.

Those words.... they don't mean what you think they mean.

DonkeyStyle \o/

Why replace <b> or <strong>, surely they're semantic within a body of text, like an italic? I could see it for decorative purposes, but within a text, it's another means of emphasis. It seems bizarre, like replacing <h1> with a css class that sets bold and a large font size.

KonFusion

DonkeyStyle \o/ wrote: »

<b>

<b>

According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.

And yes, you are correct. It would be bizarre.

Also,

So, <span style="font-weight:bold;">bold text</span> is the way you are encouraged to bold text these days instead of the <b></b> tags.

<strong> is more semantically correct in this case.

As for <span>, as linked earlier

he <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.

It's use is clearly outlined. I don't understand the confusion?