의미없이 요소를 묶기 위한 태그

<div>
<span>Lorem</span>ipsum dolor sit.
</div>

• <div>: block-level 모니터 화면 <p>
• <span>: inline-level 라인 위 <b> <i> ...

리스트

<ul> unordered list로 순서가 없는 리스트

<ul>
  <li>생수</li>
  <li>수돗물</li>
  <li>폐수</li>
</ul>

실행결과

• 생수
• 수돗물
• 폐수

<ol> ordered list로 순서가 있는 리스트

<ol>
  <li>생수를 마신다.</li>
  <li>수돗물로 씻는다.</li>
  <li>폐수를 버린다.</li>
</ol>

실행결과

1. 생수를 마신다.
2. 수돗물로 씻는다.
3. 폐수를 버린다.

<dl>description list로 용어를 설명하는 리스트
<dt> definition term로 용어를 구분한다.
<dd> definition description로 용어의 정의를 나타낸다.

<dl>
  <dt>리플리 증후군</dt>
  <dd>허구의 세계를 진실이라 .... </dd>
  <dt>피그말리온 효과</dt>
  <dd>허구의 세계를 진실이라 .... </dd>
  <dt>언더독 효과</dt>
  <dd>허구의 세계를 진실이라 .... </dd>
</dl>

실행결과

리플리 증후군 허구의 세계를 진실이라 .... 피그말리온 효과 허구의 세계를 진실이라 .... 언더독 효과 허구의 세계를 진실이라 ....

리스트의 중첩

<h1>월드컵 조 편성</h1>
<ol>
  <li>A조
    <ul>
      <li>러시아</li>
      <li>우루과이</li>
      <li>이집트</li>
      <li>사우디 아라비아</li>
    </ul>
  </li>
  <li>B조
     <ul>
      <li>이란</li>
      <li>스페인</li>
      <li>포루투갈</li>
      <li>모로코</li>
    </ul>
  </li>
  <li>C조
     <ul>
      <li>프랑스</li>
      <li>덴마크</li>
      <li>호주</li>
      <li>페루</li>
    </ul>
  </li>
  <li>D조
     <ul>
      <li>크로아티아</li>
      <li>아르헨티나</li>
      <li>아이슬란드</li>
      <li>나이지리아</li>
    </ul>
  </li>
</ol>

실행결과

월드컵 조 편성

1. A조
   • 러시아
   • 우루과이
   • 이집트
   • 사우디 아라비아
2. B조
   • 이란
   • 스페인
   • 포루투갈
   • 모로코
3. C조
   • 프랑스
   • 덴마크
   • 호주
   • 페루
4. D조
   • 크로아티아
   • 아르헨티나
   • 아이슬란드
   • 나이지리아