Heading the Wrong Direction
I made some silly mistakes when making Green-Beast.com. I just didn’t know then what I know now… stated without shame or embarrassment. One was the over-use, call it abuse even, of acronyms. I had defined too many of them and had done so in the most redundant way (e.g. the same one defined ten times on a single page), as was pointed out to me when I had experts perform Jaws testing — the specifics of acronym use are the subject of this web log article. Another mistake, which, too, will soon be an article unto itself, was the lack of proper list use in my navigational menus. Another mistake, as I’ll write about here, is the misuse of proper headings as discussed by the W3C in articles such as “Use headings to structure your document” and “The global structure of an HTML document.”
Just one of a couple inspirations for this article comes from a comment posted on this blog by Carol Whitney. Carol stated:
“Mike, your site looks just wonderful. I hope you don’t mind if I work at emulating it in many ways. […]”
This hits home in a way, in that who looks to whom for guidance and inspiration is subjective. Just like beauty being in the eye of the beholder, so to speak. So while I’m no expert, there are perhaps people out there that feel my knowledge of these subjects is stronger than it may really be. Therefore, I feel an obligation, a certain responsibility, to shed the proper light when and where I can. In fact, I want to do this.
I do encourage people to view my source files — even though server-side scripting can make things seem not as they really are — and I comment it heavily so people can follow it more accurately. Thus, where I went wrong and the mistakes I made should be in some way revealed so people who do look understand some of what I did wrong so they don’t make the same mistakes. This leads to my improper use of headings:
In my CSS files (which could use some work themselves no doubt) I classify my headings. I do this unnecessarily and improperly. Example:
.h2 {
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #b0b063;
font-size : 18px; // See note.
font-style : normal;
font-weight : bold;
text-align : left;
vertical-align : text-top;
text-transform : uppercase;
padding : 0;
background : transparent;
line-height : 100%;
}
NOTE: Using pixel px sizing instead of em, % or, best yet, relational sizing such as smaller, small, large, larger is another story, or will be soon.
By “classify” in this example I mean making .h2 a style class (placing the “.” before it), instead of simply defining the page element h2 (with no dot). To tell the truth I have no idea why I did this. It even bloats my mark up. An example of this “bloat” is as follows.
<strong><span class="h2">¶ The Scope of this Site</span></strong>
The <strong></strong> element, for strong emphasis (bold text), was employed for viewing without CSS applied and was needed because I removed the very meaning of <h2></h2> by making it a class. I could have, should have, (and will at some point), despite the large number of style sheets, done it a simpler and more semantic way. As follows (first the CSS):
h2 {
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #b0b063;
font-size : 18px;
font-style : normal;
font-weight : bold;
text-align : left;
vertical-align : text-top;
text-transform : uppercase;
padding : 0;
background : transparent;
line-height : 100%;
}
It’s the same CSS, only I left off the “.” before the h2, thus I no longer create the class for h2, but I simply define the element so it looks a certain way on my styled pages.
The result would be using an un-bloated, cleaner and more semantic mark-up, as follows:
<h2>¶ The Scope of this Site</h2>
The on-page results with styles on would be the same as it is now, looks-wise, and if styles were removed it would be perfect — actually better than it is, in fact. I wouldn’t need the <strong></strong> element for strong emphasis (or bold actually, in my case), nor would I need the <span></span> to contain the styling. The result (with styles off) would be like so:
¶ The Scope of this Site
(Please note… The example above looks a certain way as it is an element which is controlled by the this very blog’s CSS, as follows:)
h1 , h2 , h3 {
font-family : 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight : bold;
}
Ironically, I used some Green-Beast.com heading elements correctly in my CSSs. They were hidden, though, as they are used strictly for vewing the site without styles applied (see the Advanced Notes below). But I trashed the very meaning of some of my other heading elements in a most shameful way.
So, in conclusion, as I say as a father sometimes: “Do as I say, not as I do.” (At least until I correct these issues — which will be easily determined by simply viewing my source files. When you look and see… <h2>¶ Proper Mark-up Like This</h2>, instead of
<strong><span class="h2">¶ Crap Like This</span></strong>
Advanced Notes: The examples that I show above are not exactly what’s in my mark-up. My mistakes are more and less involved, and more and less complicated than what’s shown in my examples, but I didn’t want to confuse as I have indeed turned simple HTML and turned into this really complex thing. For those interested, this is what I really have:
<h1>Green-Beast.com</h1> <h2>GBDC HOME PAGE</h2> <h3><span class="h2">§ GBDC Home Page</span></h3> <strong><span class="h4">¶ Green Beast Welcomes You</span></strong>
Weird, right? Yes, Complicated, too. More correct than my prior examples, perhaps, but yet more incorrect as well. I didn’t want to complicate this so-difficult-to-write article further, though, by showing you exactly what I did wrong, but more or less to give you the concept of what I did wrong.
For that shown above, my CSS should better define the visible elements (which need to be altered some), so it would properly be written as follows:
<h1>Green-Beast.com</h1> <h2>§ GBDC Home Page</h2> <h3>¶ Green Beast Welcomes You</h3> <p>¶ Welcome text paragraph</p> <h3>¶ The Scope of this Site</h3> <p>¶ Scope of site text paragraph</p> <h3>¶ Next Sub-Headinglt;/h3> <p>¶ And so on. blah, blah, blah...</p>
Additional Notes: The use of § § and ¶ ¶ is fine. I use them as symbols to aid navigation for use with certain web browsing devices, as I discovered through some experimentation.
My paragraphs <p></p> are classed and will remain as such, for now, as different paragraphs look different ways. To correct this I needed to classify and style div contents and use paragraphs to simply organize. I should have and could have, I know this now. Someday I will… my next site/project for sure. I’m always learning, but aren’t we all?
Sorry if any of this has been overly confusing. It was hell to write. But I owe it all to my prior ignorance. If you understand what I am saying here, the points I’m making, then you may be better off because of it. If this is old hat for you and you feel you have something to add that can further clarify and/or simplify what I’m saying, please do, the floor is all yours.
Whew.
Brandon Chapman responds:
Posted: October 31st, 2005 at 11:32 am →
I must say i got here by mistake, but now i know it’s destiny. Great site!