HTML5의 시맨틱 태그의 개념

HTML5의 시맨틱 태그에 대해서 다루어 볼려고 합니다. HTML5에는 시맨틱 태그라는 새로운 태그를 도입함으로써, 스타일 시트(CSS)로 표현이 가능하거나 문제가 되는 태그는 사용을 불가하도록 바뀌었습니다. 시맨틱 태그를 도입함으로써, 조금 더 편리하게 영역을 구분하며 기능들을 사용할 수 있습니다.

---

<HEADER>...</HEADER>

---

머리글 섹션 영역을 지정하는 태그로 사용됩니다. 페이지 상단부에 위치하여 문서의 정보를 정의합니다.

---

<NAV>...</NAV>

---

내비게이션 영역을 지정하는 태그로 사용됩니다. 보통 메뉴가 위치하여 이동을 돕습니다.

---

<ARTICLE>...</ARTICLE>

---

문서 내에서 기사, 게시글 등을 별도의 작은 섹션으로 지정하는 태그로, <SETCTION> 내에서 하나의 기사를 <ARTICLE> 태그로 감쌀 수 있습니다. <ARTICLE> 태그는 다른곳에 재사용이 가능합니다.

---

<ASIDE>...</ASIDE>

---

문서 페이지의 본문 콘텐츠를 제외한 별도의 영역을 지정하는 태그로, 페이지의 주요 내용 주변(사이드 바)에 위치하여 관련된 내용을 배치할 수 있는 영역입니다.

---

<FOOTER>...</FOOTER>

---

바닥글 섹션 영역을 지정하는 태그로, 화면 하단에 위치하는 사이트나 문서의 정보를 정의합니다.

---

<HEADER><NAV><ARTICLE><ASIDE><FOOTER>

---

위에서 다루었선 시맨틱 태그들을 조합해보면 아래의 사진과 같습니다. 일반적으로 다음과 같이 나누지만, 개인의 취향에 맞도록 사용이 가능합니다. 꼭 해당 영역에 집어넣어야 한다는 법은 없지만, 2차 3차 작업을 위하여 분리하는 습관과 주석을 작성하는 습관을 들여야합니다.

---

<AUDIO>...</AUDIO>

---

재생할 음악 파일을 정의하는 태그로, 배경 음악이나 효과음 등을 삽입할 때 사용하는 태그입니다. 이전에는 <OBJECT> 태그를 사용하였지만, HTML5에서는 조금 더 편리한 <AUDIO> 태그를 사용합니다.

오디오 태그 속성

src = 음악 파일의 경로 지정

controls = 음악 재생 도구를 출력할 지

autoplay = 자동 재생 할 것인지

loop = 반복재생 할 것인지

preload = 음악을 재생하기 전에 미리 로딩할 것인지

---

<VIDEO>...</VIDEO>

---

재생할 영상 파일을 정의할 때 사용하며, HTML5 이후 부터는 별 다른 플러그인 없이 영상 재생이 가능합니다.

비디오 태그 속성

src = 비디오 파일의 경로지정

width = 비디오의 너비 지정

height = 비디오의 높이 지정

muted = 음소거

controls = 재생 도구를 출력할지

autoplay = 자동 재생할지 지정

loop = 비디오를 반복할지

preload = 비디오를 재생하기 전에 미리 불러올지

---

<embed>

---

외부프로그램이나 플러그인을 삽입할 때 사용하는 태그입니다. 주로 음악이나 영상을 삽입하는데 사용됩니다. embed태그는 오래전부터 지원을 했지만, html4에서 빠졌다가 5에서 다시 추가되었습니다.

embed 태그 속성

src = 외부 파일의 주소

width = 외부 파일의 너비

height = 외부 파일의 높이

type = 삽입 내용의 파일 유형