HTML 리스트 ol, ul, dl 순서에 따른 목차 태그의 종류

HTML 리스트

HTML 리스트 기능은 HTML 문서의 목차를 정의합니다.

리스트에는 순서가 없는 리스트, 순서가 있는 리스트, 서술하는 리스트가 있습니다.

목차라는 것은 아래 웹페이지 그림에서 보면 어떤 영역이든 들어갈 수 있습니다. 단지 보통 페이지를 설계 할 때 자주 들어가는 곳은 <nav> 영역이나 <aside>영역일 것입니다.

순서가 없는 리스트

순서가 없는 리스트는 <ul> 태그와 <li> 태그가 함께 사용됩니다.

<ul> 태그를 사용한 HTML 문장은 들여쓰기가 되고, 문장의 앞에 검은 점이 붙습니다.

<ul>
  <li>감자</li>
  <li>브로콜리</li>
  <li>당근</li>
  <li>양파</li>
  lt;li>마늘</li>
</ul>

예제 ▷

순서가 있는 리스트

순서가 있는 리스트는 <ol> 태그와 <li> 태그가 함께 사용됩니다.

<ol> 태그를 사용한 HTML 문장은 들여쓰기가 되고, 숫자가 문장의 앞에 오름차순으로 붙습니다.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
  <li>PHP</li>
  <li>MySQL</li>
</ol>

예제 ▷

서술하는 리스트

서술하는 리스트는 <dl> 태그, <dt> 태그, <dd> 태그가 함께 사용됩니다.

<dt> 태그는 서술하는 용어를 정의합니다. <dd> 태그는 용어의 설명을 정의합니다.

<dl>
  <dt>HTML</dt>
    <dd>: HTML은 문서의 정보 구역을 정의합니다.</dd>
  <dt>CSS</dt>
    <dd>: CSS은 문서의 디자인 구역을 정의합니다.</dd>
</dl>

예제 ▷