HTML5 시맨틱 태그와 웹 표준을 지키는 이유

시맨틱 태그(Semantic Tag)

내용에 대해 아무것도 알려주지 않는 <div> 태그나 <span> 태그 등과는 다르게 

시맨틱 태그는 웹 페이지 내의 내용에 의미와 콘텍스트를 제공하는 HTML 태그입니다.

즉, 페이지에 내용을 표시하는 '방법'을 지정하는 것이 아닌 내용의 '목적'이나 '의미'를 설명하도록 설계된 것이죠

주로 쓰는 시맨틱 요소 정리

<header> 

   : 웹 페이지의 헤더 섹션을 정의할 때 사용합니다.

     일반적으로 제목이나 로고 머리말 같은 요소들이 들어갑니다.

<nav>

   : 웹 페이지의 탐색 섹션을 정의할 때 사용합니다.

    동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크들이 들어갑니다.
<article>

   : 블로그 게시물 또는 뉴스 기사와 같은 웹 페이지 내에 포함된 콘텐츠를 정의하는 데 사용됩니다.

<section>

   : 웹 페이지 내에서 내용 섹션을 정의하는 데 사용됩니다.
<aside>

   : 사이드바 또는 호출 상자와 같이 웹 페이지의 주 내용이 아닌 부수적인 내용을 넣기 위해 사용됩니다.

<footer>

   : 웹 페이지 마지막에 들어가는 태그로 저작권 정보나 저작권 표기와 같은 내용을 넣기 위해 사용됩니다.

 

 

웹 표준

웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있으며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.

출처

웹 표준과 웹 호환성 - 웹 접근성 | 웹발전연구소

 

 

웹 표준을 지키는 이유

웹 접근성

   : 시맨틱 태그는 장애가 있는 사용자의 경험을 향상하는 데 사용할 수 있는 웹 페이지의 구조와 내용에 대한 추가 정보를 제공하기 때문에 액세스 가능한 웹 콘텐츠를 만드는 데 중요한 부분입니다. 시맨틱 요소들을 사용하여 HTML을 작성한다면 <div> 태그로 작성한 것보다 장애가 있는 사용자가 페이지를 탐색하고 페이지의 구조를 쉽게 이해할 수 있습니다. 또한 시맨틱 태그를 사용하면 이미지 및 멀티미디어와 같은 텍스트가 아닌 콘텐츠의 접근성을 향상할 수 있습니다. 예를 들어 <figure> 및 <figcaption> 태그를 사용하여 이미지 또는 멀티미디어 콘텐츠에 대한 설명을 제공할 수 있으므로 시각 장애가 있는 사용자가 콘텐츠를 더 쉽게 이해할 수 있습니다.

SEO(Search Engine Optimization)

   : 시맨틱 태그를 사용하면 검색 엔진이 웹 페이지의 내용을 이해하는 데 도움을 줄 수 있으므로 검색 결과에서 더 높은 순위에 오를 가능성이 높습니다. 이 점은 디지털 마케팅에서 유용하며 모든 규모의 기업이 온라인 가시성을 높이고 더 많은 유기적인 트래픽을 유치하며 궁극적으로 수익을 성장시킬 수 있도록 지원할 수 있습니다.

일관성(호환성)

 : 웹 표준은 웹 페이지가 일관되고 호환 가능한 기술을 사용하여 구축되도록 하므로 서로 다른 브라우저와 장치가 웹 페이지를 일관된 방식으로 더 쉽게 렌더링 할 수 있습니다.

유지 관리

   : 시맨틱 마크업 및 웹 표준으로 작성된 웹 페이지는 논리적이고 일관된 방식으로 구성되어 있으므로 일반적으로 유지관리 및 업데이트하기가 더 쉽고 페이지 제작의 부담이 줄어듭니다.

 

 

간단히 말해서, HTML5 시맨틱 태그를 사용하고 웹 표준을 준수하면 검색 결과에서 우수한 성능을 발휘하고 다양한 장치 및 기술과 호환되는 보다 액세스 하기 쉽고 사용자 친화적이며 유지 관리 가능한 웹 사이트를 만들 수 있다는 말입니다.

 

 

참조

https://www.w3schools.com/html/html5_semantic_elements.asp

HTML Semantic Elements

https://coding-factory.tistory.com/883

[Html] 시맨틱 태그(Semeantic Tag)란 무엇인가?

http://www.smartebiz.kr/new/subpage02_02.html