🌱 Semantic Markup( 시맨틱 마크업 )
- 시맨틱 (semantic) : '의미와 관련된', '의미론적인' 이라는 뜻으로, 마크업에 의미를 부여하는 것을 말합니다. 의미를 가진 요소 혹은 요소의 내용·의미에 관련된 마크업으로, 시맨틱 요소를 사용하여 코드의 일부를 보고도 해당 코드의 목적이나 역할을 알 수 있게 하는 것을 말합니다.
- div 태그와 기능은 완전히 같지만, 영역을 의미있게 나눌 때 사용합니다. 따라서 작성자의 의도가 중요합니다.
- Semantic Web (시맨틱 웹) : 웹페이지를 '의미'와 '관련성'에 따라 하나의 데이터베이스로 만드는 방식입니다.
☀️ 사용해야 하는 이유
-
다른 컴퓨터나 google 같은 크롤러 프로그램에서 크롤러가 마크업을 빠르게 읽어 더 쉽게 코드를 알아보도록 다른 애플리케이션이나 코드와 더 잘 융합되도록 합니다.
-
SEO(검색 엔진 최적화, Search Engine Optimization)은 시맨틱 요소가 필수입니다. 중요한 키워드로 고려해 검색 결과에서 노출될 가능성을 높여줍니다. 검색 엔진이 사이트의 내용을 더 꼼꼼하게 파악할 수 있도록 head 태그 안에 meta 태그를 꼼꼼하게 작성하고 시맨틱 태그로 작성하는 것이 좋습니다.
-
여러 개발자가 함께 작업할 때
<div>요소를 탐색하는 것보다 시맨틱 코드 블록을 찾는 것이 더 편리하고, 요소 안에 채워질 데이터 유형을 예측하기가 쉬워 개발자 간에 소통이 용이하고, 후에 개발자 스스로가 유지보수를 위해 코드를 볼 때도 용이합니다. -
웹 접근성(Web Acessibility, A11y)을 위해서도 시맨틱 태그를 사용하는 것이 좋습니다. 스크린 리더(화면을 읽어주어 시각장애인들이 웹을 사용가능케 하는 서비스)를 쓰는 사람들에게 화면 구조에 대한 정보를 전달할 수 있어서 콘텐츠를 정확하게 전달할 수 있게 됩니다. 이를 통해 장벽 없는(Barrier-Free) 인터넷을 만드는 데 중요한 역할을 합니다.
☀️ 시맨틱 요소
시맨틱 요소는 content의 의미를 명확히 설명하는 태그들입니다.
🌿 vs. Non-Semantic Element
div,span은 대표적인 제네릭 컨테이너입니다. 이런 태그는 어떤 내용을 가지고 있는 지 설명하고 있지 않습니다.
<header>
: 소개 및 탐색에 도움을 주는 내용을 포함하는 부분으로 페이지나 섹션의 가장 윗부분에 위치합니다. 보통은 사이트의 제목, 로고, 선택적으로 상단바나 검색창 등이 들어갈 수 있습니다.
<nav>
: 내비게이션의 약자로, 상단바 등에 사이트의 안내 요소로 현재 페이지 내의 또는 다른 페이지로의 링크를 보여주는 구획입니다. 보통 메뉴, 목차, 색인 등에 사용됩니다. → <li>, <ol>, <ul> 를 사용해 목록형태로 사용됩니다.
<main>
: 문서 혹은 <body>의 주된 콘텐츠 영역으로 문서의 핵심 주제나 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다. main 태그는 한 페이지에 딱 한번만 사용할 수 있습니다.
<section>
: 구체적인 시맨틱 의미가 없는 제네릭 요소 중 하나지만 div보다는 시맨틱합니다. HTML 문서의 독립적인 영역으로, 보통 <h1> 태그와 문단 한·두개 등을 포함하는 것이 일반적입니다.
<article>
: 문서 내의 독립적이고 자체 포함된 콘텐츠를 지정하여 독립적으로 배포하거나 재사용할 수 있는 구획을 나타냅니다. 그 자체로 의미를 가지는 웹 사이트 부분으로 게시물, 기사, 글, 댓글 등이 있습니다.
<aside>
: 본문의 주요부분을 표시하고 남은 부분을 설명하는 요소로 (중요하지 않은 부분), 반드시 있어야 하는 구성요소는 아니고, 간접적으로 연결된 내용으로 사이드바나 콜아웃 상자로 사용됩니다.
<mark>
: 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
<time>
: 인라인 요소로, 시간·날짜를 의미하는 내용을 감싼다. 시간의 특정 지점 또는 구간을 나타낸다. datatime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 떄 사용할 수 있습니다. 24시간 표기법의 시간, 그래고리력, 유효한 시간 범위를 나타낼 수 있습니다.
<figure>
: 이미지와 이미지에 대한 설명을 묶어 놓은 영역을 묶을 때 사용합니다.
<footer>
: 가장 가까운 구획 컨텐츠나 구획 루트의 푸터를 나타낸다. 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 나타낸다. 페이지나 파트 가장 아랫부분에 위치하고, 작성자정보, 저작권데이터, 사이트의 주소, 연락처 등의 내용을 넣습니다.
🌿
<section>과<div>
<section>: 주제별 콘텐츠를 그룹화한 것으로 일반적으로 요소의내용이 문서의 개요에 명시적으로 나열되는 경우에만 해당 요소가 적합합니다.
<div>: 의미없는 자식요소로 속성과 함께 사용하여 공통적인 의미체계를 표시할 수 있습니다. 구역을 구분하기 위해 사용되는 것은 지양되고, 다른 요소가 적합하지 않은 경우 최후의 수단으로 쓸 것이 권장됩니다. 스타일지정목적이나 스크립팅 편의를 위해서만 요소가 필요한 경우 사용합니다.
👀 Reference
