Possible CODE-variations?

[chaot]

What's the better way to code the content list of a book?

<p><a href="Xyz.html">Xyz</a><br/>

  <a href="abc.html#DeF">DeF</a><br/>

  <a href="abc.html#Ghi">Ghi</a></p>

or

<p><a href="Xyz.html">Xyz</a></p>

  <p><a href="abc.html#DeF">DeF</a></p>

  <p><a href="abc.html#Ghi">Ghi</a></p>

[JSWolf]

Originally Posted by chaot

What's the better way to code the content list of a book?

If your first link to a given file is the beginning of the file, do not use an ID. Also, forget the <br/>. That's poor coding. Use a <p></p> with or without a class as needed.

[Turtle91]

I agree with Jon about not needing an ID if you are linking to the top of the page, but I disagree with his statement that it is "poor coding" to use <br/>. There are two different purposes for the <br/> (go to the next line) and the <p> (start a new paragraph element). Technically (semantically) you aren't starting a new paragraph with each line of a TOC so a <br/> (or a <div> for that matter) would work fine. Effectively they will do mostly the same thing under most conditions, but they are semantically different. Honestly, if there isn't a specific reason for using one or the other, it's a matter of preference for which one you use.

I personally use the <p> tags... but that's just a habit instead of any particular reason.

Cheers,

[DaleDe]

Semantics do matter. Another interesting fact about /br is that it is ignored in the TOC generation by programs that auto-create the toc. So a multi-line title will show as one line in the TOC which is useful sometimes.

Dale

[JSWolf]

I've reported that all four threads on this one ToC be merged.

[dgatwood]

Originally Posted by Turtle91

There are two different purposes for the <br/> (go to the next line) and the <p> (start a new paragraph element). Technically (semantically) you aren't starting a new paragraph with each line of a TOC so a <br/> (or a <div> for that matter) would work fine. Effectively they will do mostly the same thing under most conditions, but they are semantically different.

A new paragraph usually looks very different from a <br> tag. The line break tag puts the following content exactly one line height of spacing lower than the text before it, as though the current paragraph wrapped to a new line. A new paragraph adds that space plus the paragraph's margin, which by default means that it looks roughly like two <br> tags in a row.

For a TOC, I would tend to use <ul><li> or <ol><li>. The content you're formatting is semantically a nested list. With the right styling, it can look like anything you want it to look like, but using proper list tags preserves the semantics of the content in the structure, which can be beneficial in some screen readers, IIRC, and also is useful for folks scraping the book and processing it in interesting ways.

So the short answer is that you probably shouldn't use either of the styles that you asked about.

[JSWolf]

Originally Posted by dgatwood

A new paragraph usually looks very different from a <br> tag. The line break tag puts the following content exactly one line height of spacing lower than the text before it, as though the current paragraph wrapped to a new line. A new paragraph adds that space plus the paragraph's margin, which by default means that it looks roughly like two <br> tags in a row.

That depends on how the CSS is coded. I code my CSS so <p></p> does not add any extra space. I use a top and bottom margin of 0. Sono, the <p></p> does not have to add any space. Also, you can use a class to further define how the ToC entries are coded.

[Turtle91]

Originally Posted by JSWolf

That depends on how the CSS is coded. I code my CSS so <p></p> does not add any extra space. I use a top and bottom margin of 0. Sono, the <p></p> does not have to add any space. Also, you can use a class to further define how the ToC entries are coded.

So you use:
<p class="someclass">something</p>
<p class="someclass">someone</p>
<p class="someclass">somewhere</p>

to duplicate the look of:
<p class="someclass">something<br/>someone<br/>somewhere</p>

interesting.

Although, as I said, I use something like:
<div class="someclass">
<p>something</p>
<p>someone</p>
<p>somewhere</p>
</div>

and define CSS:
div.someclass p {whatever}

There are multiple ways to make it look the same. The only real difference is how semantically correct you want it to be. I actually think dgatwood had the better argument that a <ul><li> is more semantically correct.

It's just very difficult to understand why you would tell someone their way is "poor coding" and yet you give them an example of equally poor coding without explaining your reasoning.

Cheers!

[JSWolf]

Because <br/> is always described as poor coding.

[chaot]

Originally Posted by JSWolf

I've reported that all four threads on this one ToC be merged.

What is this about?

[JSWolf]

Originally Posted by chaot

What is this about?

It's about the fact that you started FOUR different threads on this ONE ToC.

[chaot]

Sorry! It's not like this. In all my recently opened threads, different questions are dealt with. In my opinion, a merger is impossible. I contradict this request most decidedly.

[chaot]

A list of contents is a list per definitionem. And that's exactly why this should be semantically reflect in the code. (Similar as <i> or <em>.) @dgatwood

Karma is distributed to everyone involved! ...there are many roads leading to Rome. Even if there are good and less good ones.

According to the original look of the book I code an <ul> list inside/not inside (not yet decided) <div></div> tags.

[JSWolf]

Originally Posted by chaot

Sorry! It's not like this. In all my recently opened threads, different questions are dealt with. In my opinion, a merger is impossible. I contradict this request most decidedly.

I disagree. These questions could have been asked in one message.

[chaot]

Supreme forum rule: One question - one thread.
Otherwise complaints will come, one would spare the effort of different threads.

And even if you were right here, I will learn much more on this path, or better said on these paths. That's it!