Semantic HTML

Semantic HTML은 문서를 보기만해도 그 의미를 짐작할 수 있는 것을 뜻한다.

 

과거에는 아무의미 없지만 구분하기 위해 사용하는 <div> tag를 많이 사용하였다. 물론 지금도 많이 쓴다.

 

하지만 코드를 작성하면서 대부분을 div를 사용하여 구분한다면 코드를 볼 때 어떤 의미인지 알기가 힘들다.

 

때문에 이럴 때는 누구나 봤을 때 내용을 알 수 있게 해주는 tag인 Semantic tag를 쓰는걸 권장한다.

 

예시를 보자.

 

 

과거에는 위의 코드처럼 div와 id를 이용하여 구분하는 것들을 많이 사용했다고 한다.

 

하지만 페이지나 사이트가 커질수록 div가 떡칠되어 있어 가독성에 있어서도 불편했다고 한다.

 

따라서 요즘은 아래와 같이 많이 사용하는 추세이며 권장한다.

 

같은 내용이고 출력값 또한 같지만 누구나 봐도 내용을 짐작할 수 있고 또한 검색엔진도 이 코드를 이해할 수 있어 인터넷에 내용을 검색 시 훨씬 더 잘 노출 될 수 있다는 장점이 있다.

 

이러한 Semantic tag은 더 있으니 검색해서 하나씩 써보면서 체득하도록 해보자.

 

좋은 코드란 중복이 적고 재사용이 많으며 가독성이 좋은 것이 아닐까?