[HTML] 🏷️시맨틱(Semantic) HTML

🏷️Semantic HTML이란?

시맨틱(semantic)은 "의미의, 의미론적인" 이라는 뜻을 가진다.
즉, 시맨틱(semantic) HTML이란 의미론적 HTML을 말한다.
우리는 HTML의 요소에 대해 생각할 때 그 요소가 어떻게 보일지에 대해 생각하지 말고 실제로 무엇을 의미하고 나타내는 것인지 생각해야 한다. 이게 기본적인 시맨틱 HTML의 정의다.

non-semantic elements의 예시

<div>, <b>, <i> 등이 있다. 이들은 아무런 의미가 없는 element이다.

semantic elements의 예시

<section>, <strong>, <em> 등이 있다. HTML 5와 함께 새롭게 등장한 elements를 포함한 이들은 개발자와 브라우저 모두에게 의미를 전달할 수 있다.

이쯤에서 우리는 왜 이렇게 코드를 작성해야 하는지 의문점을 가질 수 있다.

🤔 왜 시맨틱한(semantic) HTML을 작성해야 할까?

1. 검색 엔진 최적화
   : 구글과 같은 검색 엔진이 우리가 작성한 내용을 이해하는 과정에서 Semantic elements를 통해 무엇이 중요하고 웹 페이지가 무엇에 관한 것인지 더 잘 분석할 수 있다.
2. 스크린 리더를 이용하는 사람들
   : 스크린 리더는 웹 페이지를 탐색할 때 Semantic elements을 푯말로 사용한다고 한다.

이 외에도 나를 포함한 누군가가 코드를 볼 때 가독성을 높여 문서의 전체적인 구조를 파악하기 쉽게 하는 등 다양한 이유가 존재한다.

✨ 대표적인 HTML의 시맨틱(Semantic) 요소(element)들