We know all these vague structural HTML tags can be confusing – so we’re here to break them all down for you! Check out the following for the lowdown on the span and div tags and how to use them in your projects.
The span tag
The span tag is a handy little tag that you’ll use when you want to style text with CSS. It won’t behave in any particular way until you tell it to (with CSS). So for instance lets say you write a paragraph <p></p>. Inside your paragraph lets say you use the word “fabulous” a few times. If you surround “fabulous” with <span> tags, you can later tell CSS to style that span tag in a way that will make “fabulous” look well, fabulous, every time it appears in that paragraph :) It’s basically just a way for you to differentiate parts of your regular old text so you can treat it with some TLC via CSS later.
Div tags “divvy” up your content. <div> tags are containers for large chunks/sections of code. Lets say you have a webpage and you have a header at the top, a main body area, a side bar and a footer (kind of like a standard blog layout). Each of those sections would be a div. So the header would be div #1, the main body area would be div #2, the sidebar would be div #3 and the footer would be dive #4. Each of those divs you would later style specifically with CSS. So you would style your header div in specific ways via CSS, then you would style your main body area in specific ways and so on. Divs help organize your content layout by sectioning it off in pieces so you can later tell those pieces what you want them to look like via CSS.
Divs are block level elements and spans are inline elements. Basically, every time you use a div, it’s going to separate itself from the flow of the document (and you’ll have to work on giving it specific dimensions and positioning so it behaves the way you want). Spans on the other hand are inline level elements and will go with the flow of your document.
Now go ahead and add some span and div tags to your site and start styling them!
Dee & Adda
Dee is a fun-loving instructor with diverse tech experience across Fortune 500 companies, early-stage start-ups, government agencies & non-profits. Dee works at mobile product design studio Funsize, in Austin Texas where she lives with her husband, 2 border collie mixes, & 2 cats.