웹 개발을 하다보면 자주 보이는 시맨틱 태그에 대해서 알아볼게요!
[ 목차 ]
1. 시맨틱 태그 정의
2. 시맨틱 태그 종류 및 그림
3. 시맨틱 태그 장점
4. 결론
시맨틱 태그란?
일단 사전적인 의미를 파악해봐요
semantic: 의미의 ; 의미론의
tag: 어떠한 항목을 보충 설명하는 낱말
따라서 semantic tag는 의미가 있는 꼬리표라고 생각하시면 됩니다.
시맨틱 태그는 HTML5에 추가된 특별한 태그들로, 웹 페이지의 콘텐츠에 의미와 구조를 부여하는 역할을 합니다.
전통적인 HTML에서는 <div> 태그를 주로 사용해 다양한 요소를 묶었지만, 이러한 태그는 그 자체로는 의미를 전달하지 못했죠. 그래서 등장한 것이 바로 시맨틱 태그입니다!
시맨틱 태그는 이름 자체로 해당 요소의 역할과 의미를 직관적으로 알려줍니다.
[ 종류 ]
<header> : 페이지나 섹션의 머리말
<footer> : 페이지나 섹션의 바닥글
<article> : 독립적으로 구분될 수 있는 콘텐츠 블록
<section> : 주제별로 나눌 수 있는 섹션
<nav>: 내비게이션 링크 모음
이러한 시맨틱 태그를 사용하면, 웹 페이지의 구조와 콘텐츠가 명확해집니다
예전에는 div의 class를 통해서 header라는 부분을 알 수 있도록 했습니다.
<div class="header"> 대신 <header> 태그를 사용하면, 코드만 보아도 "여기는 머리말 부분이구나" 하고 바로 이해할 수 있어요. 마찬가지로 <div class="nav"> 대신 <nav> 태그를 사용하면, 이 부분이 내비게이션 링크를 모아놓은 곳이라는 것을 쉽게 알 수 있습니다. 아래 그림을 보시면 더 뚜렷하게 구별할 수 있다는 점을 알 수 있죠!
또한, 시맨틱 태그는 단순히 코드의 가독성을 높이는 것에 그치지 않고, 다양한 기술과 상호작용할 때도 큰 장점을 가집니다. 검색 엔진은 시맨틱 태그를 통해 페이지의 중요 요소를 더 잘 이해하고 인덱싱할 수 있습니다. 예를 들어, 검색 엔진은 <article> 태그 안의 콘텐츠를 주요 기사나 포스트로 인식하고, 이를 검색 결과에 반영할 수 있습니다.
뿐만 아니라, 접근성 향상에도 큰 역할을 합니다. 스크린 리더(Screen Reader)와 같은 보조 기술은 시맨틱 태그를 통해 페이지 구조를 더 잘 이해하고, 이를 사용자에게 적절히 전달할 수 있습니다. 시각 장애가 있는 사용자는 스크린 리더를 통해 페이지의 각 부분이 어떤 역할을 하는지 명확히 알 수 있게 됩니다.
마지막으로, 시맨틱 태그는 웹 기술의 발전에도 유연하게 대응할 수 있는 장점을 가집니다. 표준화된 태그들이기 때문에, 앞으로 새로운 브라우저나 기술이 등장하더라도 시맨틱 태그는 꾸준히 사용될 것입니다. 이는 우리의 웹 페이지가 미래에도 안정적으로 작동할 수 있음을 의미합니다!
다시 장점을 정리하면!
1. 가독성 up! 코드가 예뻐져요!
시맨틱 태그를 사용하면 코드가 한눈에 쏙쏙 들어와요.
<div> 태그만 잔뜩 있는 코드보다 <header>, <footer> 태그가 있는 코드를 보면
바로 "아, 여긴 머리말이구나", "여긴 꼬리말이네" 하고 이해할 수 있죠.
코드를 읽는 것도 쓰는 것도 더 쉬워지니, 개발자들한테 정말 큰 도움이 되겠죠?
2. SEO가 좋아해요!
Search Engine Optimization(SEO)는 검색 엔진 최적화이고,
자사 사이트를 검색엔진에 상위 노출시켜 자연적으로 트래픽을 높이는 디지털 마케팅입니다.
그래서 검색 엔진도 사람처럼 똑똑하기 때문에, 시맨틱 태그를 사용하면 검색 엔진이 "이건 중요한 내용이구나", "여기는 네비게이션 링크구나" 하고 알아차릴 수 있어요.
그래서 우리의 웹 페이지가 더 잘 검색되고, 더 많은 사람들이 찾아오게 되죠.
검색 결과에서 상위에 뜨면 기분도 좋아지겠죠?
3. 접근성도 챙겨요, 모두에게 친절하게!
스크린 리더 같은 보조 기술이 페이지를 해석하는 데 큰 도움이 돼요.
시각 장애가 있는 분들도 우리가 만든 웹 페이지를 쉽게 이용할 수 있도록 도와줍니다.
모두가 함께할 수 있는 웹을 만드는 데 시맨틱 태그가 큰 역할을 해요.
4. 미래에도 끄떡없어요!
시맨틱 태그는 표준화된 태그들이라, 앞으로 웹 기술이 발전해도 변함없이 사용될 거예요.
새로운 기술이나 브라우저가 나와도 우리의 시맨틱 태그는 튼튼히 제 역할을 할 거랍니다.
결론
요약하자면, 시맨틱 태그는 웹 페이지에 의미와 구조를 부여하고, 코드의 가독성을 높이며, 검색 엔진 최적화와 접근성을 개선하고, 미래에도 유연하게 대응할 수 있는 특별한 HTML5 태그들입니다. 시맨틱 태그를 사용함으로써, 우리는 더욱 명확하고, 접근 가능하며, 유지보수가 쉬운 웹 페이지를 만들 수 있습니다.
시맨틱 태그는 단순한 코드가 아닌, 웹 페이지에 의미와 구조를 담는 작은 기술이에요. 가독성, SEO, 접근성, 그리고 미래를 생각한다면 시맨틱 태그는 정말 소중한 기술이랍니다. 개발자 모두 시맨틱 태그를 사용해서 더 나은 웹을 만들어보아요!
'위클리페이퍼' 카테고리의 다른 글
| React: 렌더링, Virtual DOM, Component (0) | 2024.08.25 |
|---|---|
| 렉시컬 스코프(Lexical Scope): 코드 유효 범위 이해하기 (0) | 2024.08.18 |
| JS에서는 var는 왜 이제 안 쓰일까? 그리고 this는 무엇을 가리킬까? (0) | 2024.08.18 |
| 브라우저(browser)가 어떻게 동작하는지 알아보자! (0) | 2024.08.11 |
| Cascading 스타일 시트란? CSS의 계단식 적용 원리와 장점 (0) | 2024.08.03 |