div 사용을 자제해야 하는 이유

HTML5가 발표된 지 9년이 지난 지금,
웹은 어떻게 구성되어 있을까?

F12를 누르고 확인해 보자

NAVER 홈페이지다

코드만 보고 뭐가 어떻게 구성되어 있는지 상상되지 않는다.

머리가 아파진다.

Stripe 사이트

이번 코드는 그나마 페이지 구성을 떠올릴 수 있다.

div 태그를 header, selection, footer로 바꿨을 뿐인데 눈이 아프지 않다.
공백이 많을수록 눈은 편해진다는..

세 태그 다 div와 역할은 같다. 의미만 다르다.

기본 뼈대를 만들수록 기초공사는 잘 구성돼야 한다.

그만큼 웹의 뼈대, HTML 또한 그렇다.

 

HTML에서 의미가 중요한 이유 3가지

1. 출력된 화면을 보는 사용자와 다르게 개발자는 글자를 보기 때문에 코드의 가독성이 좋아야 일처리가 수월하다.
2. 의미 있는 웹일수록 검색엔진은 웹 내용을 이해하기 수월해지고 웹을 검색상단에 노출시킨다.
3. 컴퓨터가 이해할수록 장애가 있는 사용자에게 시각이 아닌 다른 방식(청각)으로 내용을 전달할 수 있다.

 

태그 의미 부여하기,
이것이 "Semantic Markup"이다.

 

다양한 의미를 가진 태그가 생긴 지금,
과거와 다르게 코딩을 시작하자구나.

Semantic Markup 예시