목표
- 시멘틱 마크업이 무엇인지에 대한 이해
- 시멘틱 마크업의 사용 이유 정리
- 시멘틱 마크업의 사용법 알기
시멘틱 마크업?(Semantic Markup)
시멘틱 마크업은 글자 그대로 해석하면, ‘의미론적인 HTML 태그 문서 작성’을 뜻합니다.
즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다.
그렇다면 이러한 방식은 왜 사용되는 것일까요?
시멘틱 마크업을 사용하는 이유
시멘틱 마크업을 사용함에 따라 얻을 수 있는 효과는 다음과 같습니다.
웹 접근성에 효율적
- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있기 때문입니다.
코드 가독성에 따른 유지 보수의 용이
- 끊임없는 div 들을 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것이 훨씬 쉽기 때문입니다.
검색엔진 최적화(SEO)에 유리
- 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하기 때문입니다.
해당 내용들에 따르면, 개발자는 시멘틱 마크업을 사용하지 않을 이유가 없는 것 같습니다.
그러면 이제 어떤 종류가 있는지 살펴보겠습니다.
시멘틱 마크업 종류
시멘틱 마크업 태그의 종류는 엄청 다양하지만, 주로 사용되는 태그에 대해서만 알아보도록 하겠습니다.
- header : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼 등의 요소가 포함될 수 있습니다.
- nav : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션을 말합니다. 메뉴, 목차, 색인 등에 사용됩니다.
- main : 문서
<body>의 주요 콘텐츠를 나타냅니다. - article : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분되는 요소에 사용됩니다.
- section : 일반적인 문서나 애플리케이션 영역을 표시합니다.
- footer : 바닥글, 문서 하단에 들어가는 정보로, 사이트의 제작자나 저작권 정보 등을 주로 표시
- aside : 좌측과 우측 사이드 위치의 공간을 의미하며, 주요 콘텐츠 이외의 참고가 될 수 있는 컨텐츠 표시
이외에도 다양한 태그들이 있으니, HTML elements reference를 참고해보세요.
글을 마치며
오늘은 시멘틱 마크업에 대해서 알아봤습니다. 의미가 담겨있는 태그인 만큼 의미를 정확히 알고 활용한다면, 좀 더 나은 웹 페이지를 구현할 수 있을 것 같습니다.
728x90
반응형
'Tech > HTML' 카테고리의 다른 글
| [HTML] HTML4와 HTML5의 차이 (0) | 2021.01.16 |
|---|---|
| [HTML] HTML? (0) | 2020.12.16 |