Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Build the Footer

bobcat
bobcat
13,623 Points
Posted by bobcat
bobcat
13,623 Points

confusing anchor tags question..

Can anyone tell me why you would use anchor tags outside some list item tags but then also use it inside some list item tags - Please see the two examples below and explain if possible?

Below you can see list item tags inside anchor tags..

<nav> <ul> <a href="index.html"><li>Portfolio</li></a> <a href="info.html"><li>Info</li></a> <a href="contact.html"><li>Contact</li></a> </ul> </nav>

And here you can see anchor tags inside list item tags

<li> <a href="../IMAGES/numbers-01.jpg"> <img src="../IMAGES/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li>

Can anyone explain why the anchor tags can be used both ways?

Thanks for any help you can provide.

4 Answers

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

Hi, So I think you are asking about the difference between:

<ul>
  <li><a href="somelink.jpg">Test1</a></li>
  <a href="somelink.jpg"><li>Test2</li></a>
</ul>

It's all about what you actually want to be clickable as the link. In the first list item above only the text between the 'a' tags will act as the link, but in the second example it isn't just the text but the whole list item that is the link.

I'd recommend you try opening up your browsers web console and using the 'inspect' options to take a look at the difference in the clickable area between the 2 different methods.

Clifford Ng
Clifford Ng
5,090 Points
Clifford Ng
Clifford Ng
5,090 Points

I don't see an anchor tag in your second code.

Edit: After reading your sentence a little longer I think I got what you were trying to say.

It depends on how you want your links to appear. If you want the item listed to be a link you can click on the the anchor tag should be outside of your list tag, but if you want your links to be within a list with words that aren't links I.e.

This is not a link but this is.

You should have it inside the list tag. The code should look like this. 

<li>this is a <a href="http://example.com>link</a></li>
bobcat
bobcat
13,623 Points
bobcat
bobcat
13,623 Points

Thanks clifford, my original code should have looked like this. - I cant get it to display but the code is wrapped inside list item tags.

<li> <a href="../IMAGES/numbers-01.jpg"> <img src="../IMAGES/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li>

bothxp
bothxp
16,510 Points 
<ul>
  <li>
    <a href="../IMAGES/numbers-01.jpg">
          <img src="../IMAGES/numbers-01.jpg" alt="">
          <p>Experimentation with color and texture</p>
    </a>
  </li>
</ul>
Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

bobcat

Don't get tired by that. From my experience you can use both ,depending on the requirements and design of the page.

Just one keep in mind!

<a> tag i INLINE ELEMENT <li> tag BLOCK ELEMENT

Read this http://www.impressivewebs.com/difference-block-inline-css/