제시된 과제에서 시멘틱 태그를 사용하라는 지시사항이 있었다.

하지만, 내가 시멘틱 태그가 제대로 무엇인지, 사용하는 이점이 무엇인지 잘 알지 못한다고 판단해 공부하고 정리해보았다.

1. 시멘틱 태그의 의미

• 시맨틱 태그란 의미가 있는 태그를 의미한다.
• div와 비슷한 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, time 등 의미가 있는 태그는 내용을 명확하게 정의한다.

2. 시멘틱 태그 사용 이점

• 검색엔진에 최적화 되어있다. 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 태그 설정을 잘해야한다.
• 협업자가 내 코드의 끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 가독성이 높아진다.

3. 시멘틱 태그 유의 사항

• 사용할 태그를 결정하기전 채울 데이터를 가장 잘 나타내는 요소는 무엇일지? 생각해본다.
• 작성할 태그는 스타일 기반이 아닌 채워질 데이터를 기반으로 결정되어야 한다. 어떻게 보여야 하는지는 전적으로 CSS의 책임이다.

4. 시멘틱 태그 종류와 구조도