How to Make a List Item Clickable

How to Make a List Item Clickable thumbnail
A list can be shown by using graphics and tables or by list items as text.

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.

Instructions

    • 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:

      <ul>

      <li>Marshmallows</li>

      <li>Chocolate bars</li>

      <li>Graham crackers</li>

      </ul>

      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">http://www.mysite.com/marshmallows.html">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">http://www.mysite.com/picnics/marshmallows.html">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">http://www.mysite.com/picnics/choclate.html">Chocolate&lt;/A>&lt;/li>

      <li><A HREF="Graham">http://www.mysite.com/picnics/crackers.html">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.

Related Searches

Resources

  • Photo Credit Hemera Technologies/Photos.com/Getty Images

You May Also Like

Related Ads

Featured