HTML <ul> 태그 – 올바른 이해와 사용 방법

`<ul>` 태그의 정의 및 사용법

<ul> 태그는
순서가 지정되지 않는 항목(items)의 목록(list)를 나타내는 태그입니다.
<ul>은 순서를 변경해도 그 의미가 실질적으로 변경되지 않는다는 의미인 Unordered List(정렬되지 않은 목록)의 약자로 사용된 것입니다.

<ul> 태그는 순서가 중요하지 않는 항목들을 그룹화하기 위해 사용됩니다. 이 요소의 하위 항목은 <li> 태그로 구성된 요소입니다. 이 항목 앞에는 글머리 기호(예를 들어 "•")가 자동으로 생성되어 표시됩니다.

HTML <li> 태그

순서가 중요한 항목들을 그룹화하기 위해서는 <ol> 태그를 사용하세요.

HTML <ol> 태그

다음은 <ul> 태그를 사용한 간단한 예제입니다.

HTML

<p>우리동네 분석점은 맛있는 메뉴가 많습니다.</p>
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>

HTML <p> 태그

<ul> 태그의 형식은 다음과 같습니다.

허용되는 콘텐츠와 주의할 점

<ul> 태그의 자식 요소로 사용될 수 있는 콘텐츠는 제한적입니다.

<li>
<script>
<template>

0개 이상의 이 요소들을 제외하고 다른 요소, 혹은 텍스의 삽입(text node를 의미함) 등은 사용할 수 없습니다.

다음의 예시는 <ul> 태그의 허용되지 않는 콘텐츠를 사용한 잘못된 사례들과 올바른 사례들입니다.

잘못된 사례와 올바른 사례 😃

HTML - 잘못된 사례 <ul> 태그의 자식 요소로 사용할 수 없는 <p> 태그가 사용되었습니다.

<ul>
    <p>우리동네 분석점은 맛있는 메뉴가 많습니다.</p>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>

HTML - 잘못된 사례 <ul> 태그의 콘텐츠로 텍스트가 사용되었습니다.

<ul>
    우리동네 분석점은 맛있는 메뉴가 많습니다.
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>

HTML - 올바른 사례

<p>우리동네 분석점은 맛있는 메뉴가 많습니다.</p>
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>

HTML - 잘못된 사례 <ul> 태그의 자식 요소로 사용할 수 없는 <a> 태그가 사용되었습니다.

<nav>
    <ul>
        <a href=""><li>회사소개</li></a>
        <a href=""><li>제품</li></a>
        <a href=""><li>개인정보처리방침</li></a>
        <a href=""><li>고객센터</li></a>
    </ul>
</nav>

HTML <nav> 태그

HTML - 올바른 사례

<nav>
    <ul>
        <li><a href="">회사소개</a></li>
        <li><a href="">제품</a></li>
        <li><a href="">개인정보처리방침</a></li>
        <li><a href="">고객센터</a></li>
    </ul>
</nav>

HTML - 잘못된 사례가 아니지만 권장하지 않음 <ul> 태그에 콘텐츠가 없어도 구문상 잘못된 사례는 아닙니다. 하지만 HTML의 콘텐츠 맥락상 사용을 권장하지 않습니다.

<ul>
    <!-- 콘텐츠가 없습니다. -->
</ul>

`type` 속성과 주의할 점

이 속성은 <ul> 태그 하위 항목인 <li> 태그 앞에 자동으로 생성되는 글머리 기호(예를 들어 "•") 스타일을 설정합니다.
이 속성의 다음과 같습니다.

circle
disc
square

대부분의 브라우저에서는 지원하고 있는 이 속성은 HTML5에서 더 이상 사용하지 않으므로 사용하지 마세요.

HTML type 속성은 HTML5에서 더 이상 사용하지 않으므로 사용하지 마세요.

<ul type="circle">
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>

만약에 글머리 기호를 변경하려면 CSS의 list-style-type를 사용하세요.

HTML 글머리 기호를 변경하려면 CSS의 list-style-type를 사용하세요.

<ul style="list-style-type: circle;">
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>

`role="list"`로 `<ul>`의 역할 구현하기

HTML 문서에 순서가 지정되지 않는 항목(items)의 목록(list)를 나타내는 콘텐츠로 <ul> 태그를 마크업해서 사용하면 가장 좋지만, 그렇지 못한 경우도 있습니다. 외부(third-party)의 HTML과 CSS 혹은 자바스크립로 구성된 라이브러리를 사용할 경우 개발자가 원하는 태그를 사용할 수 없는 경우가 종종 있습니다. 이럴 경우 해당 라이브러리의 태그에 role="list"로 <ul>의 역할을 구현할 수 있습니다.

HTML role 속성은 HTML 요소(Element)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 속성입니다. 원하는 태그를 사용하지 못할 경우 이 속성과 값을 사용해서 원하는 태그의 역할을 부여할 수 있습니다.

HTML role 속성

다음의 예시는 <ul> 태그를 사용하지 않고 <div> 태그에 role="list"로 <ul>의 역할 구현한 것입니다.

HTML 출처: MDN - ARIA: list role

<div role="list">
    <div role="listitem">List item 1</div>
    <div role="listitem">List item 2</div>
    <div role="listitem">List item 3</div>
</div>

HTML <div> 태그

<ul> 태그의 암시적인 role 속성의 값은 list입니다.

중첩된 목록 사용하기

<ul> 태그 하위 항목인 <li> 태그에 <ul> 태그나 <ol> 태그를 필요한 만큼 중첩해서 사용할 수 있고 서로 교차해서도 사용할 수 있습니다.

<li> 태그에 <ul> 태그 중첩

<p>우리동네 분석점은 맛있는 메뉴가 많습니다.</p>
<ul>
    <li>
        면류
        <ul>
            <li>라면</li>
            <li>칼국수</li>
            <li>스파게티</li>
        </ul>
    </li>
    <li>
        김밥류
        <ul>
            <li>참치김밥</li>
            <li>야채김밥</li>
            <li>날치알김밥</li>
        </ul>
    </li>
    <li>
        돈까스류
        <ul>
            <li>일반돈까스</li>
            <li>돈까스정식</li>
        </ul>
    </li>
</ul>

<li> 태그에 <ol> 태그 중첩

<p>우리동네 분석점의 분류별 메뉴의 순서입니다.</p>
<ul>
    <li>
        면류
        <ol>
            <li>라면</li>
            <li>칼국수</li>
            <li>스파게티</li>
        </ol>
    </li>
    <li>
        김밥류
        <ol>
            <li>참치김밥</li>
            <li>야채김밥</li>
            <li>날치알김밥</li>
        </ol>
    </li>
    <li>
        돈까스류
        <ol>
            <li>일반돈까스</li>
            <li>돈까스정식</li>
        </ol>
    </li>
</ul>