Semantically Correct Nested Anchors

November 28, 2022 Post a Comment

I am working on a web applicaton. And what we also create is something that could be described as inline editing. Just to portray thing I am trying to solve I use example of Facebo

Solution 1:

Since you don't want javascript(which would have been easier), here is another method:

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs <span style="color:none; text-decoration:none;">added 5 new photos.</span></a></p>
</div>

Any other style effects can be added. Such as cursor: none; etc. depending on your desired effect.

Solution 2:

HTML:

<div class="post-block">
 <p><a href="stevejobs/" title="#"><span class="author">Steve Jobs</span> <span class="posttext">added 5 new photos.</span></a> <p>
</div>

CSS:

.post-block { margin: 0px; } 
.post-block p { margin: 0px; } 
.post-block p a {display: inline-block; background-color: transparent; width: 100%; min-height: 100px; /* can be varied */ }
.post-block p span.author { display: inline-block; }
.post-block p span.posttext { display: inline-block; }

Solution 3:

In HTML5, a can be used as block-level element.

<div class="post-block">
   <a href="stevejobs/"><p>Steve Jobs added 5 new photos.<p></a>
</div>

Now, remove the default link styling with CSS (.post-block a {text-decoration:none;}).

To get a link style back for the name, enclose the name in an element and add a class like "name". The b element would be a suitable choice here (otherwise use span):

<div class="post-block">
   <a href="stevejobs/"><p><b class="name">Steve Jobs</b> added 5 new photos.<p></a>
</div>

Now to get back the styling: .post-block .name {text-decoration:underline;}.

Enclosing the name in an element even allows you to use the microformat hCard, if you like.

Solution 4:

I have had the same issue for years, in that I want to maintain HTML semantics and SEO semantics too e.g. heading tags and paragraphs etc., while still keeping default anchor behaviours, e.g. indicating the destination URL in-browser, keeping tabbing intact and keeping the default anchor hover actions, which JavaScript doesn't do inherently.

The best solution I could figure was to put an absolutely positioned, block-level anchor over (covering) the content, and use the parent element's hover action to integrate any behaviours into the actual content, which is semantically correct and should be parsed correctly by all web-crawlers, thus:

.post-block {
  position: relative;
}

.post-block p span.anchor {
  text-decoration: underline;
}

.post-block:hover p span.anchor {
  text-decoration: none;
}

.postblock a.overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* to be on the safe side */
  text-indent: -9999em;
}

<div class="post-block">
  <p><span class="anchor">Steve Jobs</span> added 5 new photos.<p>
  <a class="overlay" href="stevejobs/" title="#">Steve Jobs</a>
</div>

This works well for block and grid layouts and even plays nice with touch devices, because the anchor itself has no hover action - which some devices hijack the first click for :)

Not 100% sure if search engines penalise the text indent, but there are any number of additional work-arounds, discussion here to get anyone interested started.

Solution 5:

Just replace the anchor tag around "Steve Jobs" in your second example with a span and style it as you want:

<a href="stevejobs/" title="#"><div class="post-block">
    <p><span class="post-block-user">Steve Jobs</span> added 5 new photos.<p>
</div></a>

with CSS:

a {
    cursor: default;
}
.post-block-user {
    font-weight: bold;
    cursor: pointer;
}

or whatever styles you're looking to apply or not apply. Actually I would try to lose the div and put the class on the anchor tag, unless there's other reasons for keeping that structure.

Html5 Development