How to structure Fragment identifiers in my webpage

Question

This is more of a best practices/ease of upkeep question.

I have several webpages where I would like to make browsing easier. So, to do that I am going to use Fragment identifiers (internal links). Here is an example of some of my HTML:

<article>
     <h1>Name of WebPage</h1>
          <h2>Section One</h2>
               Here is the content of my Section one.

          <h2>Section Two</h2>
               Here is the content of my Section two.

          <h2>Section Three</h2>
               Here is the content of my Section three.

          ....(may have additional h2 sections)
</article>

These webpages can be hard to navigate if there are dozens of h2 tags. I hope to use a side menu bar that utilizes Fragment Identifiers to link to 'Section One', 'Section Two', 'Section Three', etc.

Now, I need to convert this html code to use Fragment Identifiers, but before I go about changing this code, I wanted to get some additional thoughts on how I should do this.

I have a couple options:

1) Manual change the

<h2> NameOfH2 </h2>

to

<h2 id='NameOfH2'> NameOfH2 </h2>

Then, add the Fragment Identifier links in the side menu manually.

2) Manual change the

<h2> NameOfH2 </h2>

to

<h2 id='NameOfH2'> NameOfH2 </h2>

Then, use Javascript to build the side menu bar's Fragment Identifier links every time the page loads.

I would like to use method 2, so that as I add more content to my pages, it will automatically show up in the side menu bar, but I wanted to see if there was any reason I should not do this.

Also, I have a ton of tags to edit, and was wondering if you guys had any thoughts on how I should add the id's to the html. Right now, I am considering writing a program to go through each page and edit each tag, but I wanted to see if a solution already exists out there.

Thanks for any help in advance!

This is a design question rather than a technical question suitable for SO. But on the technical side, you can assign `id` attributes to `article` elements; this matters especially if you style with `:target`. And of course you should generate the attributes and the internal table of content server-side. — Jukka K. Korpela, May 15 '13 at 07:50

score 1 · Accepted Answer · answered May 15 '13 at 06:17

If you don't mind the internal links only working when JavaScript is enabled, you could just generate both the TOC and the fragment identifiers using JavaScript.

PPK has a script that does just that: http://www.quirksmode.org/dom/toc.html

If you need it to work with JS turned off, you could generate both the TOC and IDs server side.

How to structure Fragment identifiers in my webpage

1 Answers1