HTML - Semantic한 HTML 작성

시맨틱 요소 (Semantic Elements)

semantic [sɪˈmæntɪk]
Adjective 언어 의미의, 의미론적인

수 년 전에 어느 IT 회사에서 PM팀으로 일을 했을 때 semantic 이라는 단어가 많이 보였었는데, 개발 관련 지식이 없던 당시에는 이 단어를 온전히 이해하지 못했던 것 같다. 시맨틱한 HTML이라고 하면, 태그의 이름만 보고도 태그가 HTML 안에서 어떤 역할을 수행하는지 개발자와 사용자 모두 쉽게 알 수 있도록 작성한 HTML을 말한다. 이는 HTML의 가독성을 높이며, 유지보수를 높일뿐만 아니라, 웹 접근성을 높이는데 크게 기여하여 웹 페이지에 일반적인 방법으로 접근할 수 없는 사용자(시각장애인 등)가 원활히 소통할 수 있게 한다. 또한, 모바일과 같은 디바이스와의 호환성을 높이는 등 다양한 OS 밑 웹 브라우저의 사용 범위가 확대된다. 즉, 무작정 div를 쓰는 것이 아니라, 문서와 애플리케이션의 의미구조 및 웹 표준에 적합하게 태그를 사용하자는 것이다. 이런 semantic mark-up은 검색 엔진 최적화(SEO, Search Engine Optimization)에도 도움을 준다.

 

none-semantic과 semantic 요소

• none-semantic 요소: div, span 등, content에 대하여 어떤 설명도 하지 않는 요소들
• semantic 요소: for, table, img, header, nav, aside, section, article, footer 등 content의 의미를 명확히 설명하는 요소들