When to Use the Div and Span Tags With HTML

In the final video of the HTML 101 series, you’ll get a basic introduction to the div and span tags and when they should be used with HTML code. While these tags may seem less-than-sexy, they become very powerful when combined with cascading style sheets (CSS), which we will be covering in our next series.

Hey Mike. Not sure what you mean. Are you referring to how I just start the html file with the html tag? If so, I understand that for validation this document should have some validations at the top, but I didn’t want to introduce this in the basic series.

Mike, I just went back to the 2nd video in this series and noticed that I started out with the correct spelling, then mysteriously, it switches in my next scene. Too bizarre. Of course this mistake perpetuates itself in the other videos since I use the same template throughout. I have a lot of scenes to rework.

Back then, when I was creating this first video I was still learning the Camtasia program so I guess I was concentrating so hard on the program that such a glaringly obvious mistake went unnoticed.

If I were you I’d ignore it. Nobody who doesn’t know better will ever notice. It’s just kinda like catching an inconsistency in a movie; those are some of the most memorable parts!

And don’t feel bad; I ran a catalog mail order company for 12 years selling to software developers. Me and the marketing manager would proof-read and proof-read and proof-read again until we were certain there were no errors. Then, and this never failed, when we’d get a copy back from the printer our developer would grab a copy, open it, and on the first page he looked at he’d say “Opps, typo…” (that developer is now the Microsoft S.E. Regional Evangelist, btw.) Just goes to show you; you can’t proof your our shit. 😉

Yeah, I think I’m just going to go back to the 2nd video and add a callout in Camtasia saying what a dope I am and to ignore the error throughout the series. It’s exponentially harder deleting scenes in Camtasia when they are not the last scene. When you delete scenes and add new ones, all your sound layers can get out of sync with the video and before you know it, everything is messed up.

Hello to you. I’m not sure about that. On this page http://www.w3.org/TR/html401/struct/global.html#edef-DIV the W3c shows divs inside of p’s just to demonstrate line breaks, but in general I can’t think of a reason why anybody would want or need to put divs inside of p tags. IN all the examples I’ve seen, pages use divs as the containers and place all content inside (including p tags), and not the other way around.

Wow. You blew my mind with that link to the W3C website. I thought for the longest that this practice was “illegal”. I even recall some of my XHTML not validating properly because of trying to put a DIV tag within a P tag back in my earlier days of coding. Maybe my memory escapes me.

In general, if I need a line break within a paragraph I use a SPAN tag but set it to “display:block;” to give it its own block-like structure. Obviously this is beyond the scope of your particular tutorial, but I thought it might be helpful to mention it nonetheless.

Thanks a lot for these tutes. I’ve been coding for a while already but I love, love, love watching beginner info from time to time to make sure I’m not slipping up.

No, I’m with you here. I think the example they listed only confuses the issue. I don’t see a need to use divs inside of p’s really, so I just avoid doing so. I’m sure it’s invalid, but don’t know why they did it that way.

Aa huh! ‘the power of the div’ yee ah! I’ve been staring at the w3c tutorials for about a week now and wondering why the heck someone didn’t just come straight out and explain in plain english how it all fits together! I’ve been spitting out code from various editors and examining it but it’s all so varied and almost none of it validates with w3c? go figure!

I have just completed your HTML tutorials and am really blown away by what I have learned. Being a complete beginner this has opened my eyes to the possibilities and the power this knowledge gives you.

Thanks very much for the time and trouble you have taken to provide this to the people on the internet.

It’s comments like yours that make all the long hours of planning, storyboarding, recording, and editing worth it. Post another comment and let me know if you have a website. check out the link that my name points to. You can use your knowledge to assist you in creating a blog.

Don’t know how late i am to this discussion since there are no dates with the comments (request you to add that feature.. its useful), but i wanted to share a comment on the div inside p at the w3c website link. While a block element (including p itself) inside a p tag is illegal, end tags are optional in case of (http://www.w3.org/TR/html401/struct/text.html#h-9.3.1), and hence the example given there is valid. over there just signifies beginning/end of a new para.