How to Make a List Item Clickable

Found This Helpful

Coding with basic HTML lets you link items in your list to pages or other areas of your website. First, build the pages that you will link to, then create the list on the page where site visitors will click on them. You can do this for an ordered or unordered list. Choose whether you want an ordered list or unordered list, then put the link coding within each list item.


  1. Complete the pages that your list items will lead to. Upload them and jot down a list of the page names. For example, on an unordered list <ul> the list items <li> will look like this:



    <li>Chocolate bars</li>

    <li>Graham crackers</li>


    To change it to an ordered, or numbered list, use <ol> instead of <ul>.

  2. Write the list links by adding the HTML coding inside each item. Refer to the file names of the pages to link to.

    <li><A HREF="Marshmallows&lt;/A>&lt;/li">">Marshmallows&lt;/A>&lt;/li>

    If the page is within a sub-folder, add that before the page file name to keep the path clean and working.

    <li><A HREF="Marshmallows&lt;/A>&lt;/li">">Marshmallows&lt;/A>&lt;/li>

  3. Repeat the coding for all line items that will be linked.

    <li><A HREF="Chocolate&lt;/A>&lt;/li">">Chocolate&lt;/A>&lt;/li>

    <li><A HREF="Graham">">Graham Crackers</A></li>

  4. Upload the html document with the line items now coded. Refresh your page and test each link. If all the pages have been uploaded and all the coding is correct, each linked item will work. If a broken link presents itself, check the code again. You might have a simple error such as a typo, or perhaps you omitted the file folder name. The other potential error is you used an incorrect page name to link to. Retrace your steps to narrow down and solve the error.

  5. Add any additional line items by repeating these steps.

Tips & Warnings

  • You don't need the "http://www." for most pages within a website. Just use "/" and the rest of the code.
  • Sometimes an error occurs when you cut and paste a piece of coding into the wrong area, or onto the wrong list item. Go slowly to prevent this. Always double-check your work and test each link after uploading to be sure they all work.



  • Photo Credit Hemera Technologies/ Images

You May Also Like


Read Article

iPhone Screen Tips You Can Really Use