CODEWITHSUNDEEP
htmlpaginationsemantics
Rafff
Rafff

Reputation: 1518

Pager previous / next semantics

The following is my code for comments pagination.

<ul class="pager">
  <li class="previous">
    <a href="#">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

My problem is if I'm on the first page of comments (and older comments link is hidden), an empty list item is displayed in the DOM.

<li class="previous">
</li>
<li class="next">
  <a href="#">Newer Comments &rarr;</a>
</li>

In a semantic way should I remove the empty list item (1) or leave it there empty (2)?

1/

<ul class="pager">
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

2/

<ul class="pager">
  <li class="previous">
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

Which option is correct in a semantic way?

Upvotes: 6

Views: 1281

Answers (5)

tomaj
tomaj

Reputation: 1590

You can also implement this where the a element doesn't have a href. That way it is not rendered as a link. And it is easy to style it differently then when it has a href.

The HTML5 spec says the following about the a element:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

For good semantics, you should also surround your component with a nav element, and use rel="prev" and rel="next" on your links.

.pagination a:not([href]){
  color: lightgray;
}
<nav class="pagination">
  <ul>
    <li>
      <a rel="prev">Older Comments &larr;</a>
    </li>
    <li>
      <a href="#" rel="next">Newer Comments &rarr;</a>
    </li>
  </ul>
</nav>

Upvotes: 0

dnozay
dnozay

Reputation: 24324

If you do not have a previous link, this is just fine.

<ul class="pager">
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

The only reason people add some markup for something that isn't there is only for user experience, so that the user does not get confused when a button / link they were expecting to be there isn't there anymore. That is the sole purpose of a disabled element.

joke: after years of therapy I can finally understand that the button that is grayed out does nothing, and is not there just to taunt me. begone !

Examples where markup is not necessary:

  • you use positioning in your css,
  • showing a disabled button would be awkward
    • e.g. previous button should not appear on the first slide of a presentation?
    • e.g. continue button should/may not appear in a videogame unless you have a save file?

Upvotes: 0

Varuna
Varuna

Reputation: 168

here's short and sweet.. :)

<style type="text/css">
a.disabled {
   pointer-events: none;
   cursor: default;
   color:#999;
}
</style>
<ul class="pager">
  <li class="previous">
    <a class="disabled" href="#">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

GOOD LUCK!

Upvotes: 2

peterjb
peterjb

Reputation: 819

My personal opinion on something like this is to not use markup for stuff that isn't there. No disabled buttons or links or empty list items. When you are on the first page, there is no previous page, so there should be no markup for the previous page. If you want to leave space for the previous page link, just use CSS.

Also, if I'm being a stickler, there's no reason for there to be a <ul> if there's only one link, and you might consider using an <ol> when you have both links because there is an order to the links.

If you're able to alter the template for the page 1 case, I would suggest just a simple:

<div class="next">
    <a href="nextlink">next page</a>
</div>

Also, I recommend not requiring javascript for navigation. Normal html links are appropriate here.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

I have a better suggestion to use a disabled state:

<ul class="pager">
  <li class="previous">
    <a href="#" class="disabled">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

Attempt 2

Also I have another idea, if you are completely getting rid of CSS. Instead of <a> tags, you can use <button> or <input type="button" />, as even in Facebook, the same thing is used. So, you can style the <button> tag to look like <a> tag and give a disabled state, as this works even when both JavaScript and CSS is disabled.

<ul class="pager">
  <li class="previous">
    <button disabled="disabled">Older Comments &larr;</button>
  </li>
  <li class="next">
    <button>Newer Comments &rarr;</button>
  </li>
</ul>

For styling <button> as <a>:

/* Just for this demo */
ul, li {margin: 0; padding: 0; list-style: none; display: inline-block;}

button {border: none; background: none; color: #00f; text-decoration: underline; cursor: pointer;}
button:disabled {color: #999; cursor: default;}
<ul class="pager">
  <li class="previous">
    <button disabled="disabled">Older Comments &larr;</button>
  </li>
  <li class="next">
    <button>Newer Comments &rarr;</button>
  </li>
</ul>

The above code works in all browsers, including Internet Explorer! :)

Upvotes: 7

Related Questions