Do web applications need HTML header tags?

Question

The question is, should we design applications/forms using headers or stick to spans and divs? When the world was using html to link documents, these header tags looked like the 'Table of contents'. In the new era where html is used for applications, using header tags in the orthodox fashion (i.e. h1 contains h2, h2 contains h3 ...) doesn't make sense. Or does it?

The one place where these seem to make sense is in the context of text browsers or those with CSS disabled. Are there any implications of violating the nesting order (for e.g: h2 being the top level element instead of h1)

Edit By 'New era' I meant usage of html for interactive web applications. The notion of a header tag in a form or a mail application or a file sharing application is what I was questioning. I should avoid fancy names I guess, and I don't actually mean <h1><h2>...</h2></h1> It is more like the content organisation in MS Word.

I did work on some W3C compliant and AA compliant web pages, if it helps. The screen readers like dolphin supernova, just read the content, I fail to recognise how they distinguish headers or I may be missing some rather important feature.

Answer 1

h1, h2, h3, etc. are semantic. Divs and spans are not. Using headers means that agents can easily determine which pieces of content are headers, giving precedence to them in, for example, screen readers or search results. You can read more about the specific accessibility importance of header tags at the MDN web docs HTML section heading elements reference.

Answer 2

Note that headers are unnecessary in some web applications, as HTML was designed to semantically describe the structure of documents, not web apps.

Ideally, there would be a separate XML-based language that all browsers support the rendering of specifically for web applications. Something like XUL or XAML would probably suit the requirements. But since that's not the environment we make web applications in today, you're often stuck with HTML, which is generic at best (div, span) and irrelevant elsewhere (you don't need semantic headers in a web app).

The best approach from a pragmatic point of view, therefore, is to ignore semantically meaningful HTML tags in many cases and instead use classnames and id's to define structure. This way you'll still be developing your own semantic environment and programming in a way that separates presentation from content, which is one of the benefits of HTML and CSS, but not needlessly attaching yourself to the format "just because that's how it's done".

Hence, some answers in this thread miss the point: you're developing a web app, for which HTML was not designed. Don't force a square peg into a round hole.

Edit: Bobby Jack commented that there are, of course, still some web apps that define document-like views, such as Stack Overflow. So in those cases, of course, where relevant, use the correct semantic markup.

Answer 3

Use header tags for headers and style them with CSS as needed to achieve the look you want. The ordering should reflect the organization of the document, but you can give whatever look and feel to them that you want with CSS. I would say, though, that I'd use typography to reflect the organization rather than confuse it.

Answer 4

Firstly, the header tags shouldn't be nested. Ideally, h1, h2, etc, should only contain text, not other tags.

Secondly, as a guiding principle, you should only have one h1 tag per page, and ideally that should match your document title.

It's good practice to use header tags for headers, rather than spans or divs. Many search engines will weight keywords from these tags more highly than from inside other tags. Page summarizers will also make use of this structure.

Generally, if you have an odd ordering of header tags, or don't have any, you may be doing something wrong with your page structure. (Of course, you don't have to use them all, but a h1 tag is almost always a good idea).

Answer 5

Why do you feel structured markup doesn't make sense? Just because you can style any element according to your design wishes doesn't render semantics obsolete. For one thing, don't forget that search engines actually assign a different value to text which is inside important semantic elements, such as headers.

To answer the question in your title (Wow, that's a header! And google uses that!): yes.

By the way, what's this “new era” you're speaking of?

Answer 6

It does make MUCH sense. Your code should have a meaning (from a semantic point of view). If you want a header, hX is the tag you should use. A span or a div will work, but it is not a header.

Take a look at a similar discussion.

Answer 7

Other than the browsers where settings are such that the browser style overrides your CSS (user styles), I don't think that there are any other problems if you use h2 before h1 or vice versa.

Also, as you said using headers formats your document to an extent without even having CSS.