의미론적 HTML 태그

구조

header : 위쪽에 위치하는 섹션으로 제목, 로고, 검색, 이름 등이 온다.

main : 핵심 기능이나 내용이 오는 섹션 (페이지에 하나만)

aside : 메인과 직접적으로 관련이 없는 사이드바 등 (광고)

footer : 아래쪽에 위치하는 섹션으로 저작권, 관련 문서 등이 온다.

section : 그밖에 딱히 의미가 없는 섹션

 

nav : 다른 페이지로 넘어가는 링크가 있는 섹션으로 메뉴, 목차, 색인 등이 온다.

article : 사용자의 입력 등으로 내용이 바뀌는 섹션 (독립적 콘테이너)

address : 연락처 정보가 있는 섹션

글자

<em></em>

<strong></strong>

 

검색 엔진을 위해 강조하고 싶은 내용의 글자를 넣는다.

<em>은 이탤릭채가 되고 <strong>은 볼드채가 되니 CSS에서 적당히 바꿀 필요가 있다.

같은 CSS 효과가 있는 <i>와 <b>는 검색 엔진에 의미를 주지 못하니 사용하지 않는다.

 

<h1></h1> ~ <h6></h6>

 

<h1>은 페이지의 주제를 나타내므로 한 페이지에 하나만 있어야 한다.

여기서 섹션이 나눠지면 <h2>를 쓰고 여기서 다시 서브 섹션으로 나눠야 한다면 <h3>를 쓰는 식으로 구성해야 검색 엔진이 의미를 파악하기 쉽다.

 

<time></time>

 

시간을 표시한다.

 

<mark></mark>

 

글자에 노란 형광색을 긋는다.

 

그밖에 자주 쓰는 Semantic Elements...

 

figure

figcaption

 

참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Element