Syntax Question:
Semantics Question:
~TehYoyo
Inside. They are inline elements, which must not contain block elements. (Note that HTML5 will allow for <a> wrapping around block elements—you know, paving the cow pats and all that.)
Should I use an H1 for footer items?
No. There should only be one H1 per page, and really, that belongs at the top—the main title of the page. (Again, HTML5 will change all this—you know, paving the cow pats and all that.)
OK. So then what would I use for footer elements?
If you haven’t seen it, I can link you to an image of what I’m talking about.
~TehYoyo
I would use a ul, as it’s a list of links.
I definitely wouldn’t use a heading, h1 or h(anything) - 'cos it ain’t heading. A heading has to have some content following for it to “head”. 
It depends on what’s in the footer. If the footer content needs a heading, then give it one; but make it one that fits the pattern of the rest of the page. I would probably lean towards H2. Image the page with CSS off. It usually makes more sense to have H1 at the top, then content below that divided between H2s and so on. As the footer is a separate section, it seems logical to me to head it with H2. Unless, of course, it is just a list of links … in which case use a list.
Yeah. It’s like privacy policy, copyright info, etc.
So probably a list? What about a paragraph tag?
~TehYoyo
If it’s a list, aka what you are describing, then use <ul>. A single line of text doesn’t mena it’s semantic to slap a <p> on it. Just stick to the UL LI A format for the footer if you have those assortment of links :).
Yeah. I guess that’s what I’m going to do.
Thanks all - this may be closed.
~TehYoyo
I just want to say… praise be and hallelujah!
Ralph – on the money… it’s actually kind-of a laugh – why would a footer be a heading?
RyanReese – you’re my new best friend for basically quoting what I’ve been saying for years – just because it’s text, doesn’t mean slap a P around it (or worse, things that AREN’T text that get P slapped around them! – like OBJECT or IMG – whiskey tango foxtrot territory)
@tehYoyo, (and anyone else looking to learn) one of the things about semantics that’s VERY poorly drilled in is the proper use of heading tags or even what a heading tag is FOR.
Heading tags indicate the start of a section of the page, lower order (higher numbered) headings indicating a subsection of the higher order (lower numbered) heading preceding it – which is why skipping heading levels (like say jumping from H2 to H5) is ‘broken’, and why there generally should only be one H1 on the page.
Think of it like a filesystem tree:
H1 is like root (/) – on a filesystem all files and directories are ‘under’ it… on a document the h1 is the defining instance of all content on the page; which is why as Ralph said it pretty much should be the first thing in the markup for a content element.
H2’s would be the subdirectory of root (/images, /downloads, /theme) – or each of the major subsections of the page.
H3’s of course would then be subdirectories in the top level subdirectories (/downloads/pdf, /downloads/video, /theme/scripts, /theme/images)
… and so on and so forth down the page.
When you are adding a heading there are questions you need to ask yourself:
1) Am I starting a new section?
It’s amazing how often people put headings in their code when they are NOT starting a new subsection. See this common practice of taglines:
<h1>Site Title</h1>
<h2>Tagline</h2>
Semantically and in terms of using headings properly, that’s just gibberish. Doesn’t make any sense. The tagline isnt’ starting a new subsection of the page – that borders on choosing the tag just based on it’s default appearance – and as I’ve said for ages if you choose your tag based on it’s default appearance, you’re probably choosing the wrong tags! That should either be a small tag inside the h1, or a DIV after. (maybe a P, though I’d be hard pressed to give a tagline that much weight)
2) Does this section need a heading
Footers often don’t have or warrant a heading tag – in which case you should be using HR to indicate a change in topic without a heading. That’s what horizontal rules are for. (amazing how many people think that’s “new” to HTML 5 – apparently nobody bothered reading the HTML 2 or 3 specs or bothered grasping the basic concepts of semantics)
3) is this a subsection of the header before it or kin to it.
It’s often a laugh when you see people who think they should just use heading tags ‘in order’ down the page when the various bits are not subsections of each-other… or how people will use h5’s on a sidebar for ‘lower weight’ when they are effectively saying they are subsections of the content column – making it total gibberish if you are trying to navigate by headings or pull up a document structure. This is why the practice of making the content heading a H1 is also broken gibberish; Think of a newspaper – just because “MAYOR CAUGHT TAKING MILLION DOLLAR BRIBE” is presented in a massive text as the big headline, that doesn’t mean “K-6 GETS NEW BUILDING” or “WOMAN ARRESTED FOR DOMESTIC ASSAULT” are subsections of it! (at least one would hope not)… and that’s what making a content area heading the h1 would basically be saying. You look at all the pages in a book or all the pages in a paper, what’s at the top? The name of the paper and the date - the topmost heading gluing all those pages together; just like a H1 on a website should. It might not be in the massive text it is on the cover or front-page, but that’s presentation which has absolutely NOTHING to do with semantics or structure.
Bottom line on headings, they exist to mark the start of subsections, and the end of any sibling subsection preceding it… which is why properly done semantic websites typically have this type of structure: (ooh, time to drag out some ascii art)
<h1>Site Title and/or Logo<br /><small>With tagline (if any)</small></h1>
|
+-- <h2>Content area title</h2>
| |
| +-- <h3>subsection title</h3>
| |
| +-- <h3>subsection title</h3>
|
+-- <h2>SideBar subsection title</h2>
|
+-- <h2>SideBar subsection title</h2>
|
+-- <hr /><!-- start footer content -->
Pay particular attention to that HR, indicating the footer content is NOT part of the last H2 in the sidebar! I often put a HR before the first H2’s parent wrapper as well, just for structural consistency to make sure we know anything between the h1 and h2 are unrelated. (like the menu, search form, etc)…
So incredibly simple, I’m shocked the number of people who seem to argue it or just sleaze together their pages any old way… They exist to break up your content into a meaningful structure – and it’s why all those new fancy HTML 5 structural tags are just pointless bloat.
I used to be guilty of that when I first started out, until I actually read up on it via the internet, and it really does make sense. How is a single line a paragraph? <p> is paragraph. Single line = NOT a paragraph. I liked how you worded it in your last signature about “slapping one on”. I plagiarized the way I had the message come out, from you, with the word “slap” ;).
I need to clean up my sites code…on that note. It was hastiliy thrown together :o.
That’s fair enough, but don’t be too absolute about it. It’s perfectly fine to have a single sentence marked off as a paragraph in English writing. I don’t know how that stands in relation to HTML rules, but just sayin’.
The reason I suggested that an H2 could be appropriate for a “footer” is that footers are taking on a new identity these days. Rather than just being a place for a copyright notice, they can be a handy section of “Extras” that aren’t directly related to the main content of the page … in the which case a heading is not out of order. Personally, I think the footer (or bottom section of the page) is where most or all “sidebar” content should be (I’m going through an “I hate sidebars” phase right now).
All the same, over the last year Jason has re-awoken me to the real purpose of the <hr>, for which I’m full of grate.
What if I don’t want the visual appearance of an hr?
Set it to display:none and move on?
~TehYoyo
Yes.
So it’s purely semantical?
~TehYoyo
If you hide it, yes.
Why do you sign every post? We know you you are.
OK. Thanks.
Eh, I don’t know. By now it’s become sort of a routine.
~Teh
~Person facing identity crisis
I’m curious what you could write up in English that would be defined as a paragraph. Not being cynical, genuinely curious.
In print, a paragraph is one or more sentences marked off as a block either by a line break or an initial indent. What commonly distinguishes one paragraph from another is a change in theme or topic.
‘Para-graph’ literally means written (or drawn) alongside.
Grammatically, a new line of dialogue that switches characters would constitute a new paragraph.
~TehYoyo
Yes indeed. There are more examples than the ones I listed.