1. Semantic Tag란?
semantic | 의미의, 의미론적인
html에서 semantic tag란 의미를 가지는 tag를 말합니다.
1-1 ) semantic tag가 생기기 전
HTML5 이전에는 웹 페이지의 구조를 나타내기 위해 위와같이 <div>나 <span> 같은 범용 태그를 사용했습니다. 이 태그들은 내용을 담는 기능은 하지만, 그 내용이 어떤 의미를 가지는지 명시하지 않습니다.
/*
.title {
font-size: 32px;
font-weight: 600;
}
*/
<span class="title"> 글 제목 <span>글 제목을 나타내는 큰 글씨를 쓰고 싶다면 위와 같이 id나 class 속성을 사용해 이를 구분해야만 했습니다.
1-2. semantic tag가 생긴 후
<h1> 글 제목 <h1>HTML5에서부터 semantic tag가 생기고 난 후,위와 같이 간단히 사용할 수 있게 되었습니다.
<h1>외에도 <article>, <footer>, <header>등 많은 semantic tag가 생겼고, 이런 다양한 semantic tag가 생김으로서 높은 가독성이 생기게 된것입니다.
2. semantic tag가 주는 이점
의미를 가짐으로써 가독성이 향상된 태그. 개발자만 이런 가독성을 누리는걸까요?
2-1 ) 웹 크롤러 - SEO
semantic tag는 개발자의 가독성 뿐만 아니라 웹 크롤러에 의한 가독성도 향상시켜 검색 엔진 최적화(SEO)에 기여합니다.
semantic tag를 활용하면 웹사이트의 메타데이터와 콘텐츠가 명확하게 구조화되어, 검색 엔진은 관련 키워드와 내용을 연결짓는데 필요한 맥락을 더 쉽게 파악할 수 있습니다. 이는 검색 결과에서 웹사이트의 노출 순위를 높이는데 결정적인 역할을 하며, 특정 검색어에 대한 관련성과 정확성을 향상시키는 데에 기여합니다.
2-2 ) 사용자 - 접근성 향상
웹페이지를 시각적인게 아니라 음성으로 읽어주는 스크린 리더를 이용하거나 키보드만을 이용해서 웹사이트를 이용하는 경우, 적절한 semantic tag를 이용한 웹사이트라면 문제없이 잘 동작 할 수 있습니다.
2-1 ) 개발자 - Maintainability
개발자가 코드를 봤을 때 한 눈에 구조를 파악 할 수 있고, 유지보수성도 더 높여서 개발 할 수 있습니다.
3. 자주쓰이는 semantic tag들
<header>
<header> 태그는 문서나 섹션의 머리말을 지정합니다. 로고, 탐색 링크, 제목 등 페이지의 소개 정보가 포함된 상단 부분을 정의합니다.
<nav>
<nav> 태그는 웹사이트의 메뉴, 탭, 탐색 경로 등을 포함하는 탐색 링크 섹션을 정의합니다. 사용자가 웹사이트를 쉽게 탐색할 수 있도록 돕습니다.
<main>
<main> 태그는 웹사이트의 주요 콘텐츠를 담습니다. 문서 내에서 한 번만 사용되어야 하며, <article>, <aside>, <footer>, <header>, <nav> 등 다른 페이지 구조 태그들과 구분됩니다.
<aside>
<aside> 태그는 페이지 주 콘텐츠와 간접적으로 관련된 콘텐츠를 담는 태그로, 주로 사이드바 혹은 콜아웃 박스로 사용됩니다.
<dialog>
<dialog> 태그는 대화 상자(dialog box) 또는 팝업 창을 나타냅니다. 모달(modal) 또는 비모달(non-modal) 대화 상자를 구현할 때 사용됩니다.
4. 헷갈리는 semantic tag들
4-1 ) <article> vs <section>
| tag | description |
|---|---|
<article> | 문서, 페이지, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 예를 들어, 블로그의 개별 포스트나 신문의 개별 기사 등이 이에 해당합니다. <main> 태그 안에서 다른 내용과 전혀 상관 없이 독립적으로 고유한 정보를 나타낼 때 사용합니다. |
<section> | <article> 안에는 여러 정보들이 들어있을 수 있으며, 이때 서로 연관 있는 내용을 묶을 때 사용합니다.<article>의 내부뿐만 아니라 외부에서도 사용할 수 있습니다. |
4-2 ) <button> vs <a>
두 태그 다 CSS만 적용하면 버튼처럼 보이기 때문에 헷갈려하는 경우가 많습니다.
| tag | description |
|---|---|
<button> | 로그인, 장바구니에 넣기, 구매와 같이 사용자가 특정한 액션을 해야할 때 사용합니다. |
<a> | 홈 버튼과 같이 사용자가 클릭해서 어딘가로 이동해야 할 때 사용합니다. |
4-3 ) <i> vs <em>
둘 다 시각적으로 글꼴을 기울이게해주는 태그지만 의미적으로 차이가 있습니다.
| tag | description |
|---|---|
<i> | 의미 없이 단순히 시각적으로 글꼴을 기울이고 싶을 때 사용합니다. |
<em> | 글꼴을 기울이면서 강조하고 싶을 때 사용합니다. |
4-4 ) <b> vs <strong>
둘 다 시각적으로 글꼴을 두껍게 해주는 태그지만 의미적으로 차이가 있습니다.
| tag | description |
|---|---|
<b> | 의미 없이 단순히 시각적으로 글꼴을 두껍게하고 싶을 때 사용합니다. |
<strong> | 글꼴을 두껍게하면서 강조하고 싶을 때 사용합니다. |
4-5 ) <ul> vs <ol> vs <dl>
공통적으로 리스트를 의미하는 semantic tag들입니다.
| tag | description |
|---|---|
ul | 순서가 없는 리스트를 나타냅니다. |
ol | 순서가 있는 리스트를 나타냅니다. 순서가 중요할 때 사용합니다. |
dl | 설명이나 정의가 필요한 항목을 나열할 때 사용합니다. |
dt | dl 태그 안에서 사용되며, 설명하고자 하는 용어나 단어를 정의할 때 사용합니다. |
dd | dl 태그 안에서 사용되며, dt로 정의된 용어나 단어에 대한 상세 설명을 제공할 때 사용합니다. |
4-6 ) css: background-image vs <img>
이미지 요소를 넣을 때 css의 background-image를 쓸지 <img> 태그를 써야할지 헷갈릴 때가 있다.
| tag | description |
|---|---|
background-image | 이미지에 의미가 딱히 없고 단순히 시각적인 효과를 위해 배경이미지 등으로 사용할 때는 css로 추가한다. |
<img> | 해당 페이지를 이해할 때 이 이미지가 꼭 필요하다 싶을 때는 <img>태그를 사용한다. |
참고 자료
