Semantic HTML

Semantic HTML

Semantic HTML

Semantic HTML은 웹 페이지의 각 요소에 의미론적인 의미를 부여하는 것을 의미합니다. 이것은 웹 페이지를 작성할 때 중요한 개념 중 하나입니다.

ex

예를 들어, "div" 태그는 모든 것을 감싸는 일반적인 컨테이너로 사용되며, 이는 웹 페이지에서 많은 용도로 사용됩니다. 그러나 "div" 태그는 의미론적으로는 아무런 의미가 없습니다. 반면, "header", "nav", "article", "section", "footer"와 같은 태그는 각각 헤더, 내비게이션, 기사, 섹션, 푸터와 같은 의미론적인 역할을 합니다.

이러한 의미론적인 태그를 사용하면 웹 페이지가 더 명확하고 의미론적으로 올바르게 작성됩니다. 이를 통해 검색 엔진은 페이지의 콘텐츠를 더 잘 이해하고, 사용자는 스크린 리더와 같은 보조 기술을 사용하여 더 나은 웹 사용 경험을 얻을 수 있습니다.

예를 들어, "nav" 태그를 사용하여 내비게이션 메뉴를 정의하면 스크린 리더가 해당 요소를 "내비게이션"으로 읽어주며, 사용자가 페이지의 메뉴를 쉽게 찾을 수 있습니다. "article" 태그를 사용하여 기사를 정의하면, 검색 엔진은 해당 페이지에서 중요한 콘텐츠인 기사를 파악하고, 이를 기반으로 검색 결과의 순위를 결정할 수 있습니다.

장점

Semantic HTML을 사용하는 것은 웹 페이지의 가독성과 접근성을 향상시키며, 검색 엔진 최적화(SEO)를 개선하는 데 도움이 됩니다.