시멘틱마크업(Semantic Markup) 이란?

시멘틱(Semantic)

• 의미론적이라는 뜻을 가진다.

마크업(markup)

• HTML 태그로 문서를 작성하는 것이다.

⇒ 즉, 시멘틱 마크업은 의미를 잘 전달하도록 문서를 작성하는 것을 의미한다.

작성방법

• 태그가 가지고 있는 의미에 알맞게 사용해야 한다.
• CSS 스타일을 명시하는 태그를 사용하지 않아야 한다.

  • 태그가 가지고 의미가 스타일이면?

    → 마크업이 스타일을 가지므로 시맨틱 마크업이 아니다.

용도에 맞게 사용하는 예시

• 헤더/푸터에 <header> 와 <footer> 사용
• 메인 컨텐츠에 <main> 과 <section> 사용
• 독립적인 컨텐츠에 <article> 사용
• 최상위 제목으로 <h1> 사용
• 순서가 없는 목록으로 <ul> 과 <li> 사용
• 내비게이션에 <nav> 사용

시멘틱 마크업 장점

• 검색 엔진이 시맨틱 태그를 중요한 키워드로 간주하여 **검색엔진 최적화(SEO)**에 유리하다.
• 가독성이 좋다.