안녕하세요 성조입니다.
올바른 지식을 공유할 수 있도록 노력하고 있습니다. 혹여나, 잘못된 지식이 전달된다면 언제든지 댓글로 피드백 주시면 감사드리겠습니다!
시맨틱(Semantic) 태그란?
결론부터 말하면 웹 페이지의 의미론적 구조를 명시적으로 나타내는 것이다.
즉, HTML을 설계할 때 태그들이 무엇을 의미하는 것인지 브라우저 또는 봇에게 명확하게 알려주기 위해서 사용되는 것이다.
시맨틱 태그를 잘 활용하여 HTML을 설계하는 경우. 검색 엔진 최적화(SEO)에 도움 될 뿐 아니라, 웹 표준 규격을 준수하여 웹 접근성을 향상할 수 있다. 정리 정돈이 잘 되어있어서 스타일링 작업도 쉽게 할 수 있게 된다.
시맨틱(Semantic) 태그 정리
1. <header> 태그
이 태그는 웹페이지의 헤더 부분을 정의하는데 로고, 타이틀, 탐색 링크, 내비게이션 메뉴 등 주요 정보가 위치하는 곳이다.
여러 <header> 요소가 웹페이지에 있을 수 있지만 가능하면 <body>, <article>, <section> 태그 들에는 하나의 <header> 요소만을 포함하는 것을 권장한다. 굳이 <body> 태그와 같은 태그에 여러 개의 중복되는 <header> 태그를 넣을 필요는 없다고 생각한다.
2. <nav> 태그
웹 페이지의 탐색 링크를 담는 부분으로 활용되며, <nav> 태그의 경우. 대부분 <header> 또는 <footer> 태그 내부에 위치한다.
3. <main> 태그
웹 페이지의 주요 콘텐츠를 정의하는데 활용된다. 이 태그 내부의 콘텐츠는 웹페이지의 고유한 정보를 담고 있어야 하며, 헤더, 푸터, 내비게이션과 같은 반복적인 콘텐츠는 포함하지 않는다.
<main> 태그의 경우 각페이지에 하나의 요소만 포함되는 것을 권장한다.
4. <article> 태그
독립적인 콘텐츠를 담는 영역을 정의할 때 사용한다.
뉴스 기사, 인터넷 사이트 게시물, 블로그 포스팅 등의 독립적인 콘텐츠들이 이 영역으로 해결하는 것을 권장한다.
<article> 요소는 일반적으로 자체적인 의미를 가지고 있으며, 문서나 사이트의 나머지 부분과 분리되어 활용되는 것이다.
5. <section> 태그
일반적인 섹션을 정의하는데 웹 페이지 하나의 부분 그룹으로 보면 좋을 것 같다.
콘텐츠의 그룹을 형성하며, 일반적으로 자체 제목을 가진다.
<section> 태그 내부에는 <article>, <aside>, <header>, <nav>, <footer>등의 태그들이 함께 들어간다.
6. <aside> 태그
주요 콘텐츠와 간접적으로만 연관된 연관 콘텐츠를 담는 영역을 정의할 때 사용한다.
사이드바, 메뉴 바, 광고, 주석 등이 여기에 해당된다.
7. <footer> 태그
웹 페이지의 푸터를 정의하는데 맨바닥에 거의 주로 자리 잡는다.
일반적으로는 저작권 정보, 작성자 정보, 연락처 정보, 회사 정보, 사이트 맵, 다른 페이지로 링크 이동 등을 포함한 내용들이 이 태그에 들어간다. 많은 내용을 포괄하고 있는 만큼. <body>, <article>, <section> 섹션들에서 footer는 최소한의 요소만 포함되는 것을 권한다. <body> 태그는 기본 태그로 활용하기 때문에 사실상 섹션 태그 또는 아티클 태그에 포함하는 것이 아니라면 푸터 태그는 로딩될 때 헤더 태그와 동일하게 하나만 나올 수 있도록 하자.
8. <figure> 태그
일반적으로 이미지, 일러스트, 차트, 코드 블록 등의 독립적인 콘텐츠를 표현한다.
9. <figcaption> 태그
<figure> 요소 태그의 설명이나 캡션을 제공한다.
10. <time> 태그
읽을 수 있는 시간이나, 기계가 읽을 수 있는 형식으로 내용을 제공한다.
11. <mark> 태그
실 사용자가 주목받아야 하는 텍스트를 강조하기 위해서 사용된다. 하이라이트 처리.
12. <summary> 태그
숨겨진 콘텐츠 블록을 제공하고, 사용자가 원하는 경우에 볼 수 있도록 접은 글과 같은 콘텐츠 내용들을 담는 것을 말한다. <details> 태그같이 숨겨진 내용을 담는 태그와 함께 <summary>라는 제목으로 사용된다.
이 외에도 더 디테일하게 많은 의미를 가지는 태그들이 존재할 것이다. 더 자세한 것이 궁금하다면 표준 사이트를 찾아서 학습하기를 권장한다. 하지만 HTML의 경우 많은 웹 사이트들이 사용하는 대부분 사용하는 또는 사용했던 태그들을 위주로 사용하기 때문에 너무 방대하고, 디테일하게 한다면 기술적으로 향후에 마이그레이션 하는 단계에서 어려움을 겪을 수 있는 부분도 주의하자.
부족한 포스팅이지만 읽어주셔서 감사드립니다.
오타나 문제가 있는 사항, 모르는 부분이 존재하면 언제든지 댓글 남겨주시길 바랍니다.
다음 포스팅 때 뵙겠습니다!
- 참조 -
https://html.spec.whatwg.org/multipage/dom.html#semantics-2
HTML Standard
html.spec.whatwg.org
https://www.w3schools.com/html/html5_semantic_elements.asp
HTML Semantic Elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'Web Basic > HTML' 카테고리의 다른 글
| [HTML] 5. 작성 태그와 인용 태그 정리 (2) | 2022.09.23 |
|---|---|
| [HTML] 4. 요소(Elements) 와 속성(Attributes) (0) | 2022.04.13 |
| [HTML] 3. 태그 (0) | 2022.03.05 |
| [HTML] 2. HTML 기본 용어와 구조 (0) | 2021.12.08 |
| [HTML] 1. 발달 개념 (0) | 2020.06.10 |
