Organize your content with structured lists and connect your ideas with powerful links. Discover the art of using ordered and unordered lists to create clear, accessible navigation, and master the basics of hyperlinking to connect your pages seamlessly.
Familiarize yourself with key HTML terms used in this page. Expand each term below for a detailed explanation and sample code.
An unordered list is used to group a set of related items without implying a particular order.
Each item in the list is marked up with the <li> (list item) element.
Example:
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
An ordered list is similar to an unordered list except that the list items are automatically numbered. This is useful when the sequence or ranking of the items matters.
Example:
<ol>
<li>First Step</li>
<li>Second Step</li>
<li>Third Step</li>
</ol>
The list item element <li> is used inside both ordered and unordered lists to denote each individual item.
Example:
<li>This is a list item</li>
The anchor element <a> is used to create hyperlinks, allowing users to navigate to another page or a different section within a page.
Example:
<a href="https://example.com">Visit Example.com</a>
The <nav> element defines a section containing navigation links. This helps separate navigational blocks from other content, enhancing accessibility and search engine optimization.
Example:
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Discover the variety of links you can create using HTML—from external links and internal navigation to email, telephone, and download links. Each type has its own best practices to enhance user experience and accessibility.
External links point to pages or resources outside of your website. They commonly include attributes like target="_blank" to open the link in a new tab and rel="noopener noreferrer" to enhance security.
Example:
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
Visit Example.com
</a>Internal links lead to other pages or sections within the same website. They often use relative URLs, which make your site easier to manage in different environments.
Example:
<a href="/about.html">About Us</a>
Anchor links navigate to a specific part of the same page (or a different page) by referencing an element’s id attribute. They’re very useful for single-page layouts.
Example:
<a href="#section1">Jump to Section 1</a>
...
<section id="section1">
<h2>Section 1</h2>
<p>Content for section 1...</p>
</section>
Email links use the mailto: protocol to open a new email message in the user's default email client. You can include subject and body parameters as needed.
Example:
<a href="mailto:info@example.com">
Send us an email
</a>
Telephone links use the tel: protocol to allow users, especially on mobile devices, to directly call a phone number.
Example:
<a href="tel:+1234567890">
Call Us: +1 (234) 567-890
</a>
These links prompt the browser to download a file instead of navigating to it. Adding the download attribute is key.
Example:
<a href="files/sample.pdf" download>
Download PDF
</a>
The title attribute provides additional context for the link. It appears as a tooltip when a user hovers over the link.
Example:
<a href="https://www.example.com" title="Visit Example's Home Page">
Example
</a>Explore the various types of lists you can create with HTML. Use the tabs below to learn about Unordered Lists, Ordered Lists, and Definition Lists.
An unordered list is used when the order of the items does not matter. Each element is marked up with the <li> tag and the container is wrapped in a <ul> element.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
An ordered list automatically numbers each list item. Use the <ol> element to wrap your list items when the sequence is significant.
<ol>
<li>Wake Up</li>
<li>Brush Teeth</li>
<li>Have Breakfast</li>
</ol>
A definition list groups terms and their descriptions. It uses the <dl> element along with <dt> for the term and <dd> for the definition.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Follow these guidelines to ensure your hyperlinks and lists are accessible, semantic, and well-structured. Clear link text and organized list markup are key to a great user experience.
Always use clear and descriptive text for your links so users understand where the link will take them. Avoid generic phrases like "click here" as they provide no context.
Example:
<a href="https://example.com">Learn more about our services</a>
When a link opens in a new tab or window, include attributes like target="_blank" along with
rel="noopener noreferrer" to prevent security and performance issues. Also, use ARIA labels if needed.
Example:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>
Use proper HTML list elements to group related items.
Choose the ordered list (<ol>) when the order matters, and the unordered list (<ul>)
when listing items without a required sequence. Always wrap individual items in <li> tags.
Example:
<ul>
<li>Feature One</li>
<li>Feature Two</li>
<li>Feature Three</li>
</ul>For multi-level lists or when additional context is needed, ensure proper nesting and use headings within list sections. This practice improves readability and assists users with assistive technologies in understanding your content’s hierarchy.
Example:
<ul>
<li>Main Item 1
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Main Item 2</li>
</ul>