Take me back!! I want my CSS!! Click me to get back :)

×

Are you missing out on your dream job?

Enrollment for Skillcrush Blueprints JUST OPENED. Register today!

Click Here

Div and Span tags

Hello Skillcrushers!

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.

 

Divs

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!

XOXO

Dee & Adda

Deepina Kapila

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.

In her spare time she enjoys playing video games, reading on her Kindle & scuba diving in her hometown (Curaçao - an island in the Caribbean!).

Your email address will not be published.

6 comments

  1. Cfreitasrun Replied

    Another question I have is: after I’ve used div’s how do I position them where I want them?  I never quite figured that out.  Is it Div I.D.’s?  If so, how would I code those?

  2. Cfreitasrun Replied

    I have been having trouble with span tags since I first read these explanations since they’re often incomplete.  I understand that span tags can make specific elements appear horizontally across a page instead of in a vertical list, but I’m still trying to learn how I would write the code if I wanted to use a few horizontally positioned icons across my page and include links that can be followed after clicking on those icons.  Where can I find the relevant information I’m seeking?   Thank You.
     

  3. Ремонт Replied

    Очень интересно! обязательно еще раз к вам загляну!

  4. SarahGagnon Replied

    Thanks, Dee, for your article. I had a few questions when trying to complete one of this week’s Challenges. But your article helped answer them all! Thanks!!

  5. jlarsp Replied

    Where are the tags? On the HTML cheatsheet, which is all we’ve gotten with tags so far, there is nothing labeled span or div. 

    • SarahGagnon Replied

      Hi. The tags for div and span are under “Content” on the HTML Tag Cheatsheet. Span is found under “Inline Elements”. Hope this helps!

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.