[HTML] 시맨틱 마크업( Semantic Markup ) 이란 무엇인가

시맨틱 이란 의미론적인 이란 뜻 이고, 마크업이란 마크업 랭귀지로 표현하는 것을 의미한다.

즉 마크업의 의미를 잘 전달되게 작성하는 것을 의미한다.

 

시맨틱 마크업의 각 태그의 용도는 다음과 같다.

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

만약 누군가의 코드를 봤는데 헤더 콘텐츠에 id 값이 Footer 거나 Titles 등 시맨틱 하지 않은 코드를 작성한다면, 한눈에 이 코드를 파악하기 어려울 것이다.

그래서 시맨틱 마크업의 특징 중 하나는 다른 사람이 보기에 가독성이 높고, 다른 개발자가 코드를 작성하더라도 쉽게 의미가 파악되니까 유지, 보수에도 편리하다.