I was poking around CodeAcademy this afternoon, trying to decide if I want to use the HTML/CSS modules with my classes.
It’s been almost 20 years since I started teaching HTML. So it really sets my teeth on edge to read this:
There are six heading sizes, where <h1>is the boss and</h1><h6>is puny!</h6>
As the W3C explains, the h1, h2, h3, h4, h5, and h6 elements “have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.”
RANK.
Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.
Without CSS, the browser determines the type style and size that is associated with the headings. It’s true that the early browsers sucketh seriously: the programmer-determined sizes/weights bore no relationship to information hierarchy. So even though it was wrong, I understood why, in the mid-90s, visual designers jumbled the headings in order to create visual order.
But today? With CSS easily handy to impose a visual hierarchy that matches the rank hierarchy?
One thousand times NO! Never code like CodeAcademy’s example:
It’s possible – but unlikely – that this is the only such error.
But holy cow, Batman! How long has this tutorial been online? I can’t be the first person who looked at this and said, “WTH?”
When I started teaching HTML in the mid-90s, I had to correct errors like this in what were v1 HTML textbooks. In fact, I quit teaching in one program because admin insisted that we all use the same textbook, which was riddled with coding errors. Intellectually, I understood the policy: keep a semblance of uniformity across classes taught by adjuncts. But emotionally? I couldn’t use the textbook. And it took too much (unpaid) time to develop a set of fixes for every example. Which no other instructor would have been using.
With this one very basic error, CodeAcademy has squashed any enthusiasm I might have had for using it as a resource.
I’d like to learn PHP and was thinking about using CodeAcademy to get a jumpstart. But now … I wonder what errors I’d learn along the way that I’d have to unlearn later.
Not worth my time.
Conceptually, I think CodeAcademy is the bee’s knees. I love the idea of universal code literacy.
But to think that there are thousands – maybe millions – of people around the globe getting their basic start with HTML without a fundamental introduction to structured information … it makes me want to cry.
3 replies on “HTML 101: headings are not about “sizes””
Thanks! It’s always great to hear how others teach/explain this concept.
Of course, I have no idea if outlining is still taught as a way to structure a paper …
I don’t think outlines are still taught. But I use the example anyway.
I liken headings to topics in an outline with its hierarchy of topics and subtopics. I often actually create an outline on the whiteboard starting with the Roman numeral I, proceeding through upper alpha markers, then arabic numerals, then lower alpha and so and down the line. Then I compare each of those levels to a heading element.