프로그래밍에서 시맨틱은 코드 조각의 의미를 나타냅니다.
"이 HTML element가 가진 목적이나 역할은 무엇일까?"
다음의 두 코드는 화면상으로 동일하게 보입니다.
<h1>안녕하세요?</h1><div style="
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;">안녕하세요?</div>
하지만 두 코드를 같다고 말할 수 있을까요?
그 답은 "아니"입니다!
두 코드를 동일한 것처럼 보이지만, 사실 HTML에 스타일을 적용하여 입히는 것은 CSS의 역할이며
두 코드의 "의미"는 다릅니다.
하나는 최상위 제목을 의미하고 다른 하나는 그것이 아니라는 것이죠!
📌Semantic Tag란?
Semantic Tag는 의미를 지닌 태그를 의미합니다! Semantic 은 "의미론적인"이란 뜻의 형용사입니다.
개발자가 각 태그를 보고 해당 요소가 어떤 의미를 담았고, 어떤 역할을 하는지 쉽게 파악할 수 있도록 돕습니다.
그 외엔 어떤 이점이 있을까요?
💡Semantic Tag의 이점
- 검색 엔진 최적화 (SEO): 검색 엔진이 의미론적 마크업을 페이지의 검색 순위에 영향을 줄 수 있는 중요한 키워드로 간주합니다.
✔ 검색 엔진은 웹을 탐색하여 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 인덱스를 생성합니다.
우리가 검색 결과로 얻는 것이 바로 그 인덱스로 된 콘텐츠입니다!
일정한 규칙에 따라 진행되기에 내가 만든 웹사이트가 해당 규칙을 적용할 경우,
검색 결과의 최상위에 노출될 가능성이 올라갑니다! - 시각 장애인에게 친화적: 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 경우 semantic Tag를 안내판으로 사용할 수 있습니다.
- 쉽게 찾을 수 있음: 일반 태그로 구성된 깊은 계층 요소보다 semantic tag를 사용한 요소 블록을 찾는 것이 훨씬 쉽습니다.
- 개발자에게 태그 안에 채워질 데이터 유형을 제안해 줍니다.
💡Semantic Tag의 종류
<h1>,<h2><nav><section><button><a><img>
... 외에도 사용가능한 100개 정도의 Semantic Tag들이 존재합니다!
그럼 해당 Semantic Tag가 어디에 어떻게 사용되는지 확인해 볼까요?
Mdn 홈페이지를 예로 들어보겠습니다!
위 홈페이지는 다양한 Semantic tag로 구성되어 있습니다. 어떤 것들이 있을까요?
1️⃣ <h1>
<h1> - <h6>은 제목을 나타내는 요소입니다.
숫자가 작을수록 구획 단계가 높습니다.
✔ <h1> 이 최상위 제목입니다.
📌 또한, Mdn에선 제목 단계를 건너뛰지 말고 페이지당 하나의 <h1>만을 사용하라고 권장합니다!
위 사진에서도 Hero 부분에 큰 최상위 제목으로 사용된 것을 확인할 수 있습니다.
2️⃣ <nav>
<nav> 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다.
✔ 메뉴, 목차, 색인 등에 사용됩니다!
한편, 스크린 리더 등 장애를 가진 사용자를 위한 사용자 에이전트는 최초 렌더링에서 탐색 전용 콘텐츠를 제외할지 결정할 때 <nav>를 사용한다고 합니다.
위 사진에서도 navigation 부분에 사용된 것을 확인할 수 있습니다.
3️⃣ <section>
<section> 요소는 문서, 애플리케이션의 일반적인 섹션을 나타냅니다. 이 섹션은 특정 주제에 따라 묶인 콘텐츠 그룹을 의미합니다.
이 태그는 <article>, <nav> 등 섹션을 나타내는 더 정확한 의미의 요소가 없을 때, 논리적인 측면에서 주제별 컨텐츠 그룹을 나타내는 데 사용됩니다.
✔ 상품별 섹션, 소개, 뉴스 섹션 등으로 나눌 때 사용됩니다!
위 사진에서도 hero 섹션을 나누는 데에 사용된 것을 볼 수 있습니다.
4️⃣ <button>
<button> 요소는 클릭 가능한 버튼을 나타냅니다.
💡 해당 요소에는 다양한 특성을 지정할 수 있습니다!
클릭을 막는 disabled, <form> 요소와 연결하는 form 등이 있습니다.
5️⃣ <a>
<a> (앵커) 요소는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치 등으로 연결할 수 있는 하이퍼링크를 만듭니다.
💡 해당 요소에도 특성을 지정할 수 있습니다!
해당 링크를 현재 유지한 채/새 창에서 열기 등 여는 방법을 지정하는 target, 새 창에서 열 때 보안 취약점에 대비하여 사용하는 rel="noopener noreferrer 등이 있습니다.
🔎 현재 최신 브라우저(chrome, edge 등)에서는 target="_blank" 시 자동으로 noopener가 적용된다고 합니다!
위 사진에서 해당 Blog 요소를 클릭하면, 현재 페이지에서 mdn의 블로그로 넘어가게 됩니다.
6️⃣ <img>
<img> 요소는 문서에 이미지를 넣습니다.
해당 요소는 src와 alt가 거의 고정적으로 사용됩니다.
각각 포함하고자 하는 이미지의 경로, 이미지의 텍스트 설명을 지정합니다.
✔ JPEG, PNG, GIF, SVG 등의 미디어 형식을 지원합니다!
지금까지 mdn 홈페이지를 통해 Semantic Tag의 사용 예시를 살펴보았습니다.
검색 엔진 최적화 등 많은 이점을 위해 알맞은 Semantic Tag를 사용하여 개발하는 것이 중요할 것 같습니다!😊
참고: [ mdn - Semantics ],
[ mdn - SEO ],
[ mdn - 여러 Semantic tag들],
[ codingEveryday - HTML 태그 ]