HTML 목록태그 ul,ol,li,dl,dt,dd

서론

html 목록을 표시하기 위해서 ul,ol 등의 태그들을 많이들 쓴다. 특히 요즈음 들어 css와 이런 태그를 같이 사용하는게 대세를 이루면서 더욱 많이 쓰게되었다. 그러나 이런 태그의 정확한 의미를 모르고 사용을 했었다. 그래서 한번 정리해 두려고 한다.

 

본론

1.태그이름

ul (Unordered List) : 순서 없는 목록

ol (Ordered List) : 순서 있는 목록

li (List Item) : 목록 아이템

dl (Definition List) : 용어 정의 목록

dt (Definition Terms) : 용어

dd (Definition Description) : 용어의 설명

 

2. ul (순서 없는 목록) 예시

- 소스

<ul type=”disc”>
    <li type=”square”>item1</li>
    <li type=”circle”>item2</li>
    <li type=”disc”>item3</li>
    <li>item4</li>
</ul>

- 결과

• item1
• item2
• item3
• item4

 

3. ol (순서 있는 목록) 예시

- 소스

<ol>

    <li type="a">item1</li>
    <li type="A">item2</li>
    <li type="i">item3</li>

    <li>item4</li>
</ol>

- 결과

1. item1
2. item2
3. item3
4. item4

 

4. dl (용어 정의 목록) 예시

- 소스

<dl>
    <dt>def1_title</dt>
    <dd>def1_description</dd>
    <dt>def2_title</dt>
    <dd>def2_description</dd>
</dl>

- 결과

def1_title

def1_description

def2_title

def2_description

 

결론

사실 몇년 전만해도 이런 태그들은 그리 주목받지 못했다. 그러나 시맨틱웹 같은 개념이 등장하면서 이러한 태그들은 다시 주목받기 시작했다.  그 이유는 이런 태그들과 css에 의해서 html 에서 데이터와 디자인을 어느정도 분리 할 수 있게 되었기 때문이다. 그러나 아직 완전한 분리는 아니다. 내가 생각하기에 완전한 분리를 위해서는 xml 과 xslt 기술을 이용하여 웹사이트를 제작하여야 가능 할 것이라고 본다.