[HTML] 시맨틱 태그 (Semantic Tag)란? [3/12 Study]

시맨틱 태그 (Semantic Tag)란?

:우선 시맨틱(Semantic)이란 단어는 무엇일까? 시맨틱 단어 그 자체에는 ‘의미의, 의미론적인’ 라는 뜻이 담겨있습니다.

이로 유추해보았을 때, 시맨틱 태그는 태그 내용에 의미를 부여하는 태그라고 할 수 있습니다. 시맨틱 태그는  웹 페이지에 보이는 것 이상의 정보를 제공합니다.

 

:시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그입니다.

시맨틱 태그의 요소로는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재합니다. 이러한 시맨틱 태그 요소는 콘텐츠를 섹션으로 구성하고 각 부분의 역할과 기능을 전달하는 데 도움이 됩니다.

 

HTML5에서는 시맨틱 태그의 등장으로 좀 더 명시적이면서 직관적인 구조의 설계가 가능해진 것 입니다.

시맨틱 태그 종류

 

<header>

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

 

<nav>

: <nav> 태그는 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의합니다. <nav> 태그를 사용하면 탐색 링크용으로 지정된 사이트의 특정 섹션을 구성하는 데 도움이 됩니다. 

 

<main>

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

 

<article>

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

 

<figure> 

: <figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다.

 

<section>

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

 

<aside>

<aside> 태그는 옆에 위치하는 콘텐츠를 담는 태그로, 페이지 콘텐츠를 제외한 콘텐츠를 정의합니다. 주로 문서에서 사이드바를 놓기 위해 사용합니다. 

 

<footer>

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

​

 

---

시맨틱 태그의 이점 3가지

1. 웹 접근성(Web Accessibility) 향상

: 일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는

웹 접근성과 사용성을 향상시켜준다.

 

2. 검색 최적화(SEO)(Search Engine Optimization)에 유리

: 검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어

검색 결과의 노출에 유리할 수 있게 해준다.

 

3. 가독성 향상

: 시맨틱 태그를 사용하면 웹페이지의 가독성 또한 향상됩니다. 즉, 사람들이 콘텐츠를 더 쉽고 빠르게 이해하고 소비할 수 있게 됩니다.

시맨틱 태그는 콘텐츠의 명확하고 일관된 흐름과 구조를 만드는데 도움이 됩니다. 

 

 

 

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

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

위 블로그를 참조하면서 블로그를 작성하였고 공부했음

 

 

🔥 마무리

시멘틱 태그를 안쓰면 섹션을 구별 못하기에 꼭 써서 구별해줘야 코드 읽기에 편하고 다른 사람이 보더라도 바로 이해가 될 것 같아서 가독성이 향상된다는 부분에서 중요한 내용인 것 같다!

갈길이 멀어서 이 부분은 꼭 나중에 다시 봐야겠다 화이팅😠