웹 페이지 구조 설계에 관련된 태그 (시맨틱 태그)

 

 

 

---

 

웹 페이지는 어떻게 구조를 설계할 수 있을까?

 

 

---

 

 

 

 

시맨틱 태그 (Semantic Tag)

 

--

시맨틱(Semantic)은 사전적으로 "의미론적"이라는 뜻으로

시맨틱 웹은 더 의미 있게 웹페이지를 설계하는 트렌드라고 볼 수 있다.

 

이러한 트렌드에 맞춰 시맨틱 태그를 사용한다.

 

시맨틱 태그는

HTML5에서 도입된 태그들로, 콘텐츠의 의미와 역할을 명확하게 설명하는 태그로

태그의 이름만으로 "태그"와 "용도", "역할"에 대한 의미가 명확한 태그를 의미하고

사람뿐만 아니라 검색 엔진과 스크린 리더도 콘텐츠 구조를 쉽게 이해할 수 있어

가독성과 접근성이 향상되고, 검색 엔진 최적화에도 유리하다.

 

HTML5 이전에는

대표적으로 "table 태그", "form 태그", "a 태그" 등을 시맨틱 태그에 속했고

"div 태그", "span 태그" 등을 논 시맨틱 태그에 속한다.

 

하지만 "table 태그", "form 태그", "a 태그"는 문서의 구성 요소로는 적합할지 몰라도

전체 구조를 설계할 만한 태그는 아니기에

HTML5부터는 시맨틱 태그가 새롭게 추가되었다.

 

주요 시맨틱 태그와 사용 예시

 

 

시맨틱 태그 사용 예시 (네이버 예시)

--

 

 

 

 

header 태그

 

--

header 태그는

웹 페이지에서 헤더 영역을 구분하는 데 사용된다.

 

기본 형식

<header>
   헤더 구성 요소
</header>

 

--

 

 

 

 

nav 태그

 

--

nav 태그는

웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용된다.

 

기본 형식

<nav>
  네이게이션 구성 요소
</nav>

 

 

일반적으로 링크 영역에는 예시처럼 헤더 영역에서의 메뉴나 목차와 같은 요소가 많은데,
내부나 외부를 연결하는 링크가 전부 "nav 태그"일 필요는 없다.
웹 사이트에서 중요 탐색 링크 영역만 포함하면 된다.

--

 

 

 

 

section 태그

 

--

section 태그는

웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용된다.

(일반적으로 내용의 제목을 나타내는 "hn 태그" 중 하나를 포함한다.)

 

기본 형식

<section>
  내용 영역 구분할 구성 요소
</section>

 

--

 

 

 

 

article 태그

 

--

article 태그는

웹 페이지에서 독립적인 영역을 구분할 때 사용된다.

 

기본 형식

<article>
  독립적인 영역 구성 요소
</article>

 

 

네이버처럼 로그인 영역이 "article 태그"로 구분하기 좋은 영역으로
로그인 영역은 메인 페이지에서 주로 사용하지만, 전혀 다른 페이지인 블로그나
다른 페이지 등에서도 사용되기 때문이다.

--

 

 

 

 

aside 태그

 

--

aside 태그는

웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워서

"article 태그"나 "section 태그"로 영역을 구분할 수 없을 때 사용된다.

 

기본 형식

<aside>
  구성 요소
</aside>

 

--

 

 

 

 

footer 태그

 

--

footer 태그는

웹 페이지에서 푸터 영역을 구분할 때 사용되며

일반적으로 웹 페이지의 최하단에 존재하고, 저작권 정보, 연락처, 사이트 맵 등의 요소를 포함한다.

 

기본 형식

<footer>
  푸터 구성 요소
</footer>

 

--

 

 

 

 

main 태그

 

--

main 태그는

웹 페이지의 주요 내용을 지정할 때 사용된다.

 

해당 태그에는 문서에서 반복해서 등장하는 요소를 포함해서는 안되며,

"article 태그", "aside 태그", "footer 태그", "header 태그", "nav 태그"의 하위에 포함될 수도 없다.

(그래서 사용하기 조금 까다로움)

--