Lists and Links

Lists and links are essential for organizing information and creating the interconnected nature of the World Wide Web (HyperText).

1. Lists

HTML supports three main types of lists: unordered, ordered, and description (or definition) lists.

A. Unordered Lists (<ul>)

Unordered lists are used when the order of the items does not matter. Each item is typically displayed with a bullet point.

• The container is the <ul> tag.
• Each item within the list is wrapped in the <li> (List Item) tag.

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

B. Ordered Lists (<ol>)

Ordered lists are used when the sequence or ranking of the items is important. Each item is typically displayed with a number or letter.

• The container is the <ol> tag.
• Each item is wrapped in the <li> (List Item) tag.
• Attributes: You can change the numbering style using the type attribute (e.g., type="a" for letters, type="i" for Roman numerals) or start counting from a specific number using the start attribute.

<ol start="5">
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

C. Nested Lists

Lists can be nested within each other to create outlines or sub-categories. The nested list must be placed inside a parent <li> element.

<ul>
    <li>Drinks
        <ol>
            <li>Water</li>
            <li>Juice</li>
        </ol>
    </li>
    <li>Food</li>
</ul>

2. Links (Hyperlinks)

Hyperlinks are the core technology that makes the web work. They connect one document to another.

• The tag used is the <a> (anchor) tag.
• The href (Hypertext Reference) attribute is mandatory and specifies the destination URL or path.

A. Linking to External Sites (Absolute URLs)

Use the full URL, including the protocol (https://).

<p>
    Visit the <a href="https://www.example.com">Example Website</a> for more info.
</p>

B. Linking to Local Files (Relative Paths)

Use paths relative to the current file structure. This is essential for navigation within your own website.

C. Link Attributes

<a href="external_doc.pdf" target="_blank" title="Opens PDF in new tab">Download Document</a>

D. Linking to Sections on the Same Page (Anchors)

You can link to a specific section on the same page by using the id attribute.

1. Define the Target: Add a unique id to the destination element.
2. Create the Link: Use the hash symbol (#) followed by the target id in the href.

<p><a href="#appendix">Jump to Appendix</a></p>

<section id="appendix">
    <h2>Appendix Information</h2>
    <p>This is the destination section.</p>
</section>