[HTML] 시맨틱 마크업 태그 정리

우선 시맨틱(semantic)의 사전적 의미는 '의미의, 의미론적인' 이다. 즉, 시맨틱 마크업은 의미있게 페이지를 짠다는 말이다. 의미있게 페이지를 짜는 것이 무엇일까?

 

단순히 div를 가지고 박스 배치를 하는 것이 아닌 div의 용도에 따라 의미가 있는 태그로 가독성도 높이고 또한 SEO(검색 엔진 최적화)에 유리하게 코딩할 수있다. 

 

*SEO는 쉽게 말하면 네이버나 구글에 키워드를 검색했을 때 얼마나 독자들에게 쉽게 노출되는 지를 의미한다.

 

- 레이아웃 구조

홈페이지의 구성을 살펴보면 보통 다 비슷하기 때문에 예시를 보면 바로 이해할 수 있을 것이다.

 

ex)

<div class = "header"></div>

<div class = "main"></div>

<div class = "footer></div>

 

위와 같이 작성한 것이 의미없는 박스 배치다.

 

ex)

<header></header>

<main></main>

<footer></footer>

 

위와 같이 div로 작성하는 것이 아닌 한 눈에 보기 쉽게 헤더,메인,푸터를 저렇게 태그로 작성하는 것이다.

 

- 세부적인 요소

 

* GNB

주로 GNB, 즉 네비바에 사용되는 <nav>태그와 <ul>태그이다.

 

ex)

<nav id = "gnb">

    <ul>

        <li>메뉴1</li>

        <li>메뉴2</li>

        <li>메뉴3</li>

    </ul>

</nav>

 

위와 같이 nav태그 안에 ul, li태그를 넣어 시멘틱 마크업을 해준다.

 

* MAIN

홈페이지의 주된 내용을 담는 main에서 각 주제에 따라 섹션을 나눌 때 <section>태그를 사용하면 된다.

 

ex)

<main>

    <section class = "section1"></section>

    <section class = "section2"></section>

    <section class = "section3"></section>

</main>

 

위와 같이 <section>태그 안에 섹션마다 필요한 내용들을 나눠서 작성하면 된다.

 

* 제목

제목의 중요도에 따라 <h1>태그에서 <h6>태그까지 사용할 수 있다.

각 숫자마다 font-weight와 font-size가 정해져 있으며 h뒤의 숫자가 작을 수록 폰트 사이즈가 큰 걸 확인할 수 있다. 즉 중요도가 높다고 볼 수 있다.

 

ex)

<h1 class = "main-title">Zero To Hunnit Coding</h1>

<h2 class = "sub-title">시멘틱 태그 작성하기</h2>

<h3 class = "paragraph-title">제목 태그</h3>

 

* <a>태그와 <button>태그

보통 a태그와 button태그를 구분하지 않고 하나의 태그만 쓰는 경우도 있는데 두 개의 역할이 다르기 때문에 확실하게 구분해주어야한다.

 

a태그는 클릭했을 때 다른 링크로 연결되어 페이지로 이동하는 역할을 한다면,

button태그는 클릭했을 때 어떤 동작을 수행하는 역할을 한다.

 

* 혹시나 a태그나 button태그중 하나만 써야한다면 태그 작성후 태그 안에 role을 바꿔주면 된다.

 

* 글자 태그

태그를 작성했을 때 결과는 똑같이 나오지만 그 의미가 다른 글자 태그들이 있다.

 

* 굵은 글씨

<b>, <strong> 두 태그는 굵은 글씨를 표현한다. 하지만 b태그는 단순히 글자만 굵게 만들지만 strong태그는 굵게 만들고 중요하다는 의미 또한 포함된다.

 

* 기운 글씨

<i>, <em> 두 태그는 기울어진 글씨를 표현한다. 하지만 i태그는 단순히 글자를 기울이기만 하지만 em태그는 글자를 기울이고 강조한다는 의미를 포함한다.

 

* 밑줄친 글씨

<u>, <ins> 두 태그는 글자 밑에 밑줄이 생긴다. 하지만 u태그는 단순히 밑줄만 쳐지지만 ins태그는 단어가 추가,삽입 되었다는 의미를 포함한다.

 

* 중간선이 쳐진 글씨

<s>, <del> 두 태그는 글자 중간에 중간선이 생긴다. 하지만 s태그는 단순히 중간선만 생기지만 del태그는 취소되었다는 의미를 포함한다.

 

위의 태그들로 마크업을 한다면 SEO도 유리하게 가져가고 태그의 가독성도 높이면서 장애인들을 위한 접근성 또한 지킬 수 있다. 꼭 사용해서 여러가지 이점들을 챙겼으면 좋겠다.