시맨틱 요소 | div태그 대신 시맨틱 태그 사용 이유? | 시맨틱 태그 종류들

 

<div> 태그는 영역을 구분할 때 쓰는 태그 즉, 레이아웃을 관리할 때 사용하는 태그이다.

 

그런데, <div> 태그를 쓰는 것보다 시맨틱 태그를 쓰는 것이 오늘날에 더 권장되는 코드 작성 방식이다.

 

 

<div>는 아무 의미가 없다. 단지 영"역을 구분한다"의 기능만 하는 것이다. 화면을 구성하는 모든 레이아웃을 div 태그를 이용해 작성했다고 해보자.

"화면에서 사이드바를 구현한 코드를 보고 싶어!" 라고 한다면, 많은 div 태그들을 뒤져서 찾아야할것이다. 가독성이 매우 떨어질 것이다.

 

하지만 시맨틱 태그로 구성한 문서에서는 <aside> 태그를 찾으면 되는 것이다.

 

시맨틱 태그를 사용한다면 마크업을 강조하거나 의미를 부여하여 개발자들이 우리 코드를 보기만 해도 무슨 일이 일어나는지 바로 알 수 있고, 스크린 리더 사용자와 SEO 접근성 향상, 웹크롤러들이 코드를 보기 훨씬 쉬워질 것이다.

 

그러면, 각 시맨틱 태그의 종류를 알아보고 각각의 태그들이 주로 어떨때 사용하는지 알아보자. 

 

<section>	웹사이트나 애플리케이션의 독립적인 부분을 나타낼 뿐 딱히 다른 기능은 없지만 그래도 div보단 훨씬 나음. 제네릭 컨테이너로 어디에나 쓸 수 있음. 웹사이트의 독립적인 부분이어야함. 페이지에 여러 하위 제목 컨텐츠들의 목록을 형성할 때 사용함
<article>	문서 내의 독립적인 구성. 한 페이지에 여러개의 article이 있을 수도 있음.
<nav>	페이지에서 내비게이션 링크를 제공하는 것들을 나타냄. 다른 사이트로 이동하는링크가 아니라 페이지 내에서 다른 곳으로 이동하는 탐색링크 제공. 또는 전혀 다른 출처로 이동하는 링크.
<main>	문서의 주요 내용(페이지의 주요 내용).페이지 전반에서(여러 페이지에서) 계속 반복되는 내용은 전부 제외하는 게 원칙.( 사이드바, nav링크 저작권 정보, 로고 검색 형식 등)
<header>	소개에 대한 내용. 로고, 제목 등 머릿글이 여기에 들어간다.
<time>	이건 인라인 요소임. 시간이나 날짜를 의미하는 내용의 양 옆에 입력함. dateTme 속성을 명시해야함. datetime 또한 시맨틱 요소
<figure>	보통 독립적인 내용을 나타내는데 캡션이 달린 경우도 있음. (figcaption) 보통 일러스트나 다이어그램 등 사람들의 시선을 끌고 캡션이 함께 달린 걸 의미.
<footer>	꼬리말. 주로 연락처, 주소, 저작권 등이 들어간다.
<aside>	옆에 작은 보너스 메모같은 느낌. 주로 페이지의 사이드바로서 사용한다.
<details>	사용자가 열고 닫을 수 있는 세부정보를 정의하는 태그.

 

그 외에도 <abbr>, <data>, <summary>..,,.. 등 많은 시맨틱 태그들이 있다.

물론 개발자에 따라 조금씩 다른 의미로 쓰기도 하고, 같은 페이지를 구성하더라도 어떤 개발자는 <section>태그를 쓰는데, 어떤 개발자는 <article>태그를 쓰는 등 각자의 방식 또한 존재하긴 한다.

 

대개 이런 특징을 가지고 있다. 라는 것을 알고 개발을 하면 좋을 듯하다. 그렇게 하다보면 나만의 기준이 생기기도 하니까.