Prevent html h2 tag being highlighted

Question

I am using a h2 tag under a picture that is part of the background as one of my buttons, the tag is just several &nbsp so there won't be anything there.

However if I click it twice, fast enough, it will highlight it, as if text was actually there, what can I do to prevent this?

A related question: http://stackoverflow.com/questions/826782 — Nathan Ryan, May 13 '11 at 15:02
Why are you using an empty h2? That is a very inappropriate use of headings. — akamike, May 13 '11 at 15:03
I'm not sure that is possible, what are you trying to achieve? Sounds like css could do the work for you — piddl0r, May 13 '11 at 15:04
Im using an empty h2 because I don't want to use regular html buttons instead I have pictures for my buttons and the h2 behind it acts as the receiver of the click. — user541597, May 13 '11 at 15:08
For buttons you should be using `button`, or if you actually mean links with a more decorative design then `a` is more appropriate. `h2` is not appropriate for this at all, and providing no text for something that is supposed to be interactive only makes it worse. — akamike, May 13 '11 at 15:12

score 3 · Answer 1 · answered May 13 '11 at 15:21

You should not use a h2 for a button. It is used for defining headers, which define the structure of your document.

If you want a button that is actually an image, do something like:

<button id="myButton">Do something</button>

#myButton {
    width: 50px; height: 20px; //the dimensions of your image
    background: url(myimage.png); //the URL of your image
    border: none; //hiding default button borders
    text-indent: -999em; //hiding the default text
}

The default text is needed for accesibility. People with a screen reader should be aware what your button does. This way you can also keep other useful properties of your button (like having a tabindex, being able to get focus, etc.).

score 2 · Accepted Answer · edited May 23 '17 at 11:47

Please take a look at Tim Down's great answer.

Quoted:

In most browsers, this can be achieved using CSS:
*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
For IE < 10 and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:
<div id="foo" unselectable="on">...</div>
Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

You forgot to mention `unselectable` as also mentioned in [Tim Down's stackoverflow answer](http://stackoverflow.com/q/826782/681807). You should have copied all of it and then given him credit - do you not know how referencing works? — My Head Hurts, May 13 '11 at 15:11
Sorry, got this from my own code, please enlighten me with how I can reference to other answers, for future questions. — martnu, May 13 '11 at 15:27

score 2 · Answer 3 · answered May 13 '11 at 15:08

2

Instead of (ab)using the h2 tag by filling it with  s to create a gap, you should find a better way to achieve the desired effect.

Perhaps a margin-bottom on your picture will have the same effect?

answered May 13 '11 at 15:08

thirtydot

224,678
48
389
349

Prevent html h2 tag being highlighted

3 Answers3