HTML 5 Outlining Aesthetics

HTML & CSS
1

To those who are familiar with the concept of HTML 5 Outlining, something about seeing “Untitled _______” in the outline bugs me, but semantically, adding a HEADING tag isn’t needed (though I could use CSS to hide it visually) ie

<section>
<p>Test</p>
</section>

Results in “UNTITLED Section”, though the code is exactly what’s needed.

<section>
<h1>Title Here</h1>
<p>Test</p>
</section>

Results in “Title Here” (which looks nice, but has a HEADING tag that isn’t needed, and CSS needs to now make it display: none)

So am I putting too much emphasis on the outline, or should I be more concerned with the code being right?

2

While it would be nice to have a comprehensible document outline, headings at the top of a <section> element are only recommended, not required.

If your solution is to add a heading and then hide it, you’re better off with “Untitled SECTION” in the outline.

3

Would you say “Title here” if you read the page to someone else over the phone?

4

It makes no sense to put “Title Here” when it isn’t there. :wink: Similarly to what zcorpan says, picture blind users having the page read out to them with a screen reader. That title might get read to them.

If a section doesn’t need a title, it’s probably not a section. Perhaps you’d be better off using a <hr>.