View Single Post
Old 04-01-2022, 10:11 PM   #71
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,361
Karma: 20212223
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by roland1 View Post
I'm just looking at the SIGIL wiki html lesson page to further educate myself as to what is possible/impossible with ebooks.

Does anyone have a comment about using <div> tags? I never used them in my ebook because I didn't think nesting was necessary for what I do. But I see the selector being used with image/caption combos. Any thoughts — pros or cons about their usage?
Reverting back to the semantics reasoning... If it has a specific tag: paragraph, heading, blockquote, list, etc. then you should be using those. The <div> is used pretty much for everything else... images, poetry, or, I like to use them when there is a group of items, usually paragraphs, that I like to style separately without having to define a class on every paragraph.

For example, instead of this:
Code:
p           {normal paragraph styling}
p.different {different paragraph styling}

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p class="different">This is a different style of paragraph.</p>
<p class="different">This is a different style of paragraph.</p>
<p class="different">This is a different style of paragraph.</p>
<p class="different">This is a different style of paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
You could use:
Code:
p               {normal paragraph styling}
div.different p {different paragraph styling}

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

<div class="different">
  <p>This is a different style of paragraph.</p>
  <p>This is a different style of paragraph.</p>
  <p>This is a different style of paragraph.</p>
  <p>This is a different style of paragraph.</p>
</div>

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
It makes the code much cleaner and IMO easier to keep track of what you are trying to accomplish.

I'm sure there are other uses/techniques people have around here.

One thing that really drives me nuts is when I see people use the <div> to replace an item that has it's own, semantically correct, tag. For example:

Code:
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
<div class="para">This is a normal paragraph.</div>
forever...

Last edited by Turtle91; 04-01-2022 at 10:14 PM.
Turtle91 is offline   Reply With Quote