Blog

Master the Creation and Styling of Unordered Lists in HTML

Lists constitute an essential element of the web structure, allowing designers and developers to represent a series of elements in an organized and accessible way. In HTML, the element ul It is one of the most versatile and commonly used instruments for creating unordered lists. Next, we'll explore how you can use this element to structure content and how to apply styles to make your lists stand out and harmonize with your website design.

Table of Contents

What is an Unordered List?

An unordered list in HTML is a collection of elements that do not require a particular numerical or sequence. It is mainly used to present information in a timely manner, such as product features, a list of skills, or items in a navigation menu. The element that defines an unordered list is ul, and each item in the list is marked with the element li (Item List).

Let's start with a basic example of an unordered list:

Element One
 Element Two
 Element Three

By default, web browsers will add bullet points to each li to indicate that they are part of a list. These bullets can be dots, circles, or squares, depending on the browser and the styles that have been assigned to the list.

Steps to Create an Unordered List

Creating an unordered list is simple, but there are some important details to ensure that your list is semantically correct and accessible to all users.

Semantic Structure

When you add an unordered list to your page, make sure to enclose all elements li inside the block ul correspondent. Not only is this good coding practice, it also helps screen readers identify the list and communicate its structure to visually impaired users.

List Nesting

Sometimes you may need lists within lists. This is known as nested lists and is useful for structuring subcategories of information. Here I show you how to do it:

Main Element One Subelement One
 Subelement Two
 Main Element Two Subelement One
 Subelement Two

List Attributes

Although ul It's pretty simple, some attributes can be useful. For example, the attribute type allows you to change the bullet type of list items:

However, for advanced customizations, it is best to use CSS.

Styling Lists with CSS

By applying styles to lists, we enter a territory where creativity and functionality meet. CSS allows us to alter almost every visual aspect of our list, from marker type to indentation and spacing.

Marker Type

You can change the default marker using the property list-style-type. Some common values include none, disc, circle, and square:

ul { list-style-type: circle; }

Image As Bookmark

If you prefer to use an image as a marker instead of the predefined types, you can achieve this with list-style-image:

ul { list-style-image: url('path-to-your-image.png'); }

Marker Position

The property list-style-position allows you to specify whether the marker should appear inside or outside the content flow:

ul { list-style-position: inside; /* Or use 'outside' */ }

Custom Styles

CSS opens up a world of possibilities with pseudo-elements like ::before o ::despues de, where you can create your own bookmarks using font icons or even animations.

Spacing and Alignment

Spacing between list items and text alignment are key to readability. You can use properties like margin, padding, and text-align to adjust these aspects.

Best Practices for Accessible and Elegant Lists

When you style your lists, consider the following best practices to keep your code clean and your lists accessible:

Use clear and descriptive names for CSS classes and IDs.
Maintain a clear visual hierarchy, especially with nested lists.
Make sure lists are legible and accessible, avoiding insufficient color contrast between text and background.
Do not use images as bookmarks if they do not improve understanding of the content; always opt for an approach that does not compromise accessibility.

Conclusions

Unordered lists are flexible and powerful tools in creating web pages. With the right HTML markup and the creative touch of CSS, you can transform the way users interact with the content on your site. Remember that in NelkoDev, you have access to more guides and tutorials to continue improving your web development skills.

If you have questions or would like to delve deeper into a specific topic about lists in HTML and CSS or any other area of web development, please do not hesitate to get in touch via nelkodev.com/contact, and I will be happy to help you create a more structured and stylized website. Success in your projects!

NelkoDev