Skip to content
Learning

HTML Lists and Links

An HTML List allows you to organize data on web pages into an ordered or unordered format to make the information easier to read and visually appealing. HTML Lists are very helpful for creating structured, accessible content in web development.

  • List (<li>): The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), or a unordered list (<ul>). In unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

<ul>: The Unordered List element

These lists are used for items that do not need to be in any specific order. The list items are typically marked with bullets.

<h1>Data Structures topics</h1>
    <ul>
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
        <li>Queues</li>
        <li>Trees</li>
        <li>Graphs</li>
    </ul>

<ol>: The Ordered List element

These lists are used when the order of the items is important. Each item in an ordered list is typically marked with numbers or letters.

<h1>Data Structures topics</h1>
    <ol>
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
        <li>Queues</li>
        <li>Trees</li>
        <li>Graphs</li>
    </ol>

<dl>: The Description Lists

A description list is a list of terms, with a description of each term. Description lists are less common but very useful for definitions, glossaries, or any other key-value pairs of items. The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.

<dl>
    <dt>Item 1</dt>
    <dd>Item 1 Description </dd>
    <dt>Item 2</dt>
    <dd>Item 2 Description </dd>
</dl>

HTML Links, also known as hyperlinks, are defined by the <a> tag in HTML, which stands for “anchor”. These links are essential for navigating between web pages and directing users to different sites, documents, or sections within the same page. The basic attributes of the <a> tag include href and target, among others.

<p>Click on the following link</p>
<a href="https://www.example.com" target="_top">Visit Example</a>

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

HTML Links – Target Attribute

The target attribute in the <a> tag specifies where to open the linked document. It controls whether the link opens in the same window, a new window, or a specific frame.

  • _blank - Opens the linked document in a new window or tab.
  • _self - Default. Opens the link in the same tab or window.
  • _parent - Opens the linked document in the parent frame.
  • _top - Opens the linked document in the full body of the window.