시맨틱 태그 설명
시맨틱 태그란 의미 있는 태그를 뜻합니다.
평소에 어떻게 마크업을 작성하시나요?
만약 아래와 같은 페이지를 구현한다고 할 때, 어떻게 마크업 하실 건가요?
div만 사용한 경우
이미지, 텍스트, 모달, 버튼 등 어떤 요소이든 간에 `<div>` 태그만 있으면 작성할 수 있습니다.
다음과 같이 말이죠.
<div>
<div id="title">
제목입니다.
</div>
<div id="contents">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="button">
다음 글
</div>
<div class="button">
이전 글
</div>
</div>시맨틱 태그를 사용한 경우
시맨틱 태그를 사용하면
코드만 보고도 어떤 것이 이 페이지의 메인 제목(`h1`)인지,
클릭가능한 요소(`button`)는 무엇인지 파악하기 쉽습니다.
<main>
<header>
<h1 id="title">
제목입니다.
</h1>
</header>
<p id="contents">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button class="button">
다음 글
</button>
<button class="button">
이전 글
</button>
</main>시맨틱 태그 장점
위에서 보았던 것처럼
시맨틱 태그를 사용하여 코드를 작성하면
다른 개발자가 html 코드를 보았을 때 페이지의 구조를 이해하는데 도움을 주어요.
이러한 구조는 사람에게뿐만 아니라 컴퓨터가 페이지를 이해하는 것에도 도움을 줍니다!
검색 엔진
구글 검색창에 "노트북"키워드를 검색하면
노트북과 관련된 정말 많은 정보들이 검색 결과로 나옵니다.
여기서 포인트는 "노트북과 관련된 정보"입니다.
어떻게 노트북을 검색했을 때 노트북과 관련된 사이트들을 찾을 수 있는 것일까요?
이것은 구글에서 만든 검색엔진이라는 프로그램 덕분에 가능해졌습니다.
검색 엔진은 사이트가 어떤 정보를 제공하고 있는지 분석하는 일을 해요.
(각 검색 사이트마다 다른 검색엔진을 사용해요)
검색 엔진은 하나의 프로그램이기 때문에,
사이트를 사람처럼 눈으로 보고 직관적으로 어떤 것이 제목인지, 버튼인지 알 수 없어요.
대신 html 코드(데이터)는 분석할 수 있습니다.
시맨틱 태그 미사용 예시
만약 div 태그로만 구성되어 있는 페이지라면,
검색엔진은 어떻게 분석할까요?
<html>
<body>
<!-- 네브바 -->
<div id="nav">
<div>마이페이지</div>
<div>장바구니</div>
<div>로그아웃</div>
</div>
<!-- 페이지 제목 -->
<div>노트북 사양 비교</div>
<!-- 상품 아이템1 -->
<div class="item">
<div>맥북</div>
<div class="price">3,000,000원</div>
<div class="info">Apple M3</div>
<div class="button">더 알아보기</div>
</div>
<!-- 상품 아이템2 -->
<div class="item">
<div>LG Gram</div>
<div class="price">2,500,000원</div>
<div class="info">인텔 Ultra5</div>
<div class="button">더 알아보기</div>
</div>
</body>
</html>사람이 보기엔 아래의 정보가 중요한 것을 감으로 알 수 있어요.
- 노트북 사양 비교 페이지이다.
- 맥북의 가격은 300만 원이고, Apple M3를 사용한다.
- LG 그램의 가격은 250만 원이고, 인텔 Ultra5를 사용한다.
하지만 컴퓨터에겐 감이 존재하지 않습니다.
이처럼 위계가 없는 `div`를 사용한다면,
컴퓨터는 마이페이지라는 단어와 맥북, 더 알아보기 등 모두 동일한 중요도를 갖고 있다고 인지하게 됩니다.
중요도가 구분되지 않는다면
페이지의 키워드를 선정할 때 적절하지 않은 결과물이 나올 수 있습니다.
위의 페이지 같은 경우, 가장 반복이 많이 된 '더 알아보기'가 주요 키워드가 될 수 있는 것이죠 😨
키워드가 적절하게 선정되지 않는다면,
구글과 같은 사이트에서 관련 키워드를 검색했을 때 상위 노출되기는 더더욱 어려워지게 됩니다.
시맨틱 태그 사용 예시
만약 시맨틱 태그로 구성되어 있는 페이지라면,
검색엔진은 어떻게 분석할까요?
<html>
<body>
<!-- 네브바 -->
<nav id="nav">
<ol>
<li><a>마이페이지</a></li>
<li><a>장바구니</a></li>
<li><a>로그아웃</a></li>
</ol>
</nav>
<!-- 페이지 제목 -->
<header>
<h1> 노트북 사양 비교 </h1>
<header>
<!-- 상품 아이템1 -->
<section class="item">
<header>
<h2>맥북</h2>
</header>
<p class="price">3,000,000원</p>
<p class="info">Apple M3</p>
<a class="button">더 알아보기</button>
</section>
<!-- 상품 아이템2 -->
<section class="item">
<header>
<h2> LG Gram </h2>
</header>
<p class="price">2,500,000원</p>
<p class="info">인텔 Ultra5</p>
<a class="button">더 알아보기</button>
</section>
</body>
</html>
검색 엔진은 위의 마크업을 읽을 때 다음과 같이 정보를 이해할 수 있습니다.
- 페이지의 제목을 뜻하는 `h1`이 있다. -> 페이지의 제목은 "노트북 사양 비교"구나!
- 페이지 내부의 내용을 구분할 때 사용하는 `section`이 존재한다. -> 두 개의 주요 내용이 있구나!
- `section` 하위에 `h2` 가 있다. -> 각 section의 주요 키워드는 "맥북"과 "LG Gram"이구나!
- 다른 페이지로 이동하는 링크를 뜻하는 `a`가 있다. -> "더 알아보기"를 클릭하면 다른 페이지로 이동하는구나!
위의 과정을 통해서
해당 페이지는 제목으로 사용된
"노트북 사양 비교", "맥북", "LG Gram"을 주요 키워드로 선정할 수 있게 됩니다!
스크린 리더
시맨틱 태그를 적절히 활용한다면
검색엔진뿐만 아니라 스크린리더도 사이트를 잘 이해할 수 있게 됩니다.
스크린리더는 화면에 있는 텍스트를 소리 내어 읽어주는(TTS) 프로그램입니다.
시각장애인은 스크린리더를 통해 눈으로 보는 것 대신 귀로 들으며 사이트를 이용하게 됩니다.
저는 성격이 급해서 유튜브 영상도 보고 싶은 구간으로 마구 건너뛰기하면서 봐요.
그런데 사이트를 읽어주는 스크린리더가 중요하지도 않은
'마이페이지', '장바구니', '로그아웃' 같은 정보를 읽고 있으면 얼마나 답답할까요,,
이때 시맨틱 태그가 잘 적용되어 있다면
스크린리더는 주요한 문장(`h1`, `b`)을 먼저, 강조해서 읽어주고
페이지의 주요 내용과 관련이 없는 텍스트(`nav`, `s`)는 생략하거나 나중에 읽기도 합니다!
만약 모니터가 발명되지 않고, 스크린리더로만 사이트를 이용할 수 있었다면
아마 시맨틱 태그는 프론트엔드의 가장 중요한 소양이 되었을 것이라고 생각해요. 🤔
좋은 사이트를 만드는 방법
[HTML 요소 참고서]를 보면 시맨틱 태그는 정말 많은 종류가 있고 각각 맡은 역할이 다릅니다.
이 모든 것을 한 번에 학습하기란 너무나 어려운 일이죠..
그래서 개발할 때는 고민 없이 div 태그만 사용하는 것이 뇌의 입장에선 편하다고 느껴지죠.
하지만 시맨틱 태그를 하나씩 학습하고 적절하게 사용하게 된다면
사람도 잘 읽을 수 있고, 컴퓨터도 잘 읽을 수 있는 "좋은 사이트"를 만들 수 있어요.
개발할 때 약간의 불편함을 감수하더라도
협업하는 동료와 사이트 이용자를 위해, 좋은 사이트를 만들기 위해
의미 있는 태그를 사용하도록 노력해 봅시다!
'개발 > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그(Semantic Tag) : section, article, div 차이 (0) | 2024.07.07 |
|---|---|
| [HTML] 시맨틱 태그 (Semantic Tag) : h1 & header (0) | 2024.07.04 |
