HTML defines three different elements we can use to create lists.
Unordered lists, denoted by <ul> with the item tag <li>, are for lists with no intrinsic order - like the musicians in a band; as long as they’re all there, the order doesn’t really matter.
<ul>
<li>Axl Rose (vocals)</li>
<li>Slash (guitars)</li>
<li>Izzy Stradlin (guitars)</li>
<li>Duff McKagan (bass)</li>
<li>Steven Adler (drums)</li>
</ul>Ordered lists, denoted by the tag <ol> and the item tag <li>, denote items with a meaningful order, such as the track listing on a record:
<ol>
<li>Welcome To The Jungle</li>
<li>It's So Easy</li>
<li>Out Ta Get Me</li>
<li>Nighttrain</li>
<li>Mr Brownstone</li>
<li>Paradise City</li>
<li>My Michelle</li>
<li>Think About You</li>
<li>Sweet Child O' Mine</li>
<li>You're Crazy</li>
<li>Anything Goes</li>
<li>Rocket Queen</li>
</ol>And description lists (which were called definition lists until HTML5, since they were originally intended for marking up content like dictionaries and glossaries) - a <dl> containing description term <dt> elements, each with an associated description details <dd>:
<dl>
<dt>Appetite for Destruction (1987)</dt>
<dd>A hard-rock landmark packed with raw energy and iconic anthems like
“Sweet Child o’ Mine” and “Welcome to the Jungle.”</dd>
<dt>G N’ R Lies (1988)</dt>
<dd>A half-acoustic, half-live album blending raw storytelling and
controversy with hits like “Patience.”</dd>
<dt>Use Your Illusion I (1991)</dt>
<dd>A sprawling, ambitious collection showcasing the band’s range from
aggressive rockers to epic ballads.</dd>
<dt>Use Your Illusion II (1991):</dt>
<dd>The darker, more political twin to Volume I, featuring hits like “Civil
War” and “You Could Be Mine.”</dd>
<dt>“The Spaghetti Incident?” (1993):</dt>
<dd>A loose, punk-driven covers album paying tribute to the band’s
influences.</dd>
<dt>Chinese Democracy (2008):</dt>
<dd>A long-awaited, eclectic mix of industrial, electronic, and hard rock
after years of anticipation and lineup changes.</dd>
</dl>Styling Lists
Let’s start with the easy ones. You want to change the style of the bullets used on an unordered list? There’s a bunch of built-in bullets you can use:
ul {
list-style-type: circle;
ul {
list-style-type:square;
ul {
list-style-type: '🎵';
}
}
<ul>
<li>Jazz
<ul>
<li>Saxophone
<ul>
<li>John Coltrane</li>
<li>Charlie Parker</li>
</ul>
</li>
<li>Piano
<ul>
<li>Thelonious Monk</li>
<li>Herbie Hancock</li>
</ul>
</li>
<li>Trumpet
<ul>
<li>Miles Davis</li>
<li>Dizzy Gillespie</li>
</ul>
</li>
</ul>
</li>
<li>Rock
<ul>
<li>Electric Guitar
<ul>
<li>Jimi Hendrix</li>
<li>Eddie van Halen</li>
</ul>
</li>
<li>Drums
<ul>
<li>Neil Peart</li>
<li>Cozy Powell</li>
</ul>
</li>
<li>Bass Guitar
<ul>
<li>Flea</li>
<li>Geddy Lee</li>
</ul>
</li>
</ul>
</li>
</ul>If you want the bullets to appear inside the element’s content, instead of alongside it, use list-style-position:
ul,
ol,
li {
outline: 1px solid magenta;
}
ul.synthesizers {
list-style-position:inside;
}
<ul class="guitars">
<li>Fender Stratocaster</li>
<li>Gibson Les Paul</li>
<li>Ibanez RG550</li>
</ul>
<ul class="synthesizers">
<li>Oberheim OB-Xa</li>
<li>Moog Modular</li>
<li>Sequential Circuits Prophet</li>
</ul>This screenshot shows how the list markers are actually drawn into the left padding on the <ul> element:
To style the marker itself, CSS exposes the ::marker pseudo-element:
ul li::marker {
content: '☑️';
}
ol li::marker {
font-size: 2rem;
font-weight: bold;
font-style: italic;
color: blue;
}
<h2>Ingredients</h2>
<ul>
<li>400g pasta (spaghetti or linguine)</li>
<li>4 eggs</li>
<li>200g pancetta or guanciale</li>
<li>100g Parmesan cheese, grated</li>
<li>Black pepper</li>
</ul>
<h2>Method</h2>
<ol>
<li>Cook pasta</li>
<li>Mix eggs, cream and parmesan</li>
<li>Stir into cooked pasta, and return to the pan for 3-5 minutes.</li>
<li>Serve with black pepper and extra parmesan.</li>
</ol> Defining Custom Counters with @counter-style
The @counter-style rule, available across all mainstream browsers since 2023, provides a way to define our own custom counter styles.
It’s incredibly powerful and flexible; check out the MDN documentation for full details of how @counter-style works; here’s a few examples to give you some idea of what it can do.
@counter-style card-suits {
system: cyclic;
/* when you get to the end of the list, start over */
symbols: ♣ ♥ ♠ ♦;
suffix: " ";
}
@counter-style hex-digits {
system: numeric;
symbols: 𝟘 𝟙 𝟚 𝟛 𝟜 𝟝 𝟞 𝟟 𝟠 𝟡 𝔸 𝔹 ℂ 𝔻 𝔼 𝔽;
pad: 3 𝟘;
suffix: " ";
}
ol.programming-languages {
list-style: hex-digits;
}
ul.playing-cards {
list-style: card-suits;
li::marker {
font-size: 1.4em;
}
li:nth-child(2n)::marker {
color: crimson;
}
}
ul, ol {
width: 50%;
float: left;
box-sizing: border-box;
}
<ol class="programming-languages">
<li>Assembly (1949)</li>
<li>Fortran (1957)</li>
<li>LISP (1958)</li>
<li>ALGOL (1958/1960)</li>
<li>COBOL (1959)</li>
<li>APL (1962)</li>
<li>BASIC (1964)</li>
<li>PL/I (1964)</li>
<li>Logo (1967)</li>
<li>Simula (1967)</li>
<li>BCPL (1967)</li>
<li>Pascal (1970)</li>
<li>C (1972)</li>
<li>Prolog (1972)</li>
<li>ML (1973)</li>
<li>SQL (1978)</li>
<li>Ada (1980)</li>
<li>C++ (1983)</li>
<li>Objective-C (1984)</li>
<li>Erlang (1986)</li>
<li>Perl (1987)</li>
<li>Tcl (1988)</li>
<li>Python (1991)</li>
<li>Visual Basic (1991)</li>
<li>Lua (1993)</li>
<li>Ruby (1995)</li>
<li>Java (1995)</li>
<li>PHP (1995)</li>
<li>JavaScript (1995)</li>
<li>Delphi (Object Pascal) (1995)</li>
<li>Rebol (1997)</li>
<li>ActionScript (1998)</li>
<li>C# (2000)</li>
<li>D (2001)</li>
<li>Scala (2003)</li>
<li>Groovy (2003)</li>
<li>F# (2005)</li>
<li>Go (2009)</li>
<li>Rust (2010)</li>
<li>Kotlin (2011)</li>
</ol>
<ul class="playing-cards">
<li>Texas Hold 'Em</li>
<li>Five Card Stud</li>
<li>Racing Demon</li>
<li>Blackjack</li>
<li>Baccarat</li>
<li>Gin Rummy</li>
<li>Canasta</li>
<li>Hearts</li>
<li>Black Maria</li>
</ul>The thing to remember about an unordered list is that, while the browser typically displays it as a list of bullet points, it doesn’t have to be bullets. One very common scenario is to wrap a <ul> inside a <nav> element, to create the main navigation menu for a page or a site:
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
header {
h1 {
margin: 0;
padding: 0.5rem;
font-size: 1.2rem;
}
nav {
background-color: #036;
ul {
margin: 0;
padding: 0;
li {
display: inline-block;
a {
color: white;
text-decoration: none;
display: inline-block;
padding: 0.5rem;
margin: 0 0.2em;
border-width: 0 1px;
border-style: solid;
border-color: transparent;
&:hover {
border-color: #fff;
background-color: #069;
}
}
}
}
}
}
<header>
<h1>Music Marketplace</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Guitars</a></li>
<li><a href="#">Basses</a></li>
<li><a href="#">Keyboards</a></li>
<li><a href="#">Drums</a></li>
<li><a href="#">Woodwind</a></li>
<li><a href="#">Recording</a></li>
</ul>
</nav>
</header>
<ul>
<li>and then just a normal list</li>
<li>because the special styling</li>
<li>only applies to the nav menu.</li>
</ul>CSS Counter Functions
As well as using lists for elements like menus, we can use CSS counters for things which aren’t lists.
counter-resetandcounter-incrementwill modify the value of a named counter- Using pseudo-elements,
contentand thecounter()function, we can add counters to elements during the styling process.
Custom Identifiers in CSS
Counter names are the first example we’ve met of a property which uses a CSS custom identifier (aka custom-ident). Custom identifiers must be:
- one or more more characters, containing letters
A-Za-z, digits0-9, hyphens-and underscores_. - Other characters, and Unicode code point sequences, must be escaped with a backslash
\ - Custom idents can’t start with a number; if they start with a hyphen, the first non-hyphen character must not be a number.
Valid custom identifiers:
valid-identifier-valid-identifier_valid_identifier-my-id-123my\.identifier(period escaped with a backslash)
Invalid identifiers:
123-identifier(starts with a digit)-123-identifier(starts with a hyphen followed by a digit)my.identifier(the.hasn’t been correctly escaped)my identier(custom idents can’t contain spaces)'my identifier'(idents can’t be quoted strings)
For example, to create a document with legal-style numbered paragraphs, we can define custom counters called section, subsection and paragraph, which we then increment and reset based on the document structure:
body {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
:is(h2, h3, p) {
padding-left: 4rem;
&::before {
position: absolute;
left: 1rem;
display: inline-block;
width: 3rem;
text-align: left;
}
}
h2 {
counter-increment: section;
counter-reset: subsection;
&::before {
content: counter(section) " ";
}
}
h3 {
counter-increment: subsection;
counter-reset: paragraph;
&::before {
content: counter(section) "." counter(subsection) " ";
}
}
p::before {
counter-increment: paragraph;
content: counter(section) "." counter(subsection) "." counter(paragraph) " ";
}
<h1>Electric Guitar: Requirements Specification</h1>
<h2>Body Construction</h2>
<h3>Material</h3>
<p>The guitar body shall be constructed from solid mahogany, alder, or ash.
Wood grain shall be tight and consistent with no visible defects or knots.
</p>
<p>Body wood shall be properly seasoned for a minimum of 12 months. Moisture
content shall be between 6% and 8% to prevent warping.</p>
<p>All wood materials must be sourced from sustainable forestry operations and
certified by recognized environmental standards.</p>
<h3>Shape and Dimensions</h3>
<p>The body shape shall conform to standard Stratocaster or Les Paul
templates.</p>
<p>Body thickness shall be between 40mm and 45mm.</p>
<p>Weight distribution must be balanced to ensure comfortable playing position
and prevent neck dive when worn with a strap.</p>
<h3>Routing and Cavities</h3>
<p>Electronics cavity shall allow for standard humbucker and single-coil
pickup routing.</p>
<p>Control cavity shall accommodate at least 2 potentiometers and a 5-way
switch.</p>
<p>All cavities must be properly shielded with copper foil or conductive paint
to minimize electromagnetic interference.</p>
<h2>Neck Construction</h2>
<h3>Material</h3>
<p>Neck shall be made from maple or mahogany.</p>
<p>Fingerboard shall be rosewood, maple, or ebony.</p>
<p>Wood joints between neck and fingerboard must be seamless and reinforced
with appropriate adhesives rated for musical instrument construction.</p>
<h3>Shape and Scale</h3>
<p>Scale length shall be 25.5” (+/- 0.1”).</p>
<p>Neck profile shall be C or D shape.</p>
<h3>Truss Rod</h3>
<p>Neck shall include a dual-action truss rod for adjustability.</p>
<p>Truss rod must be adjustable without removing the guitar neck or strings
</p>
<h2>Hardware</h2>
<h3>Bridge</h3>
<p>Guitar shall feature a fixed bridge or two-point tremolo system.</p>
<p>Bridge material shall be steel or brass.</p>
<h3>Tuners</h3>
<p>Headstock must accommodate 6 inline or 3+3 tuners.</p>
<p>Tuners shall provide at least 18:1 gear ratio for tuning stability.</p>
<h3>Electronics</h3>
<p>Pickups shall be shielded and soldered to minimize noise.</p>
<p>Output jack shall be 1/4” mono standard.</p>
<h2>Replaceability</h2>
<h3>Pickups</h3>
<p>Pickups must be easily replaceable using standard screw mounts and
soldering.</p>
<h3>Strings</h3>
<p>String replacement must be possible without removing the neck.</p>
<h2>Cleaning</h2>
<h3>Finish</h3>
<p>All surfaces must tolerate standard guitar cleaning products.</p>
<h3>Electronics</h3>
<p>Electronics cavity should allow easy access for dusting and contact
cleaning.</p>
<h2>Electrical Safety</h2>
<h3>Grounding</h3>
<p>All metal components shall be grounded to prevent electric shocks.</p>
<h3>Insulation</h3>
<p>Wires must be insulated with heat-resistant sheathing.</p>
<h2>Physical Safety</h2>
<h3>Edges</h3>
<p>All body and neck edges shall be rounded to prevent injury.</p>
<h2>Playability</h2>
<h3>Action</h3>
<p>String action at the 12th fret shall be between 1.5mm and 2.0mm.</p>
<h3>Intonation</h3>
<p>Instrument shall allow for intonation adjustment at each string.</p>
<p>Intonation accuracy shall be within +/- 2 cents across all frets and
strings.</p>
<h2>Electronics</h2>
<h3>Output</h3>
<p>Output signal shall be free from hum above 60dB.</p>
<h3>Tone Controls</h3>
<p>Tone and volume controls shall be smooth and noise-free throughout their
range.</p>
<h2>Finish</h2>
<h3>Color</h3>
<p>Body and headstock shall be finished in gloss or satin, in customer’s
choice of color.</p>
<h3>Inlays</h3>
<p>Fretboard shall include position marker inlays at standard fret positions.
</p>
<h2>User Manual</h2>
<h3>Contents</h3>
<p>Manual shall include string changing, truss rod adjustment, and cleaning
procedures.</p>