HTML Grouping Content

HTML 콘텐츠를 그룹화하면 선택자로 요소를 지정하기가 더 쉽다. 이는 CSS를 통해 HTML을 배치하고 스타일을 지정하는 것을 더 쉽게 만들어 준다.

• body
  실제 사용자에게 보여지는 문서의 컨텐츠를 나타내는 요소.

• header
  컨텐츠의 시작 부분을 나타내는 요소. 구역의 제목. 헤딩 엘리먼트를 포함하거나 헤딩 없이 목차, 검색폼 같은 내용을 감싸기도 한다.

• main
  주요 콘텐츠를 나타내는 요소. 반복적으로 표시될 수 있는 정보 등은 들어가지 않는다. 문서의 핵심 주제나 기능에 직접적으로 연결되어 있는 부분.
  

• footer
  요소가 속한 가장 가까운 구획의 작성자 정보, 저작권, 관련된 링크 등의 내용을 담는 요소. 반드시 끝에 위치할 필요는 없다.

• section
  하나의 주제로 그룹화된 컨텐츠를 담는 태그.

• article
  기사, 문서, 게시글, 댓글, 위젯 등 독립적으로 사용 가능한 내용을 담는 요소.
  

section vs article

• article 요소는 독립적 콘텐츠(다른 서비스에 가져다 놔도 이상하지 않음)
• section 요소는 사이트 내 연관 콘텐츠(다른 서비스에 가져다 놓으면 이상함)
• article과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)

• div(division)
  레이아웃을 나눌 때 주로 쓰이는 요소. 의미는 없으며 디자인 배치 용도로 쓰인다. width가 화면 전체를 꽉 채우는 block element.

• span
  div태그와 비슷하게 레이아웃을 설정하는 용도로 쓰이는 요소. 자신의 컨텐츠 만큼만 크기를 차지하는 inline element.

div vs span

• div태그는 줄바꿈이 필연적이며 span태그는 줄바꿈이 없고 요소 사이에 들어갈 수 있다.
• div태그는 폭과 넓이를 지정 가능하고 span태그는 불가능하다.
• 일반적으로 div태그는 요소를 묶을 때, span태그는 텍스트를 묶을 때 사용한다.
• div와 span 둘 다 최후의 수단으로 사용.

• nav
  링크의 묶음. 일반적으로 메인 네비게이션 역할의 링크 묶음에 사용됨.

• aside
  페이지의 주요 내용의 흐름과 관련 없는 다른 내용. 주로 주로 사이드바 형태의 디자인으로 표현됨 (각주에는 사용되지 않음)
  

• p
  paragraph 단락을 표시하는 태그. 하나의 문단으로 출력된다. p의 자식으로 둘 수 없으며 줄바꿈 용도로 사용할 수 없음

• h1~6
  heading 태그. 제목을 지정하기 위해 사용하는 요소. 1~6까지 중요도에 따라 사용되며 디자인 요소로만 사용되지 않음. h1태그는 페이지당 한번만 사용할 것을 권장한다.

• ol/ul/li
  <ol>태그 ordered list의 약자, 순서가 있는 목록
  <ul>태그 unordered list의 약자, 순서가 없는 목록
  <li>태그 list item의 약자, 항목을 나열하는 태그

• dl/dt/dd
  <dl>태그 definition의 약자, 정의 목록
  <dt>태그 definition term의 약자, 정의할 용어
  <dd>태그 definition description의 약자, 용어를 설명

• figure/figcaption
  

• pre

• adress

• blockquote

• hr