HTML5 프로그래밍 -시맨틱 태그-

2017/09/03 - [웹 프로그래밍/HTML5] - html5 간단한 글자 태그들

2017/09/05 - [웹 프로그래밍/HTML5] - HTML 5 프로그래밍 META 태그 심화

여러가지 웹 사이트들을 보면 각각 다르지만

웹사이트가 여러 부위로 나누어져 있습니다.

그리고 이것들을 이루는 것이 시맨틱 태그들입니다.

모두가 아시는 사이트로 예를 들어 봅시다 위와 같이 사이트는 여러 부위로 나뉘어 있는데

이것을 한꺼번에 묶어서 처리를 쉽게 해 주게 만들어주는 것이 바로 시맨틱 태그들입니다.

저렇게 큰 부분을 시맨틱 태그로 묶어서 나중에 CSS로 디자인을 할 수 있고

나중에 코드를 고치거나 볼 때 더 쉽게 알아볼 수 있게 해주어서

나중에 작업을 할 때 보다 편리하게 작업을 할 수 있습니다.

그렇다면 시맨틱 태그를 어떻게 사용하는지에 대해서 알아봅시다.

<header> - 사이트 제목 태그 [기본형] <header>내용</header>

저 위의 N 사이트의 검색창 부분입니다

<nav> - 웹 사이트를 연결하는 네비게이션 태그 [기본형] <nav>내용</nav>

위의 메일~더보기 입니다.

<section> - 콘텐츠 영역  [기본형] <section>내용</section>

위의 오른쪽 아래 부분입니다.

<article> - 실제 콘텐츠 영역 [기본형] <article>내용</article>

보통 section과 같거나 비슷합니다.

<aside> - 본문 이외 내용 [기본형] <aside>내용</aside>

위 사진에서 왼쪽에 위치해 있습니다.

<footer> - 저작권과 제작 정보 표시 [기본형] <footer>내용</footer>

보통 맨 아래 있습니다.

div - 콘텐츠를 묶을 때 [기본형] <div id="id 이름">묶을 내용</div>

그렇다면 시맨틱 태그로 웹사이트를 만들어야 할까요?

그 이유는 시맨틱 태그를 사용하지 않고 div 로 묶어도 똑같지만

웹브라우저가 웹사이트를 인식할 때는 아주 큰 차이가 있습니다.

시맨틱 태그로 코드를 작성하면 태그만 보고 어느 부분이 어떤 역할을 하는지 쉽게 알 수 있습니다.

이렇게 소스만으로 웹사이트의 내용을 알 수 있다면, 사이트를 검색할 때

필요한 내용을 정확하게 찾을 수 있어 편리합니다.

웹사이트의 제목 부분을 찾는다면 div로 처리하면 검색하기 어렵지만

시맨틱 태그로 하면 다른 태그들은 제외하고 <header>를 검색하기만 하면 되기 때문이죠

또한 시각 장애가 있는 사람들에게 웹 사이트의 내용을 들려줄 때 웹사이트를 분석해서 들려주는데

이때 시맨틱 태그들을 통해 어느 부분은 제목이고 어느 부분은 본문인지 알 수 있으므로

시각에 장애가 있는 사람에게 정확한 내용을 전달할 수 있고,

역할이 정해져 있는 태그이기 때문에 누가 해석하든 똑같이 해석할 수 있습니다.

이런 내용들을 활용해서 더 나은 웹 사이트를 만드시길 바라며 다음 시간에는

텍스트에 관한 태그들에 더 알아보도록 하겠습니다.