If you can read this, the test is a PASS
This page has a variaty of anchors and content targets. This paragraph
for instance is class="intro"
, so maybe you would want to
select for that.
First named header
<h2 id="first_named_header">First named header</h2>
This section begins with an H2 with an ID so you can link to it as #first_named_header.
Remember, 'name' is only valid for 'a' anchors. For other elements like headings and divs, you are expected to use 'id'.
This is a good start, and not wrong. However, 'it' means only the h2 itself, not the following paragraphs.
Header wrapped with anchor
<h2><a name="header_with_anchor">Header wrapped with
anchor</a></h2>
This section is almost the same, only there is an 'a'tag inside the h2 that contains the name. Linking to #header_with_anchor works pretty well.
Though this used to be common, it can often confuse themers.
Header with anchor near #
<a href="#header_with_anchor_near" name="header_with_anchor_near">#</a>
This common convention is not great. The target of #header_with_anchor_near is just the # character
While that's helpful for linking, it means that the thing it's linking to is just that character, not the section.
Anorexic anchor
<a href="anorexic_anchor" name="anorexic_anchor"> </a>
<h2>Anorexic anchor</h2>
Worse still, this link goes to a spot in the document with no content, that just happens to come before the section it is expected to indicate.
A sensibly enclosed section
<div id="sensible_enclosure">
<h2>A sensibly enclosed section</h2>
This section is genuinely wrapped by a div that names its content. A link to #sensible_enclosure refers to the header, the content.
and all paragraphs until there is a structural closure.