시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것이다.

예전에는 거의 div만을 사용하여 화면을 구성했는데
컴퓨터가 더 잘 읽을 수 있도록 전체 웹 사이트를 구조적으로 분리해서
각각을 의미가 있는 요소들로 묶어보기 위해 시맨틱 마크업이라는 개념이 나왔다.

예시

nav

aside나 header에 들어가는 메뉴이다.

클릭하면 페이지가 넘어가는 메뉴들을 한데 묶어서 내비게이션이라 하는데 이걸 nav 태그로 묶어준다.

section

header와 footer를 뺀 나머지 박스들을 보통 section이라고 부른다.

section은 영어로 어떤 부분, 구역을 의미한다.
즉, html 문서 안에서 공통된 내용을 묶어주는 역할이다.

main

header, footer, aside를 제외하고 여러 개의 section 등 나머지 전체를 묶어주는 역할을 한다.

article

독립적인 콘텐츠를 지정할 때 쓰인다.

요소를 따로 떼내더라도 그 자체로 의미가 있다.

예를 들어 위처럼 section(노란색 박스) 안에 뉴스 기사가 여러 개 있을 때 각각의 기사를 article로 묶어줄 수 있다.

// 코드 예씨
<section>
 <h2>News</h2>
  
 <article>
   <img>
   <span class="date"></span>
   <h3>뉴스제목</h3>
 </article>
   
 <article>
   <img>
   <span class="date"></span>
   <h3>뉴스제목</h3>
 </article>
   
 <article>
   <img>
   <span class="date"></span>
   <h3>뉴스제목</h3>
 </article>
 ...
   
 <a href="#">more</a>
</section>

aside

문서의 사이드에 많이 배치한다.

왼쪽 또는 오른쪽에 보이는 메뉴바를 aside로 지정할 수 있다.
예: 네이버 웹툰에 스크롤 따라다니는 리모컨 등

사이트의 구성에 따라 aside 요소는 없을 수도 있다. (생략 가능)

figure

img(예: 일러스트레이션, 다이어그램, 사진 등)를 감싸는 요소이다.

figure가 감싸는 요소들은 전체 메인 요소들과 관련 있어야 한다.

figcaption

figure 요소의 캡션을 정의할 때 사용하는 태그이다.

figure 요소 안에 첫 번째나 마지막 자식 요소로 넣어서 사용한다.

figcaption 요소는 생략이 가능하다.

블록/인라인 태그 종류

블록 태그 종류

display: block의 특징을 가진다.

article, aside, blockquote, canvas, 
dd, dl, figure, fieldset, figcaption,
header, footer, form, h1, h2, h3, h4, h5, h6,
hr, ol, ul, p, pre, section, table, audio, video

인라인 태그 종류

display: inline의 특징을 가진다.

a, b, br, button, code, em, i, img,
input, label, small, select,
span, strong, textarea