시멘틱 태그( Sematic Tag )를 잘 사용하는 방법?

시멘틱 태그 잘 사용하고 계신가요?

어떤 방식으로 시멘틱 태그를 사용하고 계신가요?

혹시 div 지옥처럼 section, article 지옥이 만들어지지는 않았나요?

 

HTML 구조를 더 아름답고 보기 좋게 만들 순 없을까?

 

우리가 웹개발을 시작할때 가장 먼저 만들게 되는것은 무엇일까요?

 

바로 HTML 파일 일것이라고 생각합니다.

( React, Vue 등 프레임워크를 사용한다고 해도 HTML 코드를 작성하게 될것입니다. )

 

새로운 프로젝트에게 건네는 첫인사처럼,

새로운 마음으로 인사를 하는곳이 바로 HTML이라는 뜻입니다.

 

어떤 일이든 첫 단추가 잘 채워져야 마지막 단추도 잘 채울수 있듯이

HTML이 아름답게 작성 되어야 CSS, JavaScript 또한 아름답고 보기 좋게 작성 할 수 있는것 같습니다.

 

그렇다면 과연 어떻게 HTML 을 효율적으로 작성할 수 있을까요?

 

---

Semantic Tag

시멘틱 태그 ( Semantic Tag )에 대해 알고 계신가요?

 

시멘틱 태그는 일반적으로 div 태그 같은 기능을 수행하지만 의미론적인 태그를 말합니다.

 

시멘틱 태그는 웹 브라우저의 크롤링 봇이 읽기 쉬운 코드이기도 합니다.

그래서 SEO에 추가 점수를 얻는 부분이기도 합니다.

 

검색엔진 최적화! 이부분만 본다고 해도 벌써부터

시멘틱 태그를 당장 사용해야할 것 같은 기분이 듭니다.

 

1. 시멘틱 태그의 종류

 

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

 

2. 시멘틱 태그의 구성

 

 

위 사진처럼 시멘틱 태그를 사용하면,

해당 태그가 어떤 역할을 하는 태그인지 한눈에 알아보기 쉽습니다.

 

<header></header>
<!-- 위 태그는 누가봐도 헤더입니다. -->

<nav></nav>
<!-- 위 태그는 누가봐도 네비게이션 입니다. -->

<footer></footer>
<!-- 위 태그는 누가봐도 푸터입니다. -->

 

꼭 사진처럼 왼쪽에 네비를 둘 필요는 없고 aside를 사용하지 않을 수도 있습니다.

 

태그의 전체적인 레이아웃을 잡을때 시멘틱 태그를 사용하면 좋습니다.

 

하지만 무분별한 시멘틱 태그의 사용은 구조를 복잡하게 만들것이고,

시멘틱 태그의 본질을 잃어버리게 만들것 입니다.

 

3. 어떻게 사용해야 할까?

 

의도에 맞지 않게 무분별하게 사용하게 된다면 오히려 혼란만 가중이 될것 같다고 생각이 듭니다.

애초에 Sematic Tag 이란 의미론적인 태그입니다.

각자의 역할이 존재합니다.

 

<header> : 소개 콘텐츠 또는 탐색 링크가 들어가는 컨테이너

<article>  : 독립적 / 자체 콘텐츠가 포함된 컨텐츠

<section> : 제목이 있는 주제별 콘텐츠 그룹

<footer> : 페이지의 바닥글을 정의

 

위처럼 알맞는 상황에 사용하는것이 가장 좋습니다.

 

태그의 역할을 잘 알고 위치에 맞게 사용하는 것이

효율적인 HTML을 만들어낸다고 할 수 있겠군요.

 

---

그래서 시멘틱 코드만 사용하면 되나요?

 

결과적으로 이야기하면 아닙니다.

 

"시멘틱 태그만 사용해라!" 라는 말을 하기 위해 시멘틱 태그가 탄생된건 아니라고 생각합니다.

 

예를 들어, Navigation을 만들때 어떤식으로 만들어야 할지

구조를 한번 떠올려주시고 아래를 봐주세요

 

<nav>
  <div class="logo">
    <img src="logo.png" />
  </div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

 

여러분은 어떤 구조의 Navigation을 생각하셨나요?

 

제가 예시로 작성한 Navigation 구조와는 많이 다를수 있습니다.

 

1. 중요한것은 과도하게 <div> 를 사용했는지?

2. 적재적소에 알맞게 태그를 사용했는지? 

3. 의도에 맞지 않는 태그를 사용했는지?

4. 태그의 깊이가 너무 과도하게 들어갔는지?

 

보통 위 요소들만 잘 체크한다면 아름답고 효율적인 HTML 일것이라고 생각됩니다.

 

HTML 을 대충 <div> 만 감싸서 사용하는것이 아니라

어떤 태그를 사용하는게 맞는지 생각해본뒤,

 

그래서 결국 효율적인 HTML을 사용하는 방법이란

알맞은 태그를 적재적소에 맞게 사용해서 HTML 을 작성하는것이라고 생각됩니다.

 

 

 

이 글은 저의 개인적인 생각이 많이 담겨있습니다!

 

 

이미지 출처 : https://www.w3schools.com/html/html5_semantic_elements.asp