🤔 시멘틱 태그를 사용하는 이유는?
시맨틱 태그를 사용하는 이유를 알아보기 전에 필요한 용어를 정리해보자.
시멘틱 태그란?
특정 의미가 담긴 태그를 의미한다.
참고로 위의 컨테이너 요소를 부모로 둘 수 없다.
시멘틱 태그의 예시 알아보기
<header>, <footer>, <article>, <section>, <nav> 등이 있으며, 각각 페이지의 헤더, 푸터, 본문의 하나의 독립적인 부분, 일반적인 부분, 내비게이션을 의미한다.
💡 시멘틱 태그를 사용하여 얻을 수 있는 장점
우선 시멘틱 태그는 시멘틱 웹을 구현하는데 중요한 역할을 한다.
이는 HTML 요소의 의미를 정의하므로, 컴퓨터(예: 검색 엔진, 스크린 리더기 등)가 웹 페이지의 구조와 콘텐츠를 더 잘 이해할 수 있게 한다.
시멘틱 웹(Sementic Web)이란?
의미론적인 마크업
HTML 내의 요소의 의미를 고려하여, 문서의 구조를 설계하고 그에 맞는 코드를 작성하는 것이다.
1. 검색 엔진 최적화(SEO)
시멘틱 태그를 사용하면 검색 엔진이 웹 페이지의 콘텐츠를 더 잘 이해할 수 있으므로, 검색 결과에서 더 높은 순위를 얻을 수 있다.
즉, 검색 엔진에 더 쉽게 노출될 수 있다.
2. 웹 접근성 향상
스크린 리더기와 같은 보조 기술을 사용하는 사용자들이 웹 페이지의 콘텐츠를 더 잘 이해하고 사용할 수 있다.
3. 코드의 가독성 향상
시멘틱 태그를 사용하면, 개발자들이 코드를 더 쉽게 이해하고, 유지보수를 더 효율적으로 할 수 있다.
4. 웹 접근성 향상
스크린 리더기 사용자들이 콘텐츠를 더 잘 이해할 수 있다.
이는 의미론적인 마크업을 통해 목차를 사용하기 때문에, 문서의 구조를 명확하게 설명하기 때문이다.
이러한 장점이 있기 때문에 웹 표준을 지키는 것이 가장 바람직하다.
웹 표준(Web Standards)을 지키는 이유
𝗤. 웹 표준은 뭔가요..!😂
𝐀. 웹 표준이 나오기 전부터 얘기하자면,,,
브라우저(ex. 자동차)마다 다른 엔진(ex. 자동차 엔진)을 사용하기 때문에, 사용자에게 동일한 서비스를 제공하기 위해서 개발자는 각 브러우저에 맞게 따로 개발을 해야 했습니다..
𝗤. 너무 힘든 작업 아닌가요..
𝐀. 맞아요!!! 개발이 너무 번거롭고 절대 쉽지 않았기에, HTML을 표준화하여 하나의 사전처럼 만들었고, 이를 웹 표준이라고 부르게 되었죠~!
웹 표준의 장점
1. 효율적인 개발
웹 표준을 지키면, 개발자들은 브라우저마다 다른 코드를 작성하는 것이 아니라, 하나의 코드를 작성하면 모든 브라우저에서 동일하게 작동하는 웹 페이지를 만들 수 있다.
이는 개발 시간을 절약하고, 비용을 줄일 수 있다.
2. 웹 접근성 향상
웹 표준은 사용자들이 웹사이트의 콘텐츠를 이해하고 사용할 수 있도록 돕는 웹 접근성 가이드라인을 포함하고 있다.
따라서 웹 표준을 지키면, 장애를 가진 사람들도 웹사이트를 이용할 수 있다.
3. 새로운 웹 기술과의 호환성
웹 표준을 지키는 웹사이트는 새로운 웹 기술이 나왔을 때, 그 기술을 더 쉽게 적용할 수 있다.
이러한 장점이 있기 때문에 웹 표준을 지키는 것이 가장 바람직하다.
