Unordered Lists with ul and li

Technical Deep Dive & Specifications

WHATWG Specification & DOM Interface

According to the WHATWG HTML Living Standard:

• <ul> Element: Represents a list of items, where the order of the items is not mathematically or chronologically significant.
  • DOM Interface: HTMLUListElement (inherits from HTMLElement).
  • Permitted Parents: Any element that accepts flow content.
  • Permitted Direct Children: Zero or more <li> elements, along with script-supporting elements (<script> and <template>).
• <li> Element: Represents a single list item.
  • DOM Interface: HTMLLIElement (inherits from HTMLElement).
  • Permitted Parents: <ul>, <ol>, or <menu>.
  • Permitted Children: Flow content (headings, paragraphs, images, nested lists, links, <div>, etc.).

+-------------------------------------------------------------+
| <ul> (HTMLUListElement)                                     |
|   |-- Permitted direct children: ONLY <li>, <script>, <template>
|   |                                                         |
|   +--> <li> (HTMLLIElement)                                 |
|   |      |-- Permitted content: ANY Flow Content            |
|   |      +-- Contains: Text, <p>, <a>, <div>, <img>, etc.   |
|   |                                                         |
|   +--> <li> (HTMLLIElement)                                 |
|          +-- Contains: Flow Content                         |
+-------------------------------------------------------------+

The Strict Child Constraint Law

One of the most frequent HTML syntax violations found in code audits is placing non-<li> elements as direct children of <ul>.

<!-- ❌ INVALID: Heading and Div are direct children of <ul> -->
<ul>
  <h3>System Requirements</h3>
  <div>Memory: 16GB</div>
  <li>Storage: 512GB SSD</li>
</ul>

<!-- ✅ VALID: All content is housed inside <li> nodes -->
<ul>
  <li>
    <h3>System Requirements</h3>
    <p>Memory: 16GB</p>
  </li>
  <li>
    <p>Storage: 512GB SSD</p>
  </li>
</ul>

Default Browser User-Agent Styles

Browsers apply standardized default styling to <ul> and <li> defined by the CSS rendering specifications:

/* Standard Browser Default Stylesheet for <ul> */
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px; /* Indentation for markers */
}

/* Standard Browser Default Stylesheet for <li> */
li {
  display: list-item;
  text-align: match-parent;
}

The Box Generation Model: display: list-item

When an element has display: list-item, the browser's layout engine generates two boxes:

1. Principal Block Box: Contains the element's actual content (text, paragraphs, nested tags).
2. Marker Box: An inline pseudo-box generated outside (or inside) the principal box that renders the bullet glyph (disc, circle, square, or custom glyph).

                      +--- Marker Box (Generated by User Agent)
                      |
                      v
                    [ * ] +-------------------------------------------+
                          | Principal Block Box                       |
                          | "100% Cotton Pre-shrunk fabric"           |
                          +-------------------------------------------+

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 41–42: <article class="card"> and <h2> provide the semantic context and heading for the list.
• Line 43: <ul class="feature-list"> establishes an unordered list container. Assistive technologies announce this as "List, 4 items".
• Lines 44–46: First <li> node. Notice <strong> is used inside <li> for phrasing emphasis.
• Lines 47–50: Second <li> includes inline formatting (<strong>), plain text, and a <span class="badge">. Valid flow content nested legally within <li>.
• Lines 51–56: Third and fourth <li> items. All items share equal sequence weight; reordering them preserves meaning.

Expected Browser Render Output

+---------------------------------------------------+
| Cloud Cluster Capabilities                        |
|                                                   |
|  * Zero-Downtime Deployments: Blue-green and      |
|    canary routing.                                |
|  * Automated Scalability: Scale from 1 to 500     |
|    pods dynamically. [Enterprise]                 |
|  * Integrated Telemetry: Distributed tracing      |
|    with OpenTelemetry.                            |
|  * Encrypted Secrets: AES-256 vault encryption    |
|    at rest and in transit.                        |
+---------------------------------------------------+