✔️ 시작
HTML 공부를 하면서 의미 없는 div, span이 아닌 각 영역에 의미를 부여해 검색엔진, 유지보수 등 영역 구분에 도움이 되는 시맨틱 태그의 대해 알아 보려고 한다.
📍시맨틱
코드 조각의 의미를 나타낸다. HTML 요소가 가진 목적이나 역할이 무엇인지 파악
시맨틱 태그(의미 있는 마크업을 사용할 시)
- 검색 엔진은 의미 있는 마크업을 페이지의 겸색 랭킹에 영향을 줄 수 있는 주요 키워드로 간주한다.
- 불편을 겪고 있는 사람들에게 화면 판독기를 이용해 페이지를 탐색할 수 있다. (접근성)
- 의미 없는 div, span 보다 의미있는 태그로 작성할 경우 영역 찾기가 훨씬 좋다.
- 해당 영역의 데이터 유형을 파악하기 좋다.
📍시맨틱 태그 요소들
🔗 header
해당 페이지의 소개 및 탐색에 도움을 주는 콘텐츠 영역이다.
로고, 제목, 검색창, 네비게이션 등
페이지 상단
<!-- 페이지 상단 --> <header> <h1>logo</h1> <nav></nav> </header>컨텐츠 제목
<!-- 컨텐츠 제목 --> <article> <header> <h2>페이지 제목</h2> </header> <p> 페이지 내용 </p> </article>❗️
<h1>,<h2>,<nav>등의 요소를 배치한다.
🔗 footer
가장 가까운 구획 콘텐츠, 루드의 푸터를 나타낸다. 해당 사이트 구획 작성자, 주소, 저작권 정보 등
페이지 하단
<!-- 페이지 하단 --> <footer> <p>해당 사이트 정보</p> <address>해당 사이트 정보</address> <p>© 2023 JiEun</p> </footer>❗️
<address>등의 요소를 배치한다.
🔗 section
HTML 문서의 독립적인 구획을 나타낸다. 적합한 의미를 가진 요소가 없을 때 사용한다.
(제목을 포함하지만 항상 그런것은 아니라고 한다.)
<h1>상단 제목</h1> <section> <h2>제목</h2> <p>내용</p> </section>❗️point
- 요소의 콘텐츠를 외부와 구분하여 단독으로 나누는 것이 더 괜찮다면
<article>요소가 더 좋은 선택일 수 있다. (콘텐츠를 따로 구분할 필요가 있을 경우<article>요소를 고려해 봐야한다.)- 각각의
<section>을 구분할 수단이 필요하다. 주로 제목<h1>~<h6>요소를 자식으로 포함하는 방법이 있다.- 일반 컨테이너 요소로 사용하는걸 지양한다. 단순한 스타일링 목적인 경우
<div>요소를 사용해야 한다.
주로 문서 요약에 해당 콘텐츠가 논리적으로 표현해야할 경우<section>을 사용하는 것이 좋다.
🔗 article
문서, 페이지 또는 사이트 내부에서 독립적으로 구분해 배포하거나 재사용할 수 있는 영역을 나타낸다.
주로 게시판, 블로그 게시글, 뉴스 기사 등이 있다.
<article class="review"> <header> <h2>Ji Eun</h2> </header> <section class="main-review"> <p>Hi!</p> </section> <section class="user-review"> <article> <p> Hi! Ji Eun </p> <footer> <p>user info</p> </footer> </article> </section> </article>❗️point
- 식별하는 수단이 필요하다. 주로
<h1>~<h6>요소를 자식으로 포함시키는 방법이 있다.<article>요소가 중첩되어 있을 경우 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 컨텐츠를 나타낸다.
(블로그 게시글의 댓글은 글을 나타내는<article>요소 안에 중첩한<article>로 나타낼 수 있다.)<article>요소의 작성자 정보를<address>요소에 작성해 표시할 수 있으나 중첩 되는<article>에는 적용되지 않는다.
🔗 nav
문서 부분 중 현재 페이지 내부 또는 다른 페이지의 링크를 보여주는 영역이다.
주로 메뉴, 목차 등이 있다.
<nav> <ul> <li><a href="" title="">Home</a></li> <li><a href="" title="">About</a></li> <li><a href="" title="">Contact</a></li> </ul> </nav>❗️point
- 문서의 모든 링크가
<nav>요소 내부에 있을 필요가 없다.<footer>요소에<nav>에 들어지 않아도 되는 링크를 포함한다.- 하나의 문서에 여러 개의
<nav>요소를 가질 수 있다. 이럴 경우aria-laelledby를 이용해 접근성을 향상할 수 있다.- 신체에 장애가 있는 사용자를 위해 탐색 전용 콘텐츠를 제외할지를
<nav>를 참고해 결정한다.
🔗 main
<body>의 주요 콘텐츠를 나타낸다. 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠를 이룬다.
<main> <h1>...</h1> <p>...</p> <article> <h2>...</h2> <p>...</p> </artice> </main>❗️point
<main>요소의 영역에 들어가는 콘텐츠는 해당 문서의 유일한 내용이어야 한다. 사이드바, 검색 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함되며 안되나 페이지의 주요 기능인 경우 예외로 둘 수 있다.- 제목 요소와 달리
<main>은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용이다.
🔗 mark
현재 맥락에서 중요한 부분을 표시하는 요소이다.
<p> 안녕하세요. <mark>최지은</mark>입니다. <mark>프론트엔드</mark>를 목표로 성장 중입니다. 잘 부탁드립니다. </p>
❗️point
- 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 된다.
- 현재 검색한 키워드 등 강조 표시할 때도 사용할 수 있다. (문서 콘텐츠와 사용자의 현재 행동이 관련있는 부분을 표시할 때)
- 표시만을 위한 용도로 사용하지 않으며
<span>과 적절하게 사용한다.
<mark>,<strong>의 차이점
<mark>: 연관성을 가진 부분 (해당 영역이 형광펜 처럼 표시된다.)<strong>: 중요도를 가진 부분 (해당 영역의 폰트가 굵어진다.)
mark::before { content: "[강조 시작]"; } mark::after { content: "[강조 끝]"; }스크린 리더는 기본값에서
mark요소를 표현하지 않으나CSS의content속성의::before,::after를 이용해 읽게할 수 있다.
✏️ 마치며
시맨틱 태그는 주관적으로 작업하는 사람이 어떻게 사용하느냐에 따라 달라지는거 같다. 이렇게 게시물에 작성을 하면서 한 번 더 이해하려고 한다.
해당 태그 말고도 여러 태그가 존재하나 그중 내가 봤을 때 자주 보이고 사용되는 태그를 정리했다.
몇몇 태그는 이해가 됐지만 아직도 혼돈이 오는게 몇 가지 있다.
코드를 작성하면서 이해하는 방법도 있지만 잘 되어있는 사이트를 관리자 모드로 확인하면서 분석해봐도 좋을 것 같다.
참고 사이트
🔗 https://developer.mozilla.org/ko/docs/Glossary/Semantics
mdn 사이트에서 각 영역별로 정리가 잘 되어있어 해당 사이트를 보며 정리했다. 어떤 영역은 그대로 작성한 부분도 있다.
혹시 문제가 되는 부분이 있을 경우 말씀 부탁드립니다. 감사합니다 :)
