How can I automate the IDs of my HTML headings?

Question

<h3 id="My_Heading">My Heading</h3>
<h3 id="My_Awesome_Heading">My Awesome Heading</h3>

Whatever your heading text is, is what the id of the header is

Is this something that can be automated? I saw this on a websites code with firebug. If it is automatic, what is it called?

Answer 1

You can do this with a little bit of jQuery

To take the ID and create your H3 text from that...

$(document).ready(function() {
    $('h3').each(function() {
        var newHeading = $(this).attr('id'); //Get the ID
        newHeading = newHeading.replace('_', ' '); //Replace the _ with a space
        $(this).text(newHeading); //Replace the H3 text with the new heading
    });
});

...or to take the heading text and generate the ID from that...

$(document).ready(function() {
    $('h3').each(function() {
        var newID = $(this).text(); //Get the H3 text
        newID = newID.replace(' ', '_'); //Replace spaces with _
        $(this).attr('id', newID); //Attach the new ID
    });
});

Of course, these both rely on the user having JS and for that reason, you should make sure you have a suitable fall-back for users with JS off

Answer 2

This cannot be done without some external script.

If you already use e.g. PHP/ASP to display the pages I would use that.

However you have to be cautions when you are going to automate this.

Remember ids MUST be unique on the page.

Also keep in mind that you should 'normalize' the generated ids to follow the rules for ids.

What do you want this for. Do the ids enable users to make use of 'internal' links on the page?