[HTML] Semantic Element

안녕하세요! 이번 포스팅에서는 시멘틱 요소에 대해 알아보려고 합니다.

 

프로그래밍에서 시맨틱은 주로 코드 블록(조각)의 의미를 나타내는데요!

HTML에서는 똑같은 역할을 수행하는 요소들이 많지만 시멘틱 요소를 부여함으로 이 요소의 목적이나 역할을 금방 알 수 있게됩니다.

 

예를 들면 div, header(머리말), main, footer(꼬리말)은 비슷한 역할을 수행하지만 웹 페이지를 구성할때 div, div, div를 사용하는 것보다는

header, main, footer을 사용하는 것이 좀 더 깔끔하고 각 요소가 무슨 뜻인지 알 수 있어서 코드 수정에 용이할 것 같지 않나요?

 

이처럼 코드 수정 및 확인에 용이하다는 장점 말고도 시멘틱 마크업을 사용하면 다음과 같은 장점이 존재합니다.

 

• SEO, 검색 랭킹에 영향을 줄 수 있는 키워드로 간주
•  Screen-reader를 사용할 때 장점
• 크롤링 시 끊임 없는 div들을 탐색하는 것보다, 의미 있는 시멘틱 요소를 찾는 것이 쉬움
• 본인 및 다른 개발자에게 코드 확인이 수월함

 

시멘틱 요소들은 100여 가지가 넘게 존재하지만 자주 사용하는 요소들 위주로 살펴보면 다음과 같습니다.

 

• <article> : 기사 요소
• <aside> : 사이드바 요소
• <details> : 디테일 요소
• <footer> : 꼬리말 요소 (사이트맵, 연락정보, 저작권, 연관 문서 등등)
• <header> : 머리말 요소
• <main> : 메인 요소
• <nav> : 네비게이션 요소 (네비게이션 링크)
• <section> : 섹션 요소
• <summary> : 요약 요소
• <time> : 시간 요소