Hi Everyone, I just sent the following email to my web mailing list on campus and I thought that some of the beginner CSS coders on this list might find this helpful. There was an email on this list (I don't know the original author, but thank you!) that sparked this whole email and I doubt very many people saw it so I thought I would do a writeup about it. Hopefully some of you find it interesting and/or helpful.
Thanks, Mike ---- Hey Everyone, I've been doing a lot of CSS research lately and I was running into somewhat of a roadblock. I was looking at various websites (commercial, educational, government, etc) and I was noticing two different styles of coding. One way would have markup like this: <span class="header">This is a header</span> <span class="bodytext">Body text goes here</span><br /> and the other would be: <h1>This is a header</h1> <p>Body text goes here</p> Initially I was leaning heavily towards the first example. I mean, why not? It's very descriptive and makes the code very easy to read. Plus, dealing with the headers is not hierarchical so if you decide you want a new kind of header/subtitle, you just create it. On the other hand, if you decide you want a new header/subtitle between <h1> and <h2>, there isn't a <h1.5>! That can get annoying. A bit earlier I was through the W3C page regarding "Class Selectors" and noticed the following at the bottom of the section: Note: CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not. That didn't really make much sense to me until I happened to visit a website that was posted to the css-discuss list: http://www.onlinetools.org/articles/cssguides.html ...and in there is a section titled: Do not simulate markup via CSS They cite the following example: wrong: <div class="headline">Our new products</div> <div class="subheadline">Product 1</div> <p>...</p> <div class="divider"> </div> <div class="subheadline">Product 2</div> <p>...</p> right: <h1>Our new products</h1> <h2>Product 1</h2> <p>...</p> <hr /> <p>...</p> After more research (and reading in the article), there are quite a few reasons to go with the second method. First, Dreamweaver will automatically insert <p> tags for you when you hit enter, and if you're importing documents from Word and have them styled with proper headings (heading1-6), it will put the correct markup for those headings. That saves quite a bit of tedious reclassing! The other reason, and probably more importantly, is that if you use standard HTML markup (<p>, <h1>, <strong>, etc), and then style those tags with your CSS, your website will degrade nicely when viewed with devices for disabled users. Remember, a screen reader does not know the difference between class="header" and class="bodytext" so it does not know how to navigate around your document. I'm not sure if this is new to anyone, but it was new to me so I figured there might be other people interested in it as well. I figure this kind of coding will probably become, or already is, mandatory for government sites so it's probably a good thing to talk about it because the campus template does not really enforce this kind of accessibility. It's up to the person coding the website to use good coding practices. Other good topics on the site include proper class and ID naming and also how to use contextual selectors instead of classes (which relates to the above examples). If you're new to CSS, or even if you want to know what's considered good style, take a look and you'll probably find it useful for building accessible and maintainable sites with CSS. enjoy, Mike ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
