HTML nested lists

Definition list

Definition lists are a special type of information structuring that is ideal for displaying explanatory and terminological dictionaries, as well as reference books by means of HTML.

Unlike ordered and unordered lists, which can contain several elements located one after another, the elements of the definition list must consist of two parts: the definition itself (the term) and its content part (description).

The definition list is created by using the <dl> (definition list) tag, within which the <dt> (definition term) tag that separates the term is specified, and a <dd> (definition description) tag that contains a description for the term:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>	
  <body>

    <h4>Definition list:</h4>
    <dl>
      <dt>Coffee</dt><dd>An invigorating hot drink</dd>
      <dt>Milk</dt><dd>A useful cold drink</dd>
    </dl>

  </body>
</html>
Try it »

Inside the <dd> element, you can place paragraphs, lines, images, links, other lists, etc.

Nested lists

Often the information has a complex branched structure, which, on the one hand, will be difficult to display as one list, on the other - it is impossible to break into several separate lists. In this case, the so-called nested lists (a list nested in another list) are used.

To create a nested list, put the child list in the parent list so that all elements of the child list are nested in the <li> element of the parent list:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>	
  <body>

    <h4>Nested list:</h4>
    <ul>
      <li>Coffee</li>
      <li>Tea
        <ol>
          <li>Black tea</li>
          <li>Green tea</li>
        </ol>
      </li>
      <li>Milk</li>
    </ul>

  </body>
</html>
Try it »

In this way, you can create multilevel lists.

Note: a normally nested list is displayed with a small indent to the right of the parent list.

With this theme look:

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen