<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?

  • But your heading text and ID are not the same in those cases; one is "My_Heading"; the other is "My Heading". – Lèse majesté Dec 9 '11 at 6:20

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


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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.