[HTML] Semantic Tag (Semantic Markup)

정리해보기

 

Semantic Tag

포함된 콘텐츠의 특정 의미를 정의하고, 목적을 갖는 태그다. 

기존 HTML <div> 태그 기능과 마찬가지로 block element이면서 사이트 구조(레이아웃)를 설계하기 위해 존재한다. 

 

<main> <header> <footer> <article> <section> <nav> 

 

태그에 의미를 부여해 구조를 파악하기 쉽게 함. 

이전에는 구조 구분을 위해 태그에 id나 클래스 등으로 구조를 설계했으나, HTML5에서는 시맨틱 태그의 등장으로 좀 더 명시적이며 직관적인 구조 설계가 가능해졌다

https://seo.tbwakorea.com/blog/what-is-semantic-tag/

 

naver 뉴스 시맨트 태그 살펴보기

 

메인 홈이랑 기사 페이지에 작성되어 있는 시맨틱 구성? 이 좀 다르다고 느꼈다. 
메인 홈은 section으로 header, main, aside 전부 분리되어 있었는 반면에 기사 페이지에는 section은 없었고 그냥 div로 되어 있는 부분이 많았음. 상위 요소에서 뭔가 처리되어 있는것 같다. 

---

시맨틱 태그 요소의 종류

https://seo.tbwakorea.com/blog/what-is-semantic-tag/

• 각 콘텐츠의 의미와 목적에 따라 적절한 태그를 부여해야 한다.
• 계층적으로 명확하게 구조를 형성할 수 있도록 사용되어야 하며,
• 스타일이나 스크립팅 목적의 경우를 제외하고는 <div> 와 같은 의미없는 요소나 속성을 사용하지 않아야 한다

<article>
독립적인 글을 다루는 데 사용된다. 블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠를 정의한다.

 

<asicde>
옆에 위치하는 콘텐츠를 담는 태그로, 페이지 콘텐츠를 제외한 콘텐츠를 정의한다. 사이드바

 

<details>
사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그. 사용자와 상호작용이 가능하다는 점이 특징이며, 버튼을 이용해 열고 닫을 수 있다. 

 

<footer>
문서 또는 섹션의 바닥글을 지정하며, 문서 아래쪽에 위치한다. 연락처 정보, 사이트 맵, 웹 사이트를 하나로 묶고 SEO를 강화하는데 도움이 되는 소셜 미디어 사이트에 대한 링크 같은 추가 링크가 포함된다. 

 

<header>
문서나 섹션의 머릿글을 지정하며, 로고, 탐색, 제목 및 기타 소개 정보가 포함된 페이지 상단 부분을 정의. 메타 태그 정보, 키워드, 가져온 CSS 파일이나 스타일 시트도 포함되기도 함. 

 

<main>
메인 내용을 담는 태그로, 웹 사이트의 텍스트 본문이나 콘텐츠를 나타낸다. 
<main> 태그는 유일해야 하고, article, aside, footer, header, nav 등 모든 페이지의 태그 앞에 온다.

 

<nav>
웹 사이트의 메뉴, 탭, 탐색 경로 등 탐색 링크가 포함된 페이지 부분. 

 

<section>
문서의 부분을 의미하는 태그로, 기본 콘텐츠 내 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹 정의. <section> 안에 <section>을 넣을 수도 있고 <article>을 이용해 내용을 넣을 수도 있다. 

 

---

 

시맨틱 태그의 이점

1) 접근성 향상

페이지 접근성이 향상된다. html 시맨틱 태그 요소는 사람들이 웹페이지를 탐색하고 페이지와 상호 작용하는 데 도움이 되는 화면 판독기, 키보드 또는 음성 명령같은 보조 기술에 대한 유용항 정보 및 단서를 제공한다. 
ex) <nav>의 경우 콘텐츠 탐색 링크가 포함되어 있고 <article> 는 독립형 콘텐츠가 포함되어 있음을 알 수 있다. 

 

2) SEO (검색엔진최적화) 향상

시멘틱 태그는 관련 키워드 및 문구에 대해 웹페이지를 최적화 하는데 도움이 되어 SEO에 도움을 준다. 더불어 웹 페이지 성능과 속도를 향상시켜 이탈률을 줄이고 전환율을 높이는 데 도움이 된다. 

 

검색 엔진에 풍부하고 구조화된 데이터를 제공할 수 있으며, 이는 더욱 매력적이고 유익한 스니펫 결과를 만들어 낸다.

* 스니펫 : 재사용이 가능한 작은 단위로 SEO에서 사용되는 단어이다. 

 

3) 가독성 향상

사람들이 콘텐츠를 더 쉽고 빠르게 이해하고 소비할 수 있게 된다. 시맨틱 태그는 콘텐츠의 명확하고 일관된 흐름과 구조를 만드는데 도움이 된다. 

 

또, 제목과 키워드, 요약 등 콘텐츠의 가장 중요하고 관련성 높은 부분을 강조할 수 있고 

불필요하거나 중복되는 코드를 피하는데 도움이 된다. => ?왜?

 

 

 

[시멘틱 태그]

시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점

 

[스니펫이란]

스니펫 (snippet) 이란?