[HTML] Semantic Markup

🚨 시맨틱 마크업에 대해서,,,

• Semantic : 의미론적인
• Markup : HTML태그로 문서를 작성하는 것
  👉 즉 Semantic Markup 이란 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다.

작성 방법

태그를 각각에 용도에 맞게 사용해야 합니다.

• 헤더 : header 사용
• 네비게이션 : nav
• 푸터 : footer 사용
• 메인 부분 : main 사용
• 컨텐츠를 나눌때 가장 큰 카테코리 : section 사용
• 최상위 제목 : h1 사용
• 순서가 없는 목록 : ul과 li 사용
• 순서가 있는 목록 : ol과 li 사용
• 표를 나눌 때 : tr과 td 사용

특징

• 검색엔진이 시맨틱 태그를 중요한 키워드로 간주해서 검색엔진 최적화에 유리합니다.
• 웹 접근성 측면에서 시각장애가 있는ㄴ 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있습니다.
• div, span으로만 구성되어 있는 것보다 코드를 볼 때 가독성이 더 좋습니다.