시맨틱 태그란 개발자와 브라우저에게 의미를 제공하는 태그를 뜻한다.
태그 안에 어떤 내용이 들어갈 지 유추할 수 있게 해준다.
웹 사용자의 사용성을 높여주고 검색 엔진 최적화(SEO)에 도움을 준다.
div가 non-semantic 태그라면
article은 semantic 태그라고 볼 수 있다.
header
문서나 특정 섹션의 헤더를 정의할 때 사용한다.
소개 및 탐색에 도움을 주는 콘텐츠.
제목, 로고, 검색 폼, 작성자 이름 등
main
해당 문서의 <body> 요소의 주 콘텐츠를 정의할 때 사용한다.
해당 문서의 중심 주제, 또는 주요 기능과 직접적으로 관련되어 있는 콘텐츠로 구성되어야 한다.
문서 전반에서 반복되는 내용을 포함해서는 안 된다.
문서에는 단 하나의 main 요소만이 존재해야 한다.
article, aside, footer, header, nav 요소의 자손요소가 되어선 안 된다.
footer
문서나 특정 섹션의 푸터를 정의할 때 사용한다.
저자 정보, 저작권 정보, 연락처, 사이트맵, Top 버튼, 연관페이지 등.
하나의 HTML 문서에는 여러 개의 footer 요소가 포함될 수 있다.
nav
문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획.
메뉴, 목차, 색인 등으로 사용.
aside
문서의 주요 내용과 간접적으로 연관분 부분.
사이드바, 콜아웃 박스 등에 사용.
section
문서의 독립적인 구획. 일반적으로 h태그를 포함해야 한다.
일반 컨테이너로 사용하지 않는다. 단순한 스타일링 목적이라면 div 요소를 사용한다.
article
독립적으로 구분해 배포하거나 재사용할 수 있는 구획.
게시판, 블로그 글, 매거진, 뉴스 기사 등으로 사용한다.
하나의 문서가 여러 개의 article을 가질 수 있으며, 그 안에는 또 여러 개의 section이 존재할 수 있다.
이번 프로젝트에서는 같은 템플릿을 여러 페이지에 사용할 때 사용했다.
figure
독립적인 콘텐츠를 표현한다.
주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡는다.
figcaption 요소를 사용해 설명을 붙일 수 있다.
address
가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다.
hgroup
문서 구획의 다단계 제목을 나타낸다.
여러 개의 h1-h6 요소를 묶을 때 사용한다.
abbr
줄임말 또는 머리글자를 나타낸다.
title 속성을 사용하면 줄임말의 전체 뜻이나 설명을 제공할 수 있다.
마우스 커서를 올렸을 때 나타나는 툴팁으로 보여준다.
ex) <abbr title="question">Q</abbr>
dl, dt, dd
dl은 description-list의 약자로 설명 목록을 나타낸다.
하위 요소로 dt와 dd를 키-값으로 사용하는데 dt는 description-term, dd는 description-description의 약자이다.
dt는 정의 내리는 단어의 이름, 즉 상위 또는 추상적 개념이고,
dd는 단어의 설명, 즉 하위 또는 구체적 내용이다.
table, thead, tbody, tr, th, td
행과 열의 표 구조를 나타낼 때 사용한다.
table은 thead와 tbody로 나뉘어지고 thead와 tbody 안에서 tr(table-row)로 행을 구분한다.
tr 하위요소는 th와 td로 나눌 수 있는데, th는 표의 제목에 사용하고 td는 내용에 사용한다.
caption을 사용하여 표의 설명을 추가할 수 있다.
또한 scope 속성을 사용하여 표 읽는 순서를 제공할 수 있다.
form, fieldset
form은 입력한 정보를 서버로 전송하기 위해 사용하는 태그이다.
속성에는 name, action, method, target 등이 있다.
action은 폼을 전송할 서버 쪽 스크립트 파일을 지정하는 것이며
name은 폼을 식별하기 위한 이름을 지정하는 것이다.
input
양식을 입력하기 위한 태그이다.
type을 통해 종류를 나타나며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정한다.
type의 종류에는 text, password, button, submit, reset, radio, checkbox, file 등이 있다.
그 외 readonly, maxlength, required, autofocus, placeholder, pattern 등이 있다.
canvas
캔버스 스크립팅 API 또는 WebGLAPI와 함께 사용해 그래픽과 애니메이션을 그릴 수 있다.
height는 좌표 공간의 높이로 기본값은 150이고, width는 좌표 공간의 너비이며 기본값은 300이다.
JavaScript에서 HTMLCanvasElement.getContext()를 호출해 요소를 선택할 수 있다.
