Camen Design Forum

outline help

append delete cjm


I have been self-learning html+css and currently stuck with my document outline.

I have "untitled sections" within my outline in various places and do not know what to do with them.

I have read somewhere that i can put a h1 tag inside of them and then remove the visibility with css.

Is this true or is there anything else I can do?


Reply RSS


append delete #1. xj9

I'm not sure what you mean by "document outline", but if a section doesn't have a title it shouldn't have an `<h1>` tag there saying it does (even if the tag is empty and/or hidden by css).

append delete #2. Martijn

@xj9, the document outline is a way of parsing HTML5 documents with sectioning. This way every part of a document can be associated “with a particular section and potentially a heading” [1]. In theory this would make documents more accessible to assistive technology such as screen readers.

But it is actually rather theoretical. As late as October 2013 it was labelled as “fiction” by Steve Faulkner after he could not find a single user agent (ie. browser) that implemented it [2]. He even went as far as calling it “dangerous fiction”, because with it not being implemented by browsers it means following the HTML 5 spec to the letter is actually harmfull to accessibility.

This last warning seems appliciable to @cjm. You write about putting “a h1 tag inside of them”. But you should really be using the proper heading element number. To quote Faulkner from the previously mentioned article:

If you as a developer want to provide a meaningful document structure, use the h1–h6 elements to express document structure. DO NOT rely upon the HTML5 document outline.

Using the right numbers has the added benefit that you will have (nearly) the same document outline in HTML 4.01 and HTML5 [3].

Now onto the core of your question of untitled sections.

I have read somewhere that i can put a h1 tag inside of them and then remove the visibility with css.

I am guessing you read Document Outlines by the HTML5 Doctor [4]? If not, you should start there. They recommend you have a title for every section “for accessibility reasons” and also offer the alternative for hiding them. Yes, you can do this. What these accessibility reasons are is left unsaid, and since nothing implements the outlining algorithm I am unsure if there really are any. It should also be noted that they do not do this themselves: the main navigation on the HTML5 Doctor website does not have a title.

Of course, other people will argue that navigation elements should have titles too: [5].

So where does this leave you? I don’t know. You could choose not to care about it, like how nobody really tested or cared about it back in HTML 4.01. (I am lying, the WAI and their WCAG have been around for a long time and Joe Clark wrote about headers in his 2002 book Building Accessible Websites. Chapter 7 [6].) You could choose to follow the HTML5 spec to the letter [1]. You could also take a hard stance on giving all sections a title.

It will be a personal choice and it has very little effect on current browsers.

Personally I try to give all content sections a title. This means I keep things like navigation elements untitled. This, to me, is also a design choice. Most of the time showing a title above/beside the main menu breaks the design of the page, and I will not add headers just to hide them. That is my personal choice. But I make sure that my `article`s have titles and any sub-`section`s have titles.

I hope this – and the articles I have linked here – can get you unstuck.



append delete #3. cjm


Thanks for the in-depth reply, after much googling I accept what you are saying and think your way is a good way to go.

Really has taken the weight off this problem for me, thanks again.


(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn