HTML5 nested clickable elements

Question

Based answers to other questions, ie Link inside a button not working in Firefox, HTML5 disallows <a> in <button> and <a> in <a>, etc. I have a design (no pushback permitted) which has a row of three clickable tabs which switch the content displayed - on two of them when active there are two arrows at either end which paginate the tab. Quick mockup:

How can I nest clickable targets using correct HTML5 markup and proper interactive elements?

There are many ways to make, for example, <div>s clickable. I'm asking about a HTML5 solution, not a JS hack.

Please provide the mockup as an image in the question itself. Having that on a third party site (especially, as it appears, the mockup will be deleted in a certain amount of time) makes this question less valuable to others. But in any case, this is far too broad of a question; there are many ways of doing this, and the semantics of any markup is largely subjective. — Heretic Monkey, Mar 02 '17 at 22:19

score 2 · Accepted Answer · answered Mar 02 '17 at 22:30

What I would do is have the tabs as part of a unordered list, each with <a> tags within. For the one(s) needing arrows include additional <a> tags within the <li>, and use CSS to position them above the primary <a>.

ul {
  line-height: 2em;
  text-align: center;
  padding: 0;
  margin: 0;
  display: block;
}
ul > li {
  position: relative;
  width: 10em;
  padding: 0;
  margin: 0;
  display: inline-block;
}
ul > li > a {
  text-decoration: none;
  color: green;
  border: 1px solid green;
  display: block;
}
ul > li > a:hover {
  background-color: lightgrey;
}
ul > li > a.back, ul > li > a.next {
  position: absolute;
  top: 0;
  width: 2em;
  color: darkgreen;
  border-color: darkgreen;
}
ul > li > a.back {
  left: 0;
}
ul > li > a.next {
  right: 0;
}

<ul>
  <li><a href="#tab1">One</a></li>
  <li><a href="#tab2">Two</a><a href="#tab2back" class="back">&lt;</a><a href="#tab2next" class="next">&gt;</a></li>
  <li><a href="#tab3">Three</a></li>
</ul>

score 0 · Answer 2 · answered Mar 02 '17 at 22:09

One possible solution - <label> is an interactive tag which expressly allows interactive content (intended for form elements). The <label> could set values of a hidden radio element which can be used via CSS or JS to pick which tab content to display, while (potentially) allowing nested <a> tags inside for prev/next.

HTML5 nested clickable elements

2 Answers2