search

dashaluna / hm-content-toc

WordPress plugin. Creates content TOC (table of contents) for specified header elements from the current post/page content. Adds anchor elements in the content just before the matched headers.
GNU General Public License v2.0
9 stars 6 forks source link

TOC's HTML markup #17

Open dashaluna opened 9 years ago

dashaluna commented 9 years ago

@sanchothefat Hey, wanted your feedback on TOC HTML structure. Currently I have the following:

<ul id="content-toc">
  <li><a href="#heading-1">Header 2.1</a></li>
  <li><a href="#heading-2">Header 2.2</a></li>
  <li><a href="#heading-3">Header 2.3</a></li>
  <li><a href="#heading-4">Header 3.1</a></li>
  <li><a href="#heading-5">Header 6</a></li>
</ul>

Can I improve it in any way? I was gonna add a class to either li or a with the header element, for example class="header-h2", so it can be targeted for styling. But then thought I'd ask your advice in general :) Thanks!

roborourke commented 9 years ago

Hi @dashaluna, yep you're thinking along the right lines:

  1. Consider what might happen if someone puts the shortcode in twice or calls the output function as a template tag, IDs have to be unique so it might be best to add a number to the ID attribute
  2. Because IDs have to be unique and there's the possibility (however) slight of getting 2 of these on a page a class name styling hook would be a good addition too
  3. Styling hooks to indicate which level heading we're at are a very good idea, we may want smaller text / indentation
  4. Another possible approach is to use nested lists in the output, trickier to write but would remove the need for lots of styling hooks
  5. Keep your configuration options in mind when choosing class names as the TOC can take any tag names, class="heading-h2" could be more generic eg. class="toc-item-h2"

Hope that gives you a few ideas!

dashaluna commented 9 years ago

Thanks @sanchothefat for the feedback, hugely appreciated :) I wanted to clarify some things:

  1. Are you referring here to ID in the main TOC list <ul id="content-toc">?
  2. You mean add a class to <ul id="content-toc">?
  3. Yes, I was thinking about the nested lists.. probably at some point later on. It feels like a lot of work. Meanwhile I wanted to add at least class to elements to give an opportunity to style TOC better. I think li elements should have a class?
roborourke commented 9 years ago

Yo

  1. yep
  2. yep, so <ul id="content-toc-1" class="content-toc"> Ref #19
  3. agreed, <li> is the right place for the class to give devs control at a higher level Ref #12
dashaluna commented 9 years ago

@sanchothefat also, any SEO or accessibility best practices I should consider here?

roborourke commented 9 years ago

not that I know of, beyond perhaps a title attribute to say the link jumps you down the page. I don't think I'd bother just yet with that though.