LISTS in HTML

HTML Lists


HTML lists allow web developers to group a set of related items in lists.


Example

An unordered HTML list:

  • Item
  • Item
  • Item
  • Item

An ordered HTML list:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

Output:-

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Output:-

HTML List Tags

TagDescription
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<dl>Defines a description list
<dt>Defines a term in a description list
<dd>Describes the term in a description list

HTML Block and Inline Elements


Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.


Block-level Elements

A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline element does not.The <div> element is a block-level element.

Example


Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example

Note: An inline element cannot contain a block-level element!


The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but styleclass and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example


The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but styleclass and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example

Leave a Comment