You can find well-designed lists all around the Internet. Designers have been using them for decades to coordinate page information and layouts, and in today’s web you can see the great creativity in how web designers are using lists. These include navigation menus, profile links, archives, tasks/checklists, and tons of other uses!

In this post I will be introducing different kinds of HTML lists, with tips on designing them, particularly on how to add an unique edge to your list. Also I’ll be taking you through a few examples of websites with fantastic list designs, and eventually you’ll get a list of websites with nicely designed HTML lists. There’s no more doubt on how to make your plain looking lists look unique, and let’s start to make the most from them today!

The Listing Elements

Web designers are constantly jumping from one bandwagon to the next, thus causing the website styles changing over time, but lists have stood the test of time and may very well be around in future innovation of the World Wide Web.

Before checking out the examples I want to cover a few points with HTML lists. There are few different types of lists which you can utilize in your own design work. The majority of web designers focus on Unordered Lists which are opened with a <ul> tag, but there are also two other less popular variations: Ordered Lists and Data Definitions. I’ve gone into further details below.

Unordered Lists (<ul>)

Possibly one of the most used elements in HTML4/HTML5 standards. Unordered lists will output data in the same way as an ordered list, however you won’t see any numeric markers to the side. Instead each item is given a small circle or disc and broken down onto a new line. This icon can also be changed with the list-style-type property found in CSS.

Below is the example code of the unordered list:

 <ul>   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li> </ul> 

Unordered lists are the perfect remedy for building navigation links. Since you can easily nest whole lists within any list item it’s a simple matter to create sub-navigation links as well. After removing the list style you’ll be left with a blank item element. From here you can style anchor links to appear as block elements on your page, thus filling out a navigation menu design, and with some jQuery code you can put together a beautiful header for your site.

Most commonly you’ll find unordered lists in the middle of web articles or installation instructions. Take notice that Google and other search bots do not process your page content any differently, so your SEO shouldn’t be affected regardless of which listing type you choose.

Ordered Lists (<ol>)

When you need to order a set of data it’s possible to set up your own layout framework from scratch, but in this way you’ll need to add each incrementing number by hand, which can be tiresome. Ordered lists are great for keeping numbered tasks in line without any screw-ups. The order of your internal list items (<li>) will dictate how the data is presented.

Below is the example code of the ordered list:

 <ol>   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li> </ol> 

It’s also possible to change the counter from regular numbers to a handful of other options. These include alphabetical lettering and roman numerals, to name a few. Web designers would use ordered list for content-specific lists. Recipe data, daily tasks, favorites, or top/recent logged in users are just a few examples. Often you’ll see blog comments built using ordered lists to keep each comment in a numbered sequence.

Data Definition Lists (<dl>)

Definition lists are not seen very often anymore (not like they were ever popular). They used to be seen with web designers creating complex formats of links or box content. The data list tag (<dl>) is often misunderstood by coders today. In HTML4.01 specs data lists were used to pair items with their descriptions. These were called definition lists.

Below is the example code of the data definition list:

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

However with the new HTML5 specs data lists have been given a transcription. There aren’t any differences with syntax in how you use the elements, however their purpose has been updated as a description list which consists of one or more data terms (<dt>) followed by one or more data definitions (<dd>).

A strong example from the HTML5 Doctor’s article is a metadata formatted list. Inside one single dl list element you would define a term, such as your name, then each subsequent definition tag could describe data about you, possibly your age, occupation, current town/city, etc. Ultimately any set of data with key/value pairs fits nicely in a description list. You can use more than one data term in a list, but W3C states that each term should be unique in the list.

Now that we’ve nailed down the 3 popular list styles, let’s move on to some examples! Web designers have gotten very creative with their lists over the recent years. I’ve cataloged 7 of my favorite websites below with specific focus on their creative usage of lists.

Simple Unordered List Navigation

Navigation menus are much simpler to build with modern CSS techniques. This is why unordered lists and even ordered lists have become a popular option. One of my favorite examples of this appears on the social media blog, Mashable.

Towards the top of their header you’ll notice 2 main sets of links. Directly to the top of their logo is a small unordered list containing community links such as Top Stories, Trending Topics, and People. The designer has created a sleek hover style which features a solid background and color scheme.

Directly below this you’ll see their sub navigation links. This navigation menu leads to blog categories such as Social Media or Tech. Both unordered lists are contained within a HTML5 <nav> element to keep everything inline with the template. The hover effects added here display a rounded corner around the sub-navigation menu. Each link displays as a block element and takes up a great deal of space of the sub-navigation menu.

Listing Software Features

This is possibly one of my favorite examples of styled lists. Web developers and software companies use these in their own corporate web designs. My example focuses on the page of the Culture Code’s Things, a to-do list app. They have built a formatted set of items and features you can find in Things.

The whole collection is contained inside a <div> tag which holds both left and right columns. Inside are the floating <ul> elements with left and right class, respectively. The list item content is actually broken into segments and CSS is used to align everything.

Images are added as <img> tags directly into the code and positioned relative to their containing <li>. The strong tags are used for each of the header points which appear in darker text, and directly after this the description is added.

The elements were put together beautifully and I greatly admire Culture Code’s work ethic. They have proven to offer fantastic designs over years, especially for Things. If you check out any icon directory such as Icon Finder it’s fairly simple to pick out a set of freebie, and from here you can mockup a design and code a similar style of list in CSS.

If you’re interested further in their design the Things for iPhone page actually uses a description list. Each icon is set as a definition term and the descriptions are placed off to the right. This isn’t the recommended way to use these tags, but it does work well in some circumstances!

Blog Categories and Tags

WordPress users are very familiar with the categories/tags system. It has worked well in most forms of social media so far, but it’s originally derived from the blogosphere. Tags are great for displaying a few niche articles related to the topic. Categories are much broader and used to encompass the greater portion of your articles.

The best example I can think of is Smashing Magazine and their new homepage re-design. At the top you’ll notice a tab labeled “Magazine” with a small tag icon hanging off the side. Hover over this to display a hidden list of categories such as coding, design, graphics, etc. Each is also styled with a fancy CSS3 hover effect to appear as glossy buttons.

Looking at the code you’ll notice they’ve placed this box in the left column area. It’s given a display: none; style to appear hidden until triggered. The unordered list is set with each list item containing an anchor link, but as alternative these links are displayed inline and broke onto two lines for the required space.

Footer Columns with Definition Lists

I was always a huge fan of the classic Digg design. It featured everything you would expect from a news website with great social capabilities. One really interesting piece to their old design is the footer columns setup using definition lists.

Unfortunately the Digg crew has already launched v4 design live, but the Internet is a nostalgic place and with the Wayback Internet Archives we can pull up an older design of Digg from August of 2007. This template features a lot of fantastic user interface elements, but more specifically let’s focus on the footer area. You’ll notice each column is actually broken into a data list element. These columns are set to display as blocks and float next to each other with predefined widths.

The data terms behave as headers within the list and only appear once per column. In my opinion this is a much nicer and cleaner way to build your description lists. It is possible to use more than one term per list, but this often mess up your HTML and you can lose track of code very quickly. The first two columns contain 6-7 links listed beneath each other as data terms for describing the header text, but after this you’ll notice columns break away from the default formatting.

For example, underneath Digg Tools & API there are only two data definitions. These are actually the 2 paragraphs which contain an internal link and a sentence. There’s certainly nothing wrong with this markup, and it’s actually a very creative and sustainable system for building footer columns. I’m certain if you surf the archives of Digg’s pages you’ll find a lot more fantastic examples of lists.

Tasks and To-dos

Lists are not always just incorporated for design styles. There are actually times where content requires list items to form an actual list of data. To-do lists are the perfect example of these phenomena. However there aren’t a ton of task managers built in web so it’s difficult to find great examples.

Flow App is one such service with a beautiful user panel. If you have the time I suggest signing up for a free account to give the app a demo. Even if you don’t plan on paying it’s still a very fun web app to mess around with and you can even pull out some design inspiration.

If you are logged in, the bottom left menu sorts your collection of lists. These are tasks which you can rearrange, edit, tag, and check as complete. Clicking on the first default list “The Basics” will open up content in the right pane, at here the entire list structure is built with an unordered list.

Each item contains a fairly large amount of inner context. Each bar you see going across presents one list item added to the overall <ul> element. There are a lot of internal objects such as an edit icon, a completion checkbox, a flag and a trash icon as well. Also in the side menu links underneath “Focus” you’ll notice constructed items set to an unordered list. It looks fantastic for its simplicity for sure.

Dribbble Players List

Along with many fellow designers I am a huge Dribbble addict. The website is constructed beautifully and it features some of the best graphic designers from all around the world. If you’re unfamiliar with the network Dribbble is an invite-only social community of web designers sharing shots of their latest work.

Things get interesting if you turn your attention to the bottom right of its sidebar area. Here we have an ordered list with the class “players-list“. It features rookies who are the newest designers given invites and who have signed into the website most recently. For whatever reason the Dribbble’s web developer has chosen to use an ordered list with each list item containing details about the user.

Inner content is actually broken up into two segments. A <div> floating to the right holds the follow/unfollow link if you are currently logged in. The alternate element displays a <h4> header with the class “vcard” containing the user’s name and avatar. These are both linked to their personal Dribbble profile, along with some account statistics.

Horizontal Breadcrumbs

There are some fantastic examples and written best practices for building breadcrumb navigation. These menus visibly display the collection of sub-links you’ve traversed to reach the current page. We have a fantastic breadcrumbs tutorial featured on Hongkiat built fully with CSS3 techniques and unordered lists.

The design uses anchor links as the block elements to display the list menu. The anchor link is given a background image and a diminishing z-index property so the arrows will display on top of each concurrent element.

Also, check out Google’s example on one of their support pages. This is the perfect page element to incorporate into your own website if you have multiple nested pages of content. Visitors will likely be looking to get back to previous pages without checking their history.

There aren’t too many alternatives for constructing a list of breadcrumb links. You could use an ordered list so search engine crawlers understand there is an order to the menu links, however as stated before this probably won’t make too much of a difference when it comes to ranking in SERPS. If you have more complex needs for breadcrumbs such as a title/description for each link you may better utilize the definition list element.

More Beautiful List-Based UI

Without going into too much detail it’s my goal to collect a fantastic setup of list-based interface elements. This is much easier said than done – but the Internet has so many options to choose from! There is plenty of room for growth in the realm of HTML lists. If you’re dying for more inspiration, check out the mini gallery below with some fantastic examples.

6wunderkinder

A fantastic navigation menu styled as button elements.

Cake Sweet Cake

Cake Sweet Cake features a beautiful list of thumbnail images containing some delicious samples of their bakery works.

Cheesemonger Invitational

The Cheesemonger Invitational website features 2 separate <ul> elements floating to create 1 navigation menu. It looks really neat in line with their centered logo graphic.

The Threepenny Editor

The social media links at the bottom part of the Threepenny Editor’s website are all crafted under a list. It fits perfectly into a column of their hands-and-paper layout theme.

Le Tipi

Another beautiful example of navigation menu styled with images and CSS.

You Know Who

You Know Who features a fancy retro design effect on their website. The bottom part of the home page has a small ordered list which contains thumbnails of their latest project work.

MediaLoot

An unordered list made for MediaLoot’s signup plans, looks promising.

365psd

365psd offers a brand new Photoshop template for download every day. In their sidebar you’ll find a list of tags built into an unordered list. This looks perfect in blogs and archive pages where a small tag list feels appropriate.

Conclusion

Hopefully this gallery of creative HTML-styled lists has given you some inspiration for designing layout content. It can be difficult to nail down a concrete idea for your lists on web pages, but item lists are a huge part of the design process and offer constructive relationships between markup tags and content.

There are probably dozens of other fantastic lists found around the web, and with the growing amount of web designers available we’ll surely see this number increases faster than ever. If you know of any great website featuring awesome HTML lists, feel free to offer the links in our comment section below. Also if you append any of the styles listed above into your own website we’d love to check it out!