The way headings are defined in "semantical" web sites is intellectual dishonesty

[aqw]

Hi.

It's very well explained so careful reading will pay off.

<h1>Articles</h1> 
... h1  content (some articles)
// end of <h1>

Is this legal? Of course it is. OK!

<h1>Articles</h1>
<h2>Article 1</h2>
... h2  content (article 1)
<h2>Article 2</h2>
... h2  content (article 2)
<h2>Article 3</h2>
... h2  content (article 3)
// end of <h1>

Is this legal? Of course it is. OK!


Let's all start thinking. Consider this:

<h1>Articles</h1>
<ul>...</ul>// Order by & sort menu.
<h2>Article 1</h2>
... h2  content (article 1)
<h2>Article 2</h2>
... h2  content (article 2)
<h2>Article 3</h2>
... h2  content (article 3)
<ul>...</ul>// Navigation menu (does NOT belong to last <h2>)
// end of <h1>

Is this legal? It isn't. In a <h1> (or any heading for that matter), if there are sub-headings (<h2>s in our example), you must continue using those sub-headings throughout the entire <h1>. So this example is unsemantical and false. Remark: If the first <ul> under the <h1> was a paragraph further clarifying the contents of the <h1> that would of course have been acceptable! (Only exception!)


Now consider this:

<h1>Articles</h1>
<h2>Order Menu</h2>
<ul>...</ul>
<h2>Article 1</h2>
... h2  content (article 1)
<h2>Article 2</h2>
... h2  content (article 2)
<h2>Article 3</h2>
... h2  content (article 3)
<h2>Navigation Menu</h2>
<ul>...</ul>
// end of <h1>

Is this legal? It still isn't. In fact, the nature of the <h2>s throughout the <h1> is not the same so it is horribly unsemantical (An article is not of the same nature as a navigation menu or order by menu!).


Solution: Well, ... now it's your turn to come up with the a solution.


More examples will follow.

Thanks for reading.

[r937]

i do not understand what you mean when you write stuff like this --

// end of <h1>

want to know where the h1 ends? it is right here ---> </h1>

have you run all of those html fragments through the validator? what sort of errors/warnings did you get?

[mikexx2020]

agw - Sorry no offence but thats the biggest load of cr@p ive read since joining SP

[logic_earth]

This is perfectly legal and semantic:

 <h1>Articles</h1>
 	<!-- Unordered List -->
 	<ul>...</ul>
  <h2>Header</h2>
 	<p>Para...</p>
  <h2>Header</h2>
 	<p>Para...</p>
  <h2>Header</h2>
 	<p>Para...</p>
 	<!-- Unordered List -->
 	<ul>...</ul>

[TannerC]

Is it legal that I find this humorous?

[zcorpan]

Use H1 for the nav instead then.

<h1>Articles</h1>
<h2>Order Menu</h2>
<ul>...</ul>
<h2>Article 1</h2>
... h2  content (article 1)
<h2>Article 2</h2>
... h2  content (article 2)
<h2>Article 3</h2>
... h2  content (article 3)
<!-- end of Articles section -->
<h1>Navigation Menu</h1>
<ul>...</ul>

Edit:

I don't quite understand what you mean about the Order Menu section, but if you think it's separate from the Articles section then place it outside that section...:

<h1>Order Menu</h1>
<ul>...</ul>
<!-- end of Order Menu section -->
<h1>Articles</h1>
<h2>Article 1</h2>
... h2  content (article 1)
<h2>Article 2</h2>
... h2  content (article 2)
<h2>Article 3</h2>
... h2  content (article 3)
<!-- end of Articles section -->
<h1>Navigation Menu</h1>
<ul>...</ul>

[gollux]

Huh? Either it's a really up there in the ozone concept, or a load of road apples trying to be expressed. Not enough explanation presented to really mean anything.

[r937]

oh wait, i think i see now what aqw was trying to say

that last UL doesn't really "belong" to the last H2, it "belongs" to the entire page (i.e. the H1)

unfortunately, html just isn't up to this challenge

i cannot see any nice way of solving this semantic question, unless that new SECTION tag might do the trick

my advice, aqw, is to forget it, let it be, and go in search of some other problems to solve

[Tyssen]

my advice, aqw, is to forget it, let it be, and go in search of some other problems to solve

And lighten up on the legal/dishonesty angle. No-one's going to prison for what you perceive to be a problem.

[Dan Schulz]

Exactly.

[AutisticCuckoo]

The last H2 (Navigation Menu) should be present, but may be hidden with CSS. The extra H2 for the 'order menu' should not be necessary, IMHO.

[blain]

Use H1 for the nav instead then.

<h1>Articles</h1>
<h2>Order Menu</h2>
<ul>...</ul>
<h2>Article 1</h2>
... h2  content (article 1)
<h2>Article 2</h2>
... h2  content (article 2)
<h2>Article 3</h2>
... h2  content (article 3)
<!-- end of Articles section -->
<h1>Navigation Menu</h1>
<ul>...</ul>

I always thought that only one h1 tag was best practice?

[zcorpan]

I always thought that only one h1 tag was best practice?

I've heard that too, but if the navigation menu isn't a sub section of Articles then you use the same heading level as Articles. (Perhaps there should be another top-level heading that covers both Articles and Nav.)

[r937]

rule #1 of holes: when you find yourself in a hole, stop digging

all this nonsense of trying to make something "semantically correct" is only making it worse and worse

Hx tags are semantically broken, they do not "include" the stuff that comes after them, so let's admit it and move on to some other problem

[Stormrider]

Maybe it should include the stuff...

<h1 heading="headinghere">
content
that
goes
under
the
h1
</h1>

Hmm, that just looks horrible actually.

[DaveWoods]

I've heard that too, but if the navigation menu isn't a sub section of Articles then you use the same heading level as Articles. (Perhaps there should be another top-level heading that covers both Articles and Nav.)

I agree, I'd have the page title in an <h1> and then both Articles and Navigation in an <h2>

<h1>'s should only appear once on a page and should be the page title so if more than one is being used then it is probably being used incorrectly.

[aqw]

Thanks all for your answers... I voluntarily made this post a little provocative to heat up the debate. I really didn't want to offend anyone. Sorry if I did.

Summary:

1/ It is a time waster to try to semantically define the "area" or "section" of a heading element <hn>. Hopefully the <section> element will solve this. That's not for tomorrow though.

2/ Situation: A <hn> heading followed by a top element (ex: explaining paragraph, etc.), middle elements (preceded by <hn-1>s), and a bottom element (nav bar, etc.).

The top element doesn't need a <hn-1> simply because when a user is on the <hn> element, the user will see it (Supposing the <hn> heading is on 1 line or otherwise very short). The bottom element, however, needs a <hn-1> heading simply because the preceding and last article can be very long. The nav bar won't be visible when over the last article's <hn-1> in that case. Therefore, it needs an <hn-1> heading also.

Moreover, the bottom element needs a <hn-1> heading to clearly indicate that it's not part of the preceding article. (That argument will no longer be valid when the <section> element will have become standard though).

Thanks for reading.


P.S.

agw - Sorry no offence but thats the biggest load of cr@p ive read since joining SP

That made me laugh. I must say I don't wholly disagree with what you're saying. As I said I made the post voluntarily a little provocative to heat up the debate. That said, maybe it's stupidity but don't be so sure... Trust me, genius is always on the brink of stupidity...

[Buddy Bradley]

Hx tags are semantically broken, they do not "include" the stuff that comes after them

That's not exactly true - the HTML specification says this:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

The following example shows how to use the DIV element to associate a heading with the document section that follows it. Doing so allows you to define a style for the section (color the background, set the font, etc.) with style sheets.

<DIV class="section" id="forest-elephants" >
<H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
...this section continues...
<DIV class="subsection" id="forest-habitat" >
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
...this subsection continues...
</DIV>
</DIV>

So we have a semantic element, the DIV, which provides the encapsulation of content that aqw is trying to imply with headings. The code in the OP would therefore be represented as this:

<h1>Articles</h1>
    <h2>Order Menu</h2>
    <ul>...</ul>
    <div id="articles">
        <h2>Article 1</h2>
            ... h2 content (article 1) 
        <h2>Article 2</h2>
            ... h2 content (article 2) 
        <h2>Article 3</h2>
            ... h2 content (article 3)
    </div> <!-- end of articles div -->
    <h2>Navigation Menu</h2>
    <ul>...</ul>
// end of <h1>

The heading level that the navigation menu should have is debateable.

[AutisticCuckoo]

Headings in HTML 'work' exactly the same as they do in normal typography. They provide a very brief summary of the content that follows, until the next heading at the same or higher structural level.