[HTML] HTML:시맨틱(Semantics)

시맨틱요소 정의 및 사용이유

 

정의

시맨틱(semantic) 요소란? 그 자체에 의미를 가지고 있는 요소를 말한다.

즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.

 

사용하는 이유

• 검색엔진최적화(SEO) : 웹사이트는 검색엔진의 노출이 매우 중요하다. 검색엔진이 검색을 수행할때 태그를 분석하는데 시맨틱태그를 사용하여 태그들의 의미가 분명해지면 검색엔진이 쉽게 구별할 수 있을것이다. 
• 유지보수 및 가독성 : 아래의 잘못된 예시처럼 모든 태그들의 <div>로 되어 있을경우 영역파악이 쉽지않다. 그래서 시맨틱태그를 사용하면 다른 작업자에게 코드를 공유해도 쉽게 영역을 파악할 수 있을것이다.
• 웹 접근성 : 아래의 옳은 예시처럼 시맨틱태그를 사용하여 의미있고 보기좋은 영역을 나누면 웹 브라우저가 영역을 쉽게 알 수 있어, 스크린리더를 사용하는 시각장애인이 사이트 구조를 소리로 쉽게 구별할 수 있을것이다.

시맨틱요소의 잘못된 예

시맨틱요소의 옳은 예

시맨틱요소 태그정리

<header> : 헤더(머릿말)를 의미

<nav> : 내비게이션을 의미

 

<main> : 지배적인 콘텐츠 공간

<aside> : 사이드에 위치하는 공간

<section> : 여러내용을 포함하는 독립적인 공간

<article> : 본문의 주내용이 들어가는 공간

<footer> : 푸터(꼬리말)를 의미