HTML 101: How to Create Web Pages With HTML — Episode Eight
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.
Supercharge your blog’s earnings with Text Link Ads
Episode Links:
- Low cost, reliable web hosting with free website creation tools and blog software.
- Download Notepad++, the best FREE text editor on the Web.
- Quickly and easily build HTML, CSS and XML pages with Macromedia Dreamweaver
.
Share this page or bookmark it now!









20 Comments ↓
Allen.H said:
As a quite experienced blogger but a technically limited one I must say I’m loving this series, can’t wait for the next one!
Allen.H
Shane said:
Thanks Allen. I hope I taught you a thing or two, and I hope to do so with the next series. Spread the word (blogroll..hint..hint)
Regards
Shane
Stijn said:
Hehe, you said “doodoo”.
Still, nice tubetorial guys. I’ll keep this advice in mind when I get back to coding later this week.
Mike Schinkel said:
Gotta love that opening element tag! Good thing browsers don’t validate! ;-0
But seriously, it was otherwise a nice presenation for beginning coders.
Shane said:
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.
Let me know if that’s what you meant.
Regards
Shane
Mike Schinkel said:
Nope. Check out the screencast as soon as you open Notepad. Look at the top of the HTML file. Or maybe I should say HMTL file…
Shane said:
Damn, damn, damn! Good catch hawk eyes
The only excuse I can give myself here is in the first tubetorial I mentioned that 90% of the errors in creating web pages will be spelling errors like this.
Thanks for pointing that out.
Shoot! I’ll have to change my source files and re-upload.
ps. I like your site, by the way. I like the technical stuff.
Regards
Shane
Shane said:
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.
Oh well, such is life. I’ll get right on it.
Regards
Shane
Mike Schinkel said:
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.
Mike Schinkel said:
BTW, when you said you liked my site, did you mean: http://blog.welldesignedurls.org/?
Shane said:
That’s too funny, Mike.
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.
Regards
Shane
Grant W Laird Jr said:
Hello again,
Please contact me directly.
Is there any way we can get you guys to provide subtitle for all those cool tutorial videos?
Appreciated it.
gwlj
Philip Arthur Moore said:
A quick question/note: Isn’t it technically illegal with regards to W3C validation to contain a DIV tag within a P tag? Thanks for these excellent videos!
Shane said:
Mike, yes your welldesignedurl page was what I was talking about.
Regards
Shane
Shane said:
Philip,
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.
Regards
Shane
Philip Arthur Moore said:
Shane,
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.
Cheers,
Philip
Shane said:
Philip,
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.
As for line breaks, I just go with the br / .
Nice site by the way. I like the design.
Regards
Shane
HTML 101: How to Create Web Pages With HTML | Tubetorial said:
[…] When to Use Div and Span Tags With HTML […]
karthi said:
all the Tubetorial are very useful
Levi said:
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!
Thanks shane, this is great work