javascript - How to structure Fragment identifiers in my webpage -

this more of best practices/ease of upkeep question.

i have several webpages make browsing easier. so, going use fragment identifiers (internal links). here example of of html:

<article>      <h1>name of webpage</h1>           <h2>section one</h2>                here content of section one.            <h2>section two</h2>                here content of section two.            <h2>section three</h2>                here content of section three.            ....(may have additional h2 sections) </article> 

these webpages can hard navigate if there dozens of h2 tags. hope use side menu bar utilizes fragment identifiers link 'section one', 'section two', 'section three', etc.

now, need convert html code use fragment identifiers, before go changing code, wanted additional thoughts on how should this.

i have couple options:

1) manual change the

<h2> nameofh2 </h2>    

to

<h2 id='nameofh2'> nameofh2 </h2> 

then, add fragment identifier links in side menu manually.

2) manual change

<h2> nameofh2 </h2> 

to

<h2 id='nameofh2'> nameofh2 </h2> 

then, use javascript build side menu bar's fragment identifier links every time page loads.

i use method 2, add more content pages, automatically show in side menu bar, wanted see if there reason should not this.

also, have ton of tags edit, , wondering if guys had thoughts on how should add id's html. right now, considering writing program go through each page , edit each tag, wanted see if solution exists out there.

thanks in advance!

if don't mind internal links working when javascript enabled, generate both toc , fragment identifiers using javascript.

ppk has script that: http://www.quirksmode.org/dom/toc.html

if need work js turned off, generate both toc , ids server side.