Re: use id="xx" instead of <a name="xx"> in html output

[Per Bothner]

On 02/08/2016 09:37 PM, Gavin Smith wrote:
> On 9 February 2016 at 02:11, Per Bothner <address@hidden> wrote:
> > Currently, in html output the node "Foo" generates a <a name="foo">
> > element.  In general I think it is better to an id="Foo" attributes.
> > Reasons that come to mind:
> > (1) Simpler and less cluttered html, since we can attach the id attribute
> > to some other suitable element, rather than generating a separate one.
> > (2) JavaScript code can use getElementById to find the node.
> > (3) Better logical structure, since we can attach the id to something
> > that "represents" the node - typically a <div> node.
>
> Reason (2) is a good reason, although I wonder if there isn't some
> other way to achieve the same result in JavaScript. For example,
> follow a hyperlink to "#Foo" where "Foo" is the name of the node.

I don't know of a good way to "follow a link" except by changing the location.
Though I'm still learning.

The info.js snippet I posted used brute force to search the entire document
for the <a> containing the name attribute.

> Reason (3) I discuss below. Reason (1) is minor.
>
> Another problem is whether this use of "id" is valid for the version
> of HTML we target: the files are declared as "HTML 4.01 Transitional",
> but I read that this use of the "id" tag was only introduced in HTML5?

"id" is in HTML 4.01:
https://www.w3.org/TR/html4/struct/global.html#adef-id

> > I suggest two categories of <div> elements:
> > A "node" includes all the content of a single node,
> > but *not* sub-nodes.leaves unanswered
> > A "chapter" or "section" (or "part" or whatever) <div>
> > encloses the current node - and sub-nodes.
>
> I see no need for a two levels of <div>. "Nodes" are an artifact of
> the Texinfo source. They don't have an idiomatic meaning in HTML. In
> the Info format, they define the target of a cross-reference and also
> define a sub-unit of the Info file.

A node does have a meaning in HTML: It is the part of a chapter/section/
whatever that is not a child chapter/section/whatever.  As such it is
useful if you want to simulate --split=node after-the-fact.  Specifically,
you may want to hide everything except the current node.

In CSS:
div[current="false"} { display: hide }
and then you use JavaScript to set the "current attribute to "false"
on all nodes except the current one.

> The idiomatic way to show a chapter structure in an HTML file is with
> the heading commands <h1>, <h2>, <h3> etc. No need to wrap each
> section in two layers of <div>s.
> ...
> Something like:
>
> > <h2>Chapter1</h2>
> > Preamble
> >
> > <h3>Section11</h3>
> > section11-text
> >
> > <h3>Section12</h3>
> > section12-text
>
> is more idiomatic HTML.

This would imply the wrong structure, since the "header" for a chapter
comes *before* the h2.

It also is more complicated for tools (including JavaScript)
to figure out the structure.

Rather than using <div class+"section"> it may make sense to use HTML <section> 
elements.
And maybe <header> (or <nav>) elements for the links.
These should be harmless in order browsers (though that needs to be tested).

So my example becomes:

<section class="chapter" id="Chapter1"><div class="node">
<header>LINKS for chapter1</header>
<h2>Chapter1</h2>
Preamble
<table class="menu">...</table>
</div><!--end of "node"-->

<section class="section" id="section11"><div class="node">
<header>LINKS for section11</header>
<h3>Section11</h3>
section11-text
</div><!--end of "node"-->
</section><!--end of "section"-->

<section class="section" id="section12"><div class="node">
<header>LINKS for section12</header>
<h3>Section12</h3>
section12-text
</div><!--end of "node"-->
</section><!--end of "section"-->

</section><!--end of "chapter"-->
--
        --Per Bothner
address@hidden   http://per.bothner.com/