HTML Span

Description
The span tag is quite the handy tag to have at your disposal. You can use it for everything from Text Formating, to creating a scrollable text area. When combined with CSS it becomes an easy-to-use tool for making your website as uniform as possible, as your not bogged down with <div> tags for every heading and title on your website.

Try It Out



Above we have a very basic page. The <div class="content"> tag would be used to house the content of your page. The <span class="heading1"> would be used for a heading or title. When you combine this with CSS and give the content and heading1 objects some properties and values, you can quickly and efficiently create headings and titles for your website.

Next, we'll learn to create a scrollable text area using the span tag.



In the above example, we have everything from before but now we have included a scrollable text area. What gives it the ability to scroll is the overflow: auto; component of the tag. This is quite useful when a text area can only be a certain size, but there may not be enough room for you to include all of the information you need to. Once the text exceeds the specified hieght, you will be able to scroll down and view more text!

This post has been edited by KansukeKojima: Feb 1 2008, 10:17 PM

Good to see a Tutorial on the lowly <span> tag. It rarely receives the attention it deserves.

'Span' is an In-line element in (x)html. A 'generic' Inline container much like a 'div' tag, except that div's are Block elements.

Using the Span tag as a 'Heading' identifier is not correct usage of the Span tag. For semantic mark-up, you should use the Heading <Hn> tags since the Heading tags impart more information about the structure of your page to the search Bots. And as for using the span tag as a 'marquee', a div tag is better suited for that purpose, too, since the span tag should be for 'In-line' content. You can expect that different Browsers will handle the height attribute differently, possibly throwing an error on validation of your page.

Thanks jlhaslip. I do not have much knowledge of how browsers anylyze the code etc.... in the future, I may look into learning more about it as it will increase my code validility.... (don't think that is a word)...

I didn't even know there was and <hn> tag so I think that I'll go and replace all those span tags acting as headings on my website.

Also, I will probably place this tutorial on my website as it is.... or maybe I'll change it to one on general div, span, and heading use....

This post has been edited by KansukeKojima: Feb 1 2008, 10:29 PM

What I mean by saying "Hn" is "H" followed by a number (n).
Html recognizes 6 levels of Headings--- h1 to h6.

Span tags are great for controlling something you need inline. I'm not sure if I've been using it right but how I do my headers I use <Hn> for them. But say I need to futher change output in your heading line. Heres an example

Hello by author.

For the above example you would use a <Hn> with a nested <span> inside it for the 'by author' formatting. I beleive this is still correct usage of the span tag right? I mean I really think of other reasons why we have them.

i personally love span tags.

the thing they have over divs is that span tags are so much more flexible. by this i mean that you can place span tags almost wherever you like. it is not possible to place two divs side by side without adding some extra code, however spans fit perfectly side by side; you can even place a span next to a div.

you can also place spans inside paragraphs/divs, and this is useful if you would like that text to still be a part of the paragraph, but have a different style.

PS: sonesay, sorry but i can't resist saving the right pic. of your signature to my computer. i may even be tempted to use it as a part of my sig, it is so truthful yet amusing

This was really helpful. I had heard of inline and block elements before, but I never really decided to figure out what that meant.

Now I know why whenever I was adding div's it was messing with all of my pages.

haha.... ok yeah... I new about those... lol

EDIT::

Ok also, here is a way to create a iframe like thing by using some php with a span tag.



So there you go... just use an include in between the span tags.... and there you go.... nice iframe like thing.. but a little easier to manage... because we all hate iframes don't we?

This post has been edited by KansukeKojima: Feb 4 2008, 07:08 PM