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!