Progressive Enhancement Part 2, Semantic Markup
Follow along with the HTML source at: template.txt
... and be sure to look at how it renders at this stage as template.html
Clean, simple, legible, usable... might not have all the bells and whistles, but if it fell back on this when those fancy bits are blocked or fail to work, it's not the end of the world. This is basically what screen readers, braille readers, search engines, and everything else that's not a visual user-agent will get for a page.
The main title becomes a H1 since EVERYTHING on every page of the site is a subsection of, well... the SITE. That's what a H1 does and is for. Just like how in books or newspapers the name of the paper/document is at the top of every page or fold-pair. The presentation might be different on the "cover", but it's still a H1 on EVERY page.
HTML doesn't have an actual "de-emphasis tag" but in professional writing if text in a heading is smaller, it's typically de-emphasized which is why we use small. The semantic meaning of what doing that would mean in a properly written document. That does not mean we should actually force the text smaller; it just means it WOULD be smaller when normally written for a semantic reason.
The menu is a list of choices, that's a no-brainer. We don't need HTML 5's malfing "nav" section to say skip it, and we'll get to WHY on that very shortly.
NORMALLY I say don't bother with DIV at this stage, but the social media and news announcements are placeholders that do not qualify as grammatical paragraphs. Just because something is text, that doesn't make it a paragraph any more than a lone image tag on it's own or a media embed is.
Finally our main topic header becomes a h2, saying "this is the start of a subsection of the H1". An H3 means the start of a subsection of that H2 and so forth down the line. That's why skipping past heading numbers is gibberish, that's why pairing headings together for things like title and tagline doesn't make any sense either.
... and if headings mean to divide the page into sections, what in blazes do we need a <section> tag for? If the first H2 after the H1 is our main content since we have a proper document order, what do we need the <nav> tag for? Remember NAV just marks a section as being "skippable before the content" -- so why couldn't we just skip to the first heading after the H1 as the start of the content?
Then we have a H3, our content paragraphs, another H3, content paragraphs, clearly implying that both are subsections of that H2. *YAWN*. If you can't see the logic in that, you probably should give up now.
Featured articles becomes a H2... why you ask? Because it's not a subsection of "Recent Blog Entries"! It's a sibling to it, and a subsection of the page's H1... as such they are SIBLINGS.
Our list of choices becomes lists, and I put anchors on them since they are quite clearly going to be links to elsewhere.
In the same vein for others and advertisement are also H2, as they are NOT subsections of anything but the H1!
Finally we have our footer... I have a HR there NOT because I want a line drawn across the screen, but because a horizontal rule indicates a change in topic or section where header text is unwanted or unwarranted. Basically we treat them as H2. As the last one on the page this is clearly the footer, so we don't need HTML 5's garbage <footer> redundancies either.
... and that in a nutshell is our semantic markup stage of saying what things are WITHOUT even thinking about our layout or style. This stuff should be done LONG before things like visual design are even CONSIDERED!!!
