0

I'm creating a page that has two div elements directly above a bit of text that I want to create an anchor to. One of the div elements is display:none above a certain screen size, while the other div element is display:block, like so:

<div class="hidden"><!-- This div class is set to display:none; in CSS -->
<!-- Div content -->
</div>
<div class="show"><!-- This div class is set to display:none; in CSS -->
<!-- Div content -->
</div>
<a name="anchor"></a>
<h2>Paragraph heading</h2>
<p>Paragraph that I want to anchor to</p>

When I put the anchor as shown in the above example, it actually appears below the paragraph heading. Is it allowed to put two anchors of the same name, if one of the divs is display:none, like this:

<div class="hidden">
<!-- Div content -->
<a name="anchor"></a>
</div>
<div class="show">
<!-- Div content -->
<a name="anchor"></a>
</div>
<h2>Paragraph heading</h2>
<p>Paragraph that I want to anchor to</p>

Is there a way something like this is allowed? I have tested this, and the link to the anchor appears not to work -- is the HTML markup from the display:none div conflicting with the one in the display:block div, even if the one div element is not displayed by the browser?

The only example I could find on Stack Overflow was here: Anchor to element within hidden div , and it seemed to relate more to javascript toggle than my question. Please let me know if there are answers elsewhere.

Brandon Bell
  • 1
  • 2
  • *"it actually appears below the paragraph heading"* – I don't really understand what that means or what that's supposed to look like. – deceze Jun 08 '17 at 13:24
  • Name should have a unique value. Why do you need to repeat it? – airos Jun 08 '17 at 13:28
  • @deceze -- It is likely due to a vertical gap by either a header or another CSS style. When I click on the actual link to the anchor, it goes to a position slightly lower than where the actual anchor is. I try to put the anchor above where I want it to link to in order to compensate. – Brandon Bell Jun 08 '17 at 13:38

1 Answers1

4

No. See the specification

If the attribute is present, its value must not be the empty string and must neither be equal to the value of any of the IDs in the element's home subtree other than the element's own ID, if any, nor be equal to the value of any of the other name attributes on a elements in the element's home subtree.

It must be unique in the document. How you style elements around it has no bearing on that rule.

The spec also says:

Authors should not specify the name attribute on a elements.

The name attribute on a elements was superseded when HTML 4 was released in 1996 and introduced the id attribute (on any element, not just on anchors).

id must also be unique in a document though.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thank you for the answer and for the recommendation about the id attribute. This answers my question and explains the result I was having. – Brandon Bell Jun 08 '17 at 13:45