Pager previous / next semantics

Question

Below is the code for my pagination code.

<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 that if I'm on the first page of comments (and the link for older comments 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 you delete an empty list item (1) or leave it 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 true in a semantic way?

Answer 1

I have a better suggestion to use 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

I also have another idea if you completely get rid of CSS. Instead of <a> tags, you can use <button> or <input type="button" /> , just like on Facebook, the same thing is used. This way you can style the <button> tag to look like the <a> tag and result in a disabled state, as this works even if JavaScript and CSS are 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 the <button> style 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> 

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

Answer 2

here is 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> 

LUCK!

Answer 3

My personal opinion on something like this is to not use markup for things that aren't there. There are 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 on the previous page. If you want to leave space for links to the previous page, just use CSS.

In addition, if I am a supporter, there is no reason for <ul> to be there if there is only one link, and you might think about using <ol> when you have both links because there is a link order.

If you can change the template for the case with page 1, I would suggest simply:

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

In addition, I recommend not using javascript for navigation. Normal html links are suitable here.

Answer 4

If you do not have the previous link, this is normal.

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

The only reason people add some markup for something that is not there , only for users, so the user is not confused when the button / link that they expected to be is No. This is the only goal of the disabled item.

joke: after several years of therapy, I can finally understand that the button that is grayed out does nothing, and I just don’t get bored. run!

Examples where markup is not required:

• you use positioning in your CSS,
• showing a disabled button will be inconvenient
  • eg. Should the previous button not appear on the first slide of the presentation?
  • eg. Should the continue button not appear in the video game if you do not have a save file?