Which method is prefered to just show 2 links vertically?

StackOverflow https://stackoverflow.com/questions/2409290

Question

Which method is preferred to just show 2 links vertically, one over another? in content page (not as a navigation).

This (although i don't need bullets)

<p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
   when an unknown printer took a galley of type and scrambled it to make a 
   type specimen book.
</p>
<ul>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
</ul>

this

<p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
   when an unknown printer took a galley of type and scrambled it to make a 
   type specimen book.
</p>
<p><a href="#">Link 1</a></p>

<p><a href="#">Link 2</a></p>

or this 

<p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
   when an unknown printer took a galley of type and scrambled it to make a 
   type specimen book.
</p>
<p> <a href="#">Link 1</a> 
    <br />
   <a href="#">Link 2</a>
</p>
Was it helpful?

Solution

You shouldn't be worrying about what markup to use for presentational purposes, that is what CSS is for. All of the examples you give above can easily be styled to look however you want. What you need to determine is what the content is and mark it up appropriately.

Remember that the markup describes the content. Is this a list of links that have meaning in a group? Then use a list since that markup describes a list of related things. Are the links unrelated in content? Then don't use a list as a list implies correlation.

Semantics are tough to determine sometimes due to their highly subjective nature. That being said though you should really try to mark up your content semantically and then use CSS for any presentational needs.

OTHER TIPS

It entirely depends on the context, IMO. If the links are in a menu, then I would use the unordered list approach. If they are logically separate, then I'd put them each in their own container. If they are logically related but I just want them on their own line I would probably make them block elements with CSS, styled appropriately. Typically I'd avoid the BR tag.

Semantically, and for easier styling, I would go with the first option.

If you don't want bullet points, just style the LI without them (list-style-type:none).

I would say

<ul style="list-style-type: none">
   <li><a href="#">Link 1</a></li>


   <li><a href="#">Link 2</a></li>
</ul>

i'll prefer the one under the list tag, for me it is much cleaner code and easy to position on the form.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top