Skip to main content

Links and Lists

Links are what make the web "web", connecting different pieces of information. Lists are one of the best ways to organize information in a readable manner.

The <a> tag (for "anchor") is used to create links to other pages, files, or sections within the same page.

The most important attribute of the <a> tag is href (Hypertext REFerence), which specifies where the link will take us.

1. Absolute Links: They lead to a completely different URL.

<a href="https://www.google.com">Go to Google</a>

2. Relative Links: They lead to a page within the same website.

<a href="/contact.html">Go to the Contact page</a>
<a href="about-us.html">About us</a>

Attribute target: For a link to open in a new tab (instead of replacing the current one), the target="_blank" attribute is used.

<a href="https://www.google.com" target="_blank">Open in another tab</a>

Lists​

HTML offers different types of lists depending on whether the order of the elements matters or not.

1. Unordered Lists (<ul>)​

Used when the order of items is not crucial. The browser typically renders them with bullet points.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>
  • Apples
  • Bananas
  • Oranges

2. Ordered Lists (<ol>)​

Used for steps or sequences where the order matters. The browser automatically numbers them sequentially.

<ol>
  <li>Wake up</li>
  <li>Make coffee</li>
  <li>Program</li>
</ol>
  1. Wake up
  2. Make coffee
  3. Program

In both cases, each individual list item is defined with the <li> (List Item) tag.