시맨틱(Semantic) HTML이란?

시맨틱(Semantic) HTML 이란?

시맨틱(Semantic) HTML 은 번역하면 "의미의, 의미론적"이라는 뜻이다 즉 의미론적인 HTML이라는 것이다

시맨틱 태그와 그렇지 않은 태그

일반적으로 HTML 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알수 없다

하지만 시맨틱 태그를 보면 대략적으로나마 태그안에 들어갈 내용의 의미를 유추할 수 있다

시맨틱 태그

<header>
<footer>

시맨틱 하지 않은 태그

<div id="header">
<div class="footer">

HTML에서 새로 등장한 시맨틱 태그

 

• <article> : 글을 의미한다
• <aside> : 페이지 내용 주변에 있는 내용을 의미한다
• <details> : 사용자가 보거나 숨길 수 있는 추가적인 세부정보를 의미한다
• <figcaption> : <figure> 의 설명을 의미한다
• <figure> : 사진, 일러스트, 코드 같은 그 자체로 의미를 갖는 내용을 의미한다
• <footer> : 문서나 섹션의 꼬릿말을 의미한다
• <header> : 문서나 섹션의 머릿말을 의미한다
• <main> : 문서의 메인 컨텐츠를 의미한다
• <mark> :  마크되거나 하이라이트 된 글을 의미한다
• <nav> : 네비게이션 항목을 의미한다
• <section> : 문서의 section은 하나의 주제를 그룹화할때를 의미한다
• <summary> : <details>를 위한 제목을 의미한다
• <time> : 날짜나 시간을 의미한다

왜 시맨틱 태그를 쓰는 게 좋은가?

기존에는 <div> 태그 안에 id나 class 속성으로 개발자별로 각각의 이름을 지정하였기 때문에 검색엔진이 html 파일을 분석할 때 정확하게 콘텐츠를 분석하기 힘들고 다른 개발자가 보아도 한눈에 알아보기 힘들다 유지보수를 할 때에도 <header>나 <section> 등등 태그만 찾아도 빠른 확인이 가능하다