HTML5와 시맨틱 태그 1

HTML5와 시맨틱 태그 1

1. 시맨택 태그의 등장 배경

• HTML4에서는 HTML 태그가 문서 내용들을 화면에 보여주는 역할만 했기 때문에 화면을 구성하는 역할은 대부분 <div> 태그가 맡았고 수많은 <div> 태그들은 다시 id 속성으로 구분했습니다. 이때 <div> 태그의 이름은 디자이너나 개발자 개인의 생각에 따라 지정되었는데 이런 방법은 제작자 자신이 나중에 보더라도 이해하기 어려웠을 뿐만 아니라 담당자가 바뀌면 문서구조를 이해하는 데 많은 시간이 걸리곤 했습니다.
• 또한 시각장애인용 화면 낭독기나 검색 엔진에서 웹소소를 읽을 때도 어느 부분이 메뉴이고 본문인지 구별할 수 없었습니다.
• 그리고 실제로 웹 사이트를 만들 때는 소스가 수천 줄이 넘기 때문에 일일이 살펴보면서 헤더, 메뉴, 사이드바 등을 찾는 것이 쉽지 않습니다.
• 헤더나 하이트 내용, 메뉴 등 반드시 필요한 요소에 맞는 태그를 미리 약속하여 사용하면 훨씬 이해하기 위운 소스가 될 수 있기에 HTML5 표준안에서 문서 구조를 만드는 시맨틱 태그가 등장하게 되었습니다.

2. 시맨틱 태그가 사용된 HTML5 문서

• 인터넷의 여러 웹 문서들을 분석한 결과를 토대로 HTML5에는 웹 문서 레이아웃을 표준화하는 태그들이 새로 추가되었습니다. 이 태그들이 바로 이름만 보고도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있는 '시맨틱 태그(semantic tag)' 입니다.
• '시맨틱'이란 '의미론적인, 의미가 통하는' 이라는 뜻으로 시맨틱 태그를 보면 그 부분이 어떤 역할을 하는지 쉽게 알 수 있습니다.

3. 문서 구조를 위한 HTML5 시맨틱 태그

1) <header> 태그 - 머리말 지정하기

• <header> 태그는 특정 부분의 머리말(header)에 해당합니다.
• 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 주로 <form> 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣습니다.
• <header> 태그는 본문 중에 사용해 해당 부분의 머리말로 사용할 수도 있습니다.

 

 

2) <nav> 태그 - 문서를 연결하는 내비게이션 링크

• 네이게이션 역할을 하는 <nav> 태그는 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타냅니다.
• <nav> 태그는 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다.
• 사용하는 위치의 영향을 받지 않아 <header>니 <footer> 태그 또는 <aside> 태그 안에 포함시킬 수도 있고 독립해 사용할 수도 있습니다.
• 문서 안에 여러개의 <nav> 태그를 사용할 경우, ID를 따로 지정해 주면 스타일 시트에서 각 내비게이션에 맞게 스타일을 지정할 수 있습니다.

 

3) <section> 태그 - 주제별 콘텐츠 영역 나타내기

• <section> 태그는 문서에서 콘텐츠 영역을 나타냅니다.
• <section> 태그는 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 베목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용됩니다.
• <section> 태그 안에 또 다른 <section> 태그를 넣을 수도 있습니다.

 

 

4) <article> 태그 - 콘텐츠 내용 넣기

• <section> 태그와 비슷해 혼동하기 쉬운 <article> 태그는 article의 사전적 의미가 신문이나 잡지의 '기사'를 뜻하는 것처럼 웹 상의 실제 내용을 넣습니다.
• 보통 블로그의 포스트나 웹 사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 해당됩니다.
• 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 쓰면 됩니다.
• <section>태그와 <article> 태그를 혼동하기도 하는데 <section> 태그는 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 <article> 태그 안에 <section> 태그를 넣을 수도 있습니다.

 

 

5) <aside> 태그 - 본문 이외의 내용 표시하기

• 블로그에서 왼쪽이나 오른쪽 또는 하단에 사이드바를 만드는 태그가 <aside> 입니다.
• 사이드바는 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용합니다.
• <aside> 태그는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타냅니다.

 

 

6) <footer> 태그 - 제작 정보와 저작권 정보 표시하기

• 일반적으로 웹 문서 끝자락에 들어가는 <footer> 태그안에는 사이트 제작자의 연락처 정보와 저작권 정보를 표시합니다.
• <footer> 태그 안에는 <header> 태그를 비롯해 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있고 이런 태그를 이용해 푸터 안에 다양한 정보를 넣을 수 있습니다.

 

 

 

참고 : HTML5 + CSS3 웹 표준의 정석