HTML - 시맨틱 마크업

시맨틱 마크업

의미를 잘 전달하도록 문서를 작성하는 것

• 헤더와 푸터 : header, footer 태그
• 메인 컨텐츠에 : main 태그
• 영역별로 나뉘어져야 할때 : section 태그
• 최상위 제목 : h1 태그
• 내비게이션 : nav 태그

태그가 가지고 있는 의미에 맞게 사용하는 것!

- 예시

예를 들어 강조를 해야할때 strong 태그와 b 태그가 있는데, 둘의 효과는 같음
b는 태그자체의 의미가 스타일(bold의 약자), strong은 태그자체의 의미가 강하게 라는 뜻을 가지고 있음
=> 의미 부여가 되는 strong을 쓰는것이 시멘틱 마크업에 더 적합

- 시맨틱 마크업을 사용하는 이유?

• 유지보수에 더 좋다!
  => 태그만 보고 위치와 역할 파악이 가능
• 검색 엔진 최적화에 유리하다!
  => 검색 엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문
• 스크린 리더가 의미를 파악하기 쉬워진다!