How to Paginate in HTML

Next Video:
Shortcuts for How to Wrap Content in Divs With an HTML Editor....5

Pagination in HTML is accomplished with just a few key pieces of code. Find out how to paginate in HTML with help from a programmer and web designer in this free video clip.

Part of the Video Series: Web Design & WordPress
Promoted By Zergnet


Video Transcript

Hi, my name is Omar and I'm a programmer. Today, I'm going to show you how to set up pagination using HTML. Now this is generally not done, but if you want a quick demo page for a client or something that you just want to whip together a quick HTML page with pagination, then I'll show you how to do it in HTML code. So, the first thing is you open up your favorite HTML editor. I'm just using Text Edit just for convenience sake, and as you can see, I already have some boiler plate HTML codes set up. I have the body, the title, the head, all that is already set up. So, what you want to do is set up an unordered list at the end of your page, you know, right before you close off the body tag, and I'm just going to go ahead and paste it and explain to you as I go along. So obviously, you have an unordered list, the first item in your unordered list would be the previous button, and I use the word previous; and some left arrow, and the next one should be your page that you are on. As you can see, there's no link associated with that page. The next pages, 2, 3, 4, 5, 6 and 7, they all link to the pages that they are referenced to. The list item after that is next followed by an arrow pointing forward, and of course I have that link to page 2; that's because we are on page 1 right now. If we wanted to be on page 2, you're going to want to change the whole list and add link to page 1 on the first item of the list, take out the link of the second item of the list because that is your second page as I'm doing here, and for next you want to change to page 3. Now, what a lot of people forget to do is to change the first list item, which is the previous button and change that to page 1, because that's the page right before 2, of course. And you just follow this so on and so forth with all of your pages, and this is pretty much the best way to do a pagination type setup in HTML. I'm Omar, and I just showed you how to set up pagination in HTML. Thanks for watching.


Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!