HTML - HTML Nested List Elements

Home > HTML

HTML Nested List Elements

Q

Can List Elements Be Nested?

✍: FYIcenter.com

A

Yes. You can nest list element within each other because:

List items can have block elements as contents.
List elements are block elements.
List items can have list elements as contents resulting nested list elements.

Below is a good tutorial example of using nested list elements to build a 3-level table of contents:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Nested Lists</title>
 </head>
 <body>
  <h3>Tutorial Tips by FYIcenter.com:</h3>
  <ol>
  <li><strong>XHTML Tutorials/FAQs</strong> - 116 Entries
   <ol>
   <li>Introduction To XHTML 1.0
    <ol>
    <li>What Is XHTML?</li>
    <li>What Does an XHTML Document Look Like?</li>
    <li>What Is the Relation between XHTML and HTML?</li>
    <li>What Is the Relation between XHTML and XML?</li>
    <li>etc.</li>
    </ol>
   </li>
   <li>Introduction To Tag and Attribute Syntax
    <ol>
    <li>What Is an XHTML Element?</li>
    <li>How To Enter Comments into XHTML documents?</li>
    <li>How To Write the Opening Tag of an XHTML Element?</li>
    <li>How To Closing an XHTML Element?</li>
    <li>etc.</li>
    </ol>
   </li>
   <li>etc.</li>
   </ol>
  </li>
  <li><strong>PHP Tutorials/FAQs</strong> - 204 Entries
   <ol>
   <li>Understanding and Managing Cookies
    <ol>
    <li>What Is a Cookie?</li>
    <li>How To Send a Cookie to the Browser?</li>
    <li>How To Receive a Cookie from the Browser?</li>
    <li>etc.</li>
    </ol>
   </li>
   </ol>
  </li>
  </ol>
 </body>
</html>

If you save the above document as nested_lists.html, and view it with Internet Explorer, you will see a list tree of 3 levels as shown below:
HTML ol Element - Nested Lists

⇒HTML Lists and List Items

⇒⇒HTML Tutorials

2017-05-29, 504👍, 0💬

HTML Ordered List Item Markers
How To Use Different Markers on Ordered List Items? By default, browsers will use decimal numbers as the item markers for ordered lists. If you want to change them to something else, like alphabetical letters, you need to use CSS properties. Here is a tutorial sample showing you how to set item mark... 2017-05-29, 562👍, 0💬

HTML Un-ordered List 'ul' Tag/Element
What Is a "ul" Tag/Element? A "ul" element is block level element that can be used to define an un-ordered list, where items are displayed with leading bullets. Here are basic rules about "ul" elements: "ul" elements are block level elements. "ul" elements can not have text contents. An "ul" element... 2017-05-29, 516👍, 0💬

HTML Un-ordered List Item Markers
How To Use Different Markers on Unordered List Items? By default, browsers will use solid dots as the item markers for unordered lists. If you want to change them to something else, like tiny squares, you need to use CSS properties. Here is a tutorial example showing you how to set item markers to b... 2017-05-20, 512👍, 0💬

HTML Nested List Elements
Can List Elements Be Nested? Yes. You can nest list element within each other because: List items can have block elements as contents. List elements are block elements. List items can have list elements as contents resulting nested list elements. Below is a good tutorial example of using nested list... 2017-05-29, 505👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.