Using correct HTML headings


 

The problem:


The current template has some inconsistencies as to the use of headings:
  1. the main heading of the page is encoded as <h2>;
  1. the page body can contain <h1> elements, hence higher-order headings than the main heading;
  1. the set of available headings that can be produced with wikka markup includes h1, h2, h3, h4, h5, but not h6, which is allowed by W3 specs.

The reference:

[Source: HTML Techniques for Web Content Accessibility Guidelines 1.0]

1.2.1 Section Headings


Checkpoints in this section:
Use header elements to convey document structure and use them according to specification
Long documents are often divided into a variety of chapters, chapters have subtopics and subtopics are divided into various sections, sections into paragraphs, etc. These semantic chunks of information make up the structure of the document.
Sections should be introduced with the HTML heading elements (H1-H6). Other markup may complement these elements to improve presentation (e.g., the HR element to create a horizontal dividing line), but visual presentation is not sufficient to identify document sections.
Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not "skip" levels (e.g., H1 directly to H3). Do not use headings to create font effects; use style sheets to change font styles for example.

The solution:


Here's my suggestion list, which includes a point already made by JW and others:

  1. replace the <h2> in the page header with a <h1>;
  1. allow in the page body headings from <h2> to <h6> (note that it's enough to make a small change in the formatter to prevent h1 tags and to enable h6 tags).



CategoryDevelopmentMarkup CategoryLayout
Comments
Comment by NilsLindenberg
2005-05-23 12:11:51
>replace the <h2> in the page header with a <h1>;

what happends to existing pages? Converting the first header into <h1> or would doing as now be sufficent?

and what about <h1> in embedded html?
Comment by DarTar
2005-05-23 12:45:19
>what happens to existing pages

Nothing special, provided the CSS are adjusted to reflect this change.

>what about <h1> in embedded html

Using headings with no order in the page (or multiple h1) AFAIK just makes pages less accessible or badly structured, not syntactically invalid. SafeHTML guarantees security issues in embedded code, but there is no way to automatically make embedded code accessible and well structured: creating well-formed documents is up to the user. On the other hand, Wikka should aim to provide markup for *accessible* and *well-formed* page structure, by discouraging bad practices and by allowing all the options supported by the XHTML specifications (including h6 headings).
Comment by JavaWoman
2005-05-23 17:59:58
>what about <h1> in embedded html

Structurally, in general there is no problem with having multiple h1 headings in a page (as long as levels are properly nested). So there is nothing wrong /per se/ with having a h1 in embedded code.

On the other hand, given how a Wikka page is structured, with the page name part of the main header (which indeed should become h1), *logically* there should be only that h1 heading.

Given this reasoning, I like the proposal - even though h6 is rarely used, it can be useful at times, and it would give us access to it while making it at least 'harder' to use another h1 which logically isn't a good idea (even though we won't stop it from happening with embedded code).

Adapting the stylesheet for this should be trivial - and it will need to be restructured anyway for a better-structured template. Maybe we can give some hints for people how to adapt their own stylesheets to the new template structure though (once we've finalized that, of course).

Conclusion: good step forward!
Comment by ErikAnderson
2009-03-08 21:07:30
On our wiki we are discovering that we have a huge need for Wikka links to headings ~within~ a page, like is commonly done in Wikipedia. It would be nice if some kind of <a name="foo"></a> code was co-generated in the html. We have been splicing html snippets like these into pages, but then when we link to the page ~also~ by coding full-URL snippets in html, that link picks up the "external link" format. So now we have the external link formatting feature turned off and we code our external link formatting by hand as well. Our pages are turning into a right mess. Help! :-p
Comment by BrianKoontz
2009-03-08 23:08:39
Erik, see if this ticket is what you're looking for:

http://wush.net/trac/wikka/ticket/471
Comment by ErikAnderson
2009-04-24 11:04:03
It looks like auto-generated anchors are still slated for a future release?

This page -- [[KickTheDonkey]] -- however, solved our biggest problem. I've updated the instructions to include version 1.1.6.6; ditto for [[OpenExternalInNewWindow]]
Comment by EmeraldIsland
2009-05-02 08:33:29
I prefer having the choice to use all "hx" tags in the page I want to edit. For header, I prefer to replace all "hx" by "div" and corresponding CSS rules. I consider the header only like a decorative element with some useful functions (like menu, search form...) on my hidden wiki website. With "div", you don't need to break anything, just the template header.php and wikka.css file.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki