HTML에는 각각 semantic한 의미를 가진 세 가지 리스트 타입이 있습니다. 올바른 것을 사용하면 accessibility(스크린 리더가 "리스트, 항목 3개"라고 안내)와 구조에 도움이 됩니다.
순서 없는 리스트 — 순서가 중요하지 않음
html
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</>
기본적으로 글머리 기호로 렌더링됩니다. 순서가 의미 없는 모든 것(내비게이션 메뉴, 기능 목록, 태그)에 사용하십시오.
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
숫자로 렌더링됩니다. 단계, 순위, 지침에 사용하십시오. attribute: type(1, a, A, i, I), start(첫 번째 번호), reversed.
<dl>
<dt>HTML</dt>
<dd>The markup language for web pages.</dd>
<dt>CSS</dt>
<dd>The styling language for web pages.</dd>
</dl>
<dt>는 용어, <dd>는 그 설명입니다. 용어집, 메타데이터, 키/값 쌍에 적합합니다.
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- 중첩된 하위 메뉴 -->
</li>
</ul>
</nav>
내비게이션 메뉴는 관례적으로 <nav> 안의 <ul>로 마크업합니다.
리스트는 글머리 기호만을 위한 것이 아닙니다. 스크린 리더가 안내하고 여러분이 자유롭게 스타일링할 수 있는 구조를 콘텐츠에 부여합니다(기본 마커는 CSS로 쉽게 제거됩니다).
<ul> vs <ol> vs <dl>을 선택하는 것은 의미를 전달합니다. 순서 없음, 순차적, 또는 용어-정의입니다.