HTML 시맨틱 태그 문서 구조 알아보기 HTML5

HTML5에서는 문서 구조를 정의할 수 있는 새로운 요소들이 도입되었습니다. 바로 시맨틱 태그입니다. 시맨틱 태그를 보고 쉽게 페이지 구조를 이해 할 수 있습니다. 인터넷상의 문서들을 살펴보면 구조는 크게 다르지 않습니다. 사이트의 제목과 검색 창 등이 있는 헤더 부분, 여러 내용을 가지고 있는 콘텐츠 부분, 본문 외의 내용을 나타내는 사이드 바, 그리고 제작자 정보와 주소 등을 표시하는 푸터 부분으로 크게 나뉘어져 있습니다.

위와 같이 대부분의 사이트의 문서구조는 비슷합니다.

대표적인 시맨틱 태그의 종류는 다음과 같습니다.

<header> 특정 부분의 머리말 태그

<nav> 문서나 사이트를 연결하는 내비게이션 태그

<hn> 크기별로 텍스트 제목을 나타내는 태그

<article> 실제 콘텐츠 영역을 나타내는 태그

<aside> 본문 이외의 사이드 바 영역 태그

<footer> 제작자 정보, 주소등이 포함된 태그

시맨틱 태그를 활용한 소스 코드는 위와 같습니다. HTML5의 시맨틱 요소로 작성한 소스를 보면 검색할 때 필요한 내용을 정확하게 찾을 수 있습니다. 본문 내용을 검색해야 한다면, <section>이나 <article> 태그 부분만 찾아서 검색하면 됩니다. 또한 어떤 장애를 가지고 있는 사용자는 웹사이트를 이용할때 화면 판독기 같은 웹 보조 기구를 이용합니다. 화면 판독기가 시맨틱 태그를 구별할 수 있기 때문에 옳바른 사이트 내용을 전달할 수 있습니다. 이것으로 HTML 시맨틱 태그 문서 구조 알아보기 HTML5을 마치겠습니다. 긴 글 읽어주셔서 감사합니다.