HTML Introduction | Basic HTML Elements | HTML Lists

Tags:

A list is a sequence or roster of multiple elements. HTML provides tags for representing lists or rosters in which multiple elements are arranged in a row.

  1. Ordered list
  2. Unordered list
  3. Definition list

Ordered list

An ordered list is created with the <ol> tag, and each list element included in it is created with the <li> tag. Arabic numerals are displayed before each list element as the default marker.

<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

Run code

By using the CSS list-style-type property, you can change the marker placed before each list element to another shape.

  • decimal: numbers, the default
  • upper-alpha: uppercase English letters
  • lower-alpha: lowercase English letters
  • upper-roman: uppercase Roman numerals
  • lower-roman: lowercase Roman numerals
<p>decimal : 숫자 (기본설정)</p>
<ol>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-alpha : 영문 대문자</p>
<ol style="list-style-type: upper-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-alpha : 영문 소문자</p>
<ol style="list-style-type: lower-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-roman : 로마 숫자 대문자</p>
<ol style="list-style-type: upper-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-roman : 로마 숫자 소문자</p>
<ol style="list-style-type: lower-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>

Run code

Unordered list

An unordered list is created with the <ul> tag, and each list element included in it is created with the <li> tag. A small black circle, or bullet, is displayed before each list element as the default marker.

<ul>
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
</ul>

Run code

By using the CSS list-style-type property, you can change the marker placed before each list element to another shape.

  • disc: small black circle, the default
  • circle: small white circle
  • square: square shape
<p>disc : 검정색 작은 원형 모양 (기본설정)</p>
<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>
  
<p>circle : 흰색 작은 원형 모양</p>
<ul style="list-style-type: circle">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

<p>square : 사각형 모양</p>
<ul style="list-style-type: square">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

Run code

Definition list

A definition list is a list of terms and their definitions, and it is created with the <dl> tag. The <dt> tag contains the term, and the <dd> tag contains the definition of that term.

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>XML</dt>
  <dd>eXtensible Markup Language</dd>
</dl>

Run code