CSS Block Elements Explained
15/12/08 :: Posted by RobCSS Block Elements
There has been an increasing amount of DIV’s being used these days, I know I used to be one of those who used them a little too often too. But why do we use DIV’s so much? A DIV element is a brilliant way of piecing together your site, helping you realise your layout dreams. So why am I speaking like a mad man? Why am I claiming DIV’s are used too much?
Because they are!
I have 2 words for you “Block Elements”
What are Block Elements?
From this point forward block elements are your friends. Block elements are HTML tags that are used to hold other block elements and also inline elements. When rendered in the browser block elements normally start a new line.
Guess what, our old friend the DIV is a block element! We know how versatile a DIV is and that’s why we all love using them, but if it is classed as a block element, then maybe other things are too. Here is a list of the generic block elements:
- ADDRESS – Address
- BLOCKQUOTE – Block quotation
- DIV – Generic block-level container
- DL – Definition list
- FIELDSET – Form control group
- FORM – Interactive form
- H1 to H6 – Headings
- HR – Horizontal rule
- NOSCRIPT – Alternate script content
- OL – Ordered list
- P – Paragraph
- PRE – Preformatted text
- TABLE – Table
- UL – Unordered list
This means that we can style these elements pretty much like the DIV itself, which is awesome news.
Example time:
<html>
<head>
<title>My Example</title>
</head>
<body>
<div id=”pagewrap”>
<div id=”header”>
<h1>Text for the header if we have any that is</h1>
</div>
<div id=”navbar”>
<ul>
<li>home link</li>
<li>page link</li>
<li>page link</li>
<li>page link</li>
</ul>
</div>
Now the code you see is a typical header, that’s how (there or abouts) most sites would start their coding life, but lets see how that could be changed.
<html>
<head>
<title>My Example</title>
</head>
<body>
<div id=”pagewrap”>
<h1>Text for the header if we have any that is</h1>
<ul id=”navbar”>
<li>home link</li>
<li>page link</li>
<li>page link</li>
<li>page link</li>
</ul>
See how that has cut those DIV’s which were just not needed, you can pretty much just cut and paste the code that you had for the DIV’s into the code for your other elements. If you want to get even simpler, you have a HTML and BODY tag, why do you need wrap for your page? The margin: 0 auto hack even works for those 2 tags in all modern browsers! The only reason I left it in, is in IE7 you get a strange bug where sometimes it’s not 100% happy with that arrangement… so keeping it in for now is probably best.
Heads up for validating: Although adding other block elements like <p> for example into your header H1 tag is in all intents and purposes completely logical, it dose throw up an invalid HTML report. That is why I would recommend either having your extra header text under and outside your H1 then styled into it with the positioning option. I this might be changed in the future though, who knows…
H1 Tip: If you don’t want your text in your H1 tag to show, because it’s in the graphic, but you still want text in there to help with SEO – set your text-indent to something like -9999px. This will move the text visibly off the page and out of the way, but still let Google read it.
You see with that little bit of code change you have saved yourself room on your style sheet to code more specifically. Lots of cross browser problems is caused by over used DIV’s, the more DIV’s you have the more you have to think about what’s gone wrong and the more fiddling you have to do. Cut it back, and have a more lightweight HTML document and a happier and more successful cross browser compatible website!
Tags: css, elements, html, Tutorial
This entry was posted on Monday, December 15th, 2008 at 2:43 pm and is filed under Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
“I would say about 80% of cross browser problems is caused by over used DIV’s”
Could you give some examples? I can’t recall any browser bugs/hacks regarding DIVs.
Mainly because people get so lost within their own elements, that trouble shooting can become a laborious task… and that’s not even starting on how a box model can differ between FF and IE. Most issues I have helped people with on forums are down to over use of DIV elements, and or, incorrect positioning methods… i.e. using margin or padding to position an element instead of “position”.
This isnt a post about hacks or bugs in regards to divs, its a post to highlight the fact that DIV’s are not the only block element, and should not be used just for the sake of it. You would’nt wrap div1 in div2 so you could style div1 would you.