웹 개발을 위한 마크업 진행과중정에 "내가 과연 시멘틱 태그에 대해 얼마나 알고 이를 활용할까?"라는 의문과 함께 정리를 해보고자 합니다!
시멘틱 태그 ( Sementic tags )의 종류
- header : 웹 페이지나 색션의 머릿말이 들어갈 수 있는 요소 입니다.
- nav : 내비게이션 링크를 나타낼때 사용하는 요소 입니다.
- main : 웹 페이지의 중심적인 콘텐츠를 나타낼때 사용하는 요소입니다.
- section : 문서의 구획을 구분하는 태그로, 콘텐츠를 담을때 사용하는 요소입니다.
- article : 문서, 페이지, 사이트에서 독립적으로 구분되는 콘텐츠를 담을때 사용하는 요소입니다.
- aside : 주 콘텐츠와 연관되지만, 부가적인 정보를 나타낼때 사용하는 요소입니다.
- footer : 웹 페이지나 색션의 꼬릿말을 나타낼때 사용되는 요소 입니다.
시멘틱 태그를 사용하는 이유...
시멘틱 태그를 사용하는 이유를 알아보기 전에 html로 먼저 확인해 보자면 다음과 같습니다!
시멘틱 태그를 사용 하지 않을 경우
<!DOCTYPE html>
<html lang="ko-KR">
...
<body>
<div class='header'>
<div class='nav'>{네비게이션 링크 리스트}</div>
</div>
<div class='main'>
<div class='section'>
<div class='article'>{내용1~}</div>
<div class='article'>{내용2~}</div>
</div>
<div class='aside'>{T.O.P.~}</div>
</div>
<div class='footer'>{footer 내용~}</div>
</body>
</html>시멘틱 태그를 사용 할 경우
<!DOCTYPE html>
<html lang="ko-KR">
...
<body>
<header>
<nav>{네비게이션 링크 리스트}</nav>
</header>
<main>
<section>
<article>{내용1~}</article>
<article>{내용2~}</article>
</section>
<aside>{T.O.P.~}</aside>
</main>
<footer>{footer 내용~}</footer>
</body>
</html>눈으로 코드를 보아도 각 영역의 역활을 어느정도 유추할 수 있고, 이를 바탕으로 더 원활한 소통이 가능힙니다
이처럼 시멘틱 태그를 사용 하여 얻을 수 있는 이점은 다음과 같습니다!
- 코드 가독성 향상
- 위에서 말한 내용과 같이 시멘틱 태그를 사용하면 웹 페이지의 구조와 내용이 잘 드러나기 때문에 코드 가독성을 향상시킬 수 있습니다. -> ( 유지보수와 개발 생산성에 도움이 된다!! )
- 웹 접근성 향상
- 시각 장애인이나 시력이 저하된 사람들은 스크린 리더를 통해 웹 페이지를 탐색하는데, 이때 시멘틱 태그를 사용하면 스크린 리더가 웹 페이지를 더욱 더 정확하게 해석할 수 있어 웹 접근성을 향상 시킬 수 있습니다.
- 검색엔진 최적화 ( SEO )
- 검색 엔진은 웹 페이지의 구조와 내용을 이해하여 검색 결과를 제공하는데, 시멘틱 태그를 사용하면 검색엔진에서 웹 페이지의 구조를 더욱 잘 이해할 수 있어서 검색 엔진 최적화를 향상시킬 수 있습니다. ( 구글 검색엔진의 경우 세부 목차의 내용까지 보이게 할 수 있습니다. )
웹 표준을 지키는 이유...
시멘틱 태그를 공부하다 보면 웹 표준과 연관이 많이 되어 있는데 여거서 웹 표준을 잠깐 살펴 보고 가자면 다음과 같습니다!
HTML의 웹 표준은 W3C(World Wide Web Consortium)에서 제정한 권장 사항으로, 이 권장사항을 준수하여 작성한 웹 페이지는 웹 브라우저나 검색 엔진 등에서 원활하게 동작하고, 브라우저같 호환성과 웹 접근성을 향상시킬 수 있습니다.!
이를 바탕으로 웹 표준을 지키는 이유를 생각해 보자면
- 웹 접근성 향상
- 웹 표준을 지키면 웹 페이지가 더 잘 동작하고, 웹 접근성을 향상시키고, 이를 통해 스크린 리더를 사용하는 시작 장애인이나 시력이 저하된 사용자들 뿐만 아니라 모든 사용자에게 이점을 제공합니다.
- 브라우저 호환성 보장
- 웹 표준을 준수하면서 다양한 웹 브라우저에서 동일한 결과물을 보여줄 수 있습니다. 이를 통해 사용자들이 다양한 브라우저를 사용할 때 불편함을 최소화 시키고, 개발자들은 각 브라우저의 대한 대응을 최소화 할 수 있습니다.
- 개발 생산성 향상
- 웹 표준을 지키면 코드 가독성이 향상되고, 유지보수가 쉬워져서 개발 생산성이 향상됩니다!
꾸준히 발전하는 개발자