HTML - Grouping content

박도겸·2022년 4월 10일

`<ol>, <ul>, <li>`

<ol></ol>

: <ol> 은 순서 있는 목록(ordered list)을 표시하는 데 사용한다. <ol> 의 직계 자식 요소로는 <li> 요소만 사용되어야 한다.
<ul></ul>

: <ul> 은 순서 없는 목록(unordered list)을 표시하는 데 사용한다. 마찬가지로 <ul> 의 직계 자식 요소로는 <li> 요소만 사용되어야 한다.

CSS에서 list-style-type: ; 을 이용해 불릿을 없애거나 변경할 수 있다.
<li></li>

: <li> 는 각 항목들을 나열하는 태그(list item)를 의미한다. 목록에서 각 항목은 <li></li> 태그 사이에 배치한다. 또한, 브라우저는 기본적으로 목록을 들여쓰기 한다.

CSS에서 list-style-type: ; 을 이용해 숫자를 변경할 수 있다.

<dl></dl>

: <dl> 은 정의 목록(definition list)을 표시하는 데 사용한다. 일반적으로 일련의 용어와 용어의 정의로 구성된다. <dl> 요소 내에서 <dt> 와 <dd> 요소의 쌍을 볼 수 있다.
<dt></dt>

: <dt> 는 정의할 용어(definition term)를 표시하는 데 사용한다.
<dd></dd>

: <dd> 는 정의를 설명(definition description) 하는 데 사용한다.

<div></div>

: <div>는 레이아웃을 나눌 때 사용하는 태그로, 이 태그는 컨텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소를 묶어 스타일을 변경시킬 수 있다.

<article>, <section>, <header>, <nav> 는 기본적으로 <div> 와 같은 역할을 한다. 차이점이 있다면 태그에 의미를 부여한 것이다. 따라서 모두 <div> 로 대신 사용할 수 있으나 보다 적합한 요소를 찾은 후 대용할 태그가 없을 경우 사용한다.

<span></span>

: <span> 요소는 별다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도로 사용한다. 여러 요소를 묶어 컨트롤하기 위한 영역으로 id 를 주거나 class 를 사용하기도 한다.

<figure></figure>

: 웹페이지를 탐색하다 보면 가끔 캡션(자막, 설명)이 있는 이미지를 접할 때가 있다. 이러한 컨텐츠의 경우 이미지와 캡션이 연결되도록 <figure> 요소를 도입할 수 있다. 또한,<figure> 요소 안에 하나 이상의 이미지를 포함시켜 동일한 캡션을 공유할 수 있다.
<figcaption></figcaption>

: 이미지에 캡션을 추가하기 위해 도입되었다.

<p></p>

: 단락(paragraph)을 만들기 위해 <p> 태그로 앞뒤를 감싸준다. 하나의 완결된 문단을 의미하기 때문에 <p> 태그 안에 자식으로 <p>를 또 사용하지 않으며, 줄바꿈의 용도로 사용해서도 안 된다.

<blockquote></blockquote>

: <blockquote> 요소는 전체 단락을 차지하는 긴 인용에 사용하며, <blockquote> 안에 <p> 요소를 사용할 수 있다.
<q></q>

: <q> 요소는 단락 내에서 짧은 인용에 사용한다.

<main></main>

: <main> 요소는 문서의 주요 콘텐츠를 나타낸다. 주요 콘텐츠 영역이란 문서의 핵심 주제나 웹어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분을 뜻한다. <main> 요소 안에 들어가는 내용은 문서의 유일한 내용이어야 한다.
다른 페이지나 섹션에서 반복적으로 표시될 수 있는 정보, 예를 들어 사이트 로고, 검색 폼, 저작권 정보 등은 들어가지 않는다.

<hr>

: <hr> 요소는 원래는 가로줄(horizontal rule)을 표현하기 위해 사용했으나 HTML5에 오면서 의미가 생긴 요소이다. 이야기에서의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용한다. 단락을 구분할 때 사용하므로 <p> 요소 내 사용은 웹 표준에 어긋난다.