hrecomms hrecomms - 1 year ago 96
HTML Question

Is there a reason why hr elements cannot be used as anchors?

I've got a webpage in standard FAQ format, with each question listed as a link to its answer.

We have several

hr
elements that have been used as anchors - each with a unique assigned
id
attribute - but links don't appear to be functioning properly.

Anchor links appear to work with other elements, but not
hr
- and I can't find anything online suggesting that
hr
elements cannot be targeted as anchor points.

Can I not use
hr
elements for anchor link destinations for some reason?

Example, using edited content:

<ul>
<li><a href="#requirements">What are the technical requirements for using the online application system?</a></li>
<li><a href="#jobboard">Which job board should I use to apply for a position?</a></li>
</ul>

<hr id="requirements" />
<h3>What are the technical requirements for using the online application system?</h3>
<hr />
<p>The COMPANY uses an online application system for most of our job postings. This system lets you create a profile to keep track of the positions you’ve applied for, provides confirmation that your application has been accepted, allows you to edit submitted applications up until the posting closing date, and notifies you via email of jobs that match your skills and interests.</p>

<hr id="jobboard" />
<h3>Which job board should I use to apply for a position?</h3>
<hr />
<p>COMPANY has a variety of employee groups, and certain groups may apply for positions on specific job boards. Here is a summary of what job board you should be checking:</p>

Answer Source

I can't find anything online suggesting that hr elements cannot be targeted as anchor points.

The spec mandates that any element with an ID may be designated as the target of a URL fragment. No exceptions are stated, which implies that the rule applies to hr.

Linking to an hr element not working appears to be an issue with Google Chrome. It works just fine on every other browser. I'd consider that a Chrome bug.

As a workaround, remove the hr elements (all of them) and reassign the IDs to the h3 elements. That is how IDs are intended to be used. The hr element is only needed when dividing a single section into discrete subsections where subheadings are unnecessary or inappropriate. Since each entry in the FAQ is a section in its own right with its own heading, those hrs are superfluous at best and inappropriate at worst. If you want horizontal lines to appear between sections, add borders with CSS instead of using hr elements.

<ul>
  <li><a href="#requirements">What are the technical requirements for using the online application system?</a></li>
  <li><a href="#jobboard">Which job board should I use to apply for a position?</a></li>
</ul>

<h3 id="requirements">What are the technical requirements for using the online application system?</h3>
<p>The COMPANY uses an online application system for most of our job postings. This system lets you create a profile to keep track of the positions you’ve applied for, provides confirmation that your application has been accepted, allows you to edit submitted applications up until the posting closing date, and notifies you via email of jobs that match your skills and interests.</p>

<h3 id="jobboard">Which job board should I use to apply for a position?</h3>
<p>COMPANY has a variety of employee groups, and certain groups may apply for positions on specific job boards. Here is a summary of what job board you should be checking:</p>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download