htmlcss

How do you prevent header tags from stretching across the body width

I have some header links. Example JSFiddle

<a href="#"><h3>Some header link</h3></a>
<a href="#"><h3>Another link</h3></a>

The problem is that the clickable link area stretches across the page and doesn't just end where the text ends. So if the user clicks the whitespace to the right of a link, it still links them to that page.

Now, this is an interesting constraint but is there a purely HTML solution? I'd like avoid CSS if possible but if it's the only way to do it, then so be it.

Solution

  • h1, h2, h3, h4, h5, h6 are heading entities which are part of the block elements.

    To make them inline - try display:inline; or display:inline-block;.

    https://jsfiddle.net/gxwe1gpo/2/

    h3{
display:inline;
}