Question

I am writing a simple webapp and I need a status bar. Something that updates often to reflect what JavaScript is doing. It will only contain text, short complete sentences, but in the future it might have small informational images. Like, "An error occured" or "Please wait, loading..." or "Player 2 has disconnected". Now, I know how to make one, but my question is:

What is the most semantically correct HTML element to use for this?

Or will I have to resort to a <div> or <span>? If so, which one? I generally avoid those because they seem like a last resort.

Also, the statusbar may be anywhere on the page. Don't base your answer on its location on the page, that's not what semantics is about.

Please support your answer with some sort of official resource (w3, anything) if you can.

Was it helpful?

Solution

Being unable to find any source of information, I'll answer all by myself and defend my position. My answer is: it depends. The direct answer to your question is that there's no element specific for the status.

However, when this happen the solution normally chosen is to use a generic element as <div> or <span> and assign it some semantics. This can be achieved with class and id, as you are well aware. We cannot expect html to be perfectly semantic and cover every case possible. They are trying their best to cover the most common uses.

A very similar case is the <nav>. It was really common to see <div class = "nav"> or similar code in old html. w3 realized of this and changed it to make it more semantic. Maybe/hopefully they'll do the same for all those class = "status" for a <status>, it just hasn't happened yet.

For solving your problem right now: I'd recommend using a <p class = "status"> actually if your code is going to contain only a paragraph, as it seems. It's slightly more semantic than <div> and <span>.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top