Lists

HTML organizes content using <ul> for unordered lists, <ol> for ordered lists, and <dl> for definition lists, improving clarity and structure.

HTML Lists

HTML offers multiple ways to structure content using lists, making it easier to present related items in a clear format. The three primary types of lists are ordered, unordered, and definition lists.

Ordered Lists `<ol>`

Ideal for content that follows a specific order, typically displayed with numbers.
Implemented using the <ol> tag.
Each list entry is enclosed in the <li> tag.

Item 1
Item 2
Item 3

index.html

<ol>  
  <li>Item 1</li>  
  <li>Item 2</li>  
  <li>Item 3</li>  
</ol>

Ordered lists, by default, use sequential numbering (1, 2, 3...), but you can modify this using the type attribute.

Numbering Formats

type="1" (default): Standard numeric (1, 2, 3...)
type="a": Lowercase alphabetic (a, b, c...)
type="A": Uppercase alphabetic (A, B, C...)
type="i": Lowercase Roman numerals (i, ii, iii...)
type="I": Uppercase Roman numerals (I, II, III...)

Unordered Lists `<ul>`

Used when the sequence of items is not important.
Defined with the <ul> tag.
Each entry is structured within the <li> tag.

Item 1
Item 2
Item 3

index.html

<ul>  
  <li>Item 1</li>  
  <li>Item 2</li>  
  <li>Item 3</li>  
</ul>

The bullet style can be customized using the type attribute, but support varies across browsers.

Definition Lists `<dl>`

Useful for displaying terms and their definitions.
Constructed using the <dl> tag.
Terms are marked with the <dt> tag, while their descriptions go inside the <dd> tag.

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

index.html

<dl>  
  <dt>HTML</dt>  
  <dd>HyperText Markup Language</dd>  
  <dt>CSS</dt>  
  <dd>Cascading Style Sheets</dd>  
</dl>

HTML Description Lists

Consist of terms paired with descriptions.
The <dl> tag structures them.
Terms are enclosed in <dt>, and explanations in <dd>.

Coffee: - A black hot drink
Milk: - A white cold drink

index.html

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

HTML List Elements

Element	Functionality
`<ul>`	Defines an unordered list
`<ol>`	Defines an ordered list
`<li>`	Represents an item in a list
`<dl>`	Defines a descriptive list
`<dt>`	Specifies a term within a description list
`<dd>`	Provides the definition of a term

Ordered and unordered lists use <li>, while description lists incorporate <dt> for terms and <dd> for explanations.

HTML lists provide a clear way to structure and display related content. Ordered lists <ol> are ideal for sequential items, using numbers or other formats. Unordered lists <ul> are used when the order of items doesn't matter, typically displaying items with bullets. Definition lists <dl> are useful for showing terms and their definitions. The proper use of <li>, <dt>, and <dd> elements helps organize content effectively for better readability and understanding.

Block & Inline elements

Block elements such as <div> and <p> occupy the full width of their container and begin on a new line, whereas inline elements like <span> flow seamlessly within text.

Language Codes

HTML language codes, specified by the lang attribute, indicate the language of the content, helping browsers and search engines display and interpret it correctly.