[HTML] 웹 문서 주요 구조를 만드는 주요 시맨틱 태그

Seojoo21 2022. 2. 20. 21:02

*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱

3-4. 웹 문서 구조를 만드는 시맨틱 태그

1) 시맨틱 태그가 필요한 이유

- 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 본문 내용인지 쉽게 알 수 있다.

- 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다.

- 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.

2) 웹 문서 구조를 만드는 주요 시맨틱 태그

2-1) 헤더 영역을 나타내는 <header> 태그

- <header>태그는 말 그대로 헤더 영역을 의미한다. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있다.

- 사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입한다.

* 웹 문서의 정보를 담는 <head> 태그와 헷갈리지 않도록 주의할 것.

2-2) 내비게이션 영역을 나타내는 <nav> 태그

- <nav> 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.

- <nav> 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다.

- 웹 문서에서 <nav> 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있다.

2-3) 핵심 콘텐츠를 담는 <main> 태그

- <main> 태그는 웹 문서에서 핵심이 되는 내용을 넣는다.

- 웹 문서마다 다르게 보여주는 내용으로 구성한다.

- <main> 태그는 웹 문서에서 한 번만 사용할 수 있다.

2-4) 독립적인 콘텐츠를 담는 <article> 태그

- <article> 태그는 웹에서 실제로 보여 주고 싶은 내용을 넣는다. 예를들어 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 말한다.

- 문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있다.

2-4) 콘텐츠 영역을 나타내는 <section> 태그

- <section> 태그는 웹 문서에서 콘텐츠 영역을 나타낸다.

- <article> 태그와 비슷해 보이기도 하지만 <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 쓴다.

2-5) 사이드 바 영역을 나타내는 <aside> 태그

- <aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.

- 보통 웹 사이트에서 사이드 바는 필수 요소가 아니므로 필요한 경우에만 사용한다.

2-6) 푸터 영역을 나타내는 <footer> 태그

- <footer> 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다.

- 푸터 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 시맨틱 태그를 모두 사용할 수 있어 푸터 안에 다양한 정보를 넣는다.

2-7) 여러 소스를 묶는 <div> 태그

- HTML의 <header>, <section> 같은 시맨틱 태그가 나오기 전에는 헤더나 내비게이션, 푸터 등을 구분할 때 <div> 태그를 사용했다.

- 아직도 문서 구조를 만들 때 <div> 태그를 사용하는 경우가 많다.

-<div> 태그는 <div id="header"> 나 <div class="detail">처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다. 즉, 영역을 구별하거나 스타일로 문서를 꾸미는 것이다.