시맨틱 마크업(Semantic Markup)
시맨틱 마크업
시맨틱(Semantic)이란 "의미론적인" 의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 태그가 가 지고 있는 의미에 맞게 사용하는 것으로 CSS스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다.
즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖틑 것이기 때눔에 시맨틱 마크업에 적합하지 않은 것이다
시맨틱 마크업을 사용하면
- 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
- 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
- 단순한 <div> , <span> 으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋다.
실무에서 시맨틱 마크업이 완벽하게 쓰이는 것은 이상적이긴 하지만, 이러한 특징들을 고려하고 웹사이트를 구성하는 것이 많은 측면에서 바람직하다.
🔴 전체 <body>구성시 상당부분은 <header>태그, 메인이 되는 부분은 <main>태그, 하단의 <footer>태그 사용이 기본
🔻 <aside>태그는 옆에 위치하는 콘텐츠를 담는 태그로, 페이지 콘텐츠를 제외한 콘텐츠를 정의합니다. 주로 문서에서 사이드바를 놓기 위해 사용
🔻 <main>태그 내에서 부분을 나눌 때 <section>태그를 사용한다.( =페이지의 주요 콘텐츠를 통틀어 둘러싸려면 <main>을 사용, 페이지를 여러 주제나 하위 제목 등 목록을 형성하려면 <section>을 사용)
<main> 태그는 문서에서 유일해야 하고, <article>, <aside>, <footer>, <header>, <nav> 등 모든 페이지의 태그 앞에 위치한다.
<section> 태그는 문서의 부분을 의미하는 태그로, 기본 콘텐츠 내의 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹을 정의한다. <section> 안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣을 수도 있다.
🔻 <details> 태그는 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그로 사용자와 상호작용이 가능하다는 점이 특징이며, 사용자는 버튼을 통해 열고 닫을 수 있다. 기본적으로 닫은 상태에 있고, 클릭하면 내용이 보이면서 확장되는 성질을 가진다.
추가로, <details> 태그와 함께 쓰이는 <summary> 태그는 <details> 에서 보이는 부분을 담당합니다. <summary> 태그는 <details> 태그의 첫 번째 하위 항목이어야 한다.
🔻<figure>태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정한다. <figcaption>태그는 <figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용한다.
‘Caption’이라는 단어 자체가 이미지에 대한 간략한 설명을 의미하는 만큼, <figcaption>은 <figure>에 대한 간략한 설명이다.
<nav>는 GNB등 네비게이션 메뉴를 묶을 때 주로 사용하며, 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의 한다. 보통 <ul>, <ol>, <li>태그와 함께 사용한다.
성공적인 웹사이트를 개발하려면 액세스 가능하고 업데이트된 탐색 섹션이 필요하다. 어떤 종류의 웹 사이트를 구축하든 사용자가 웹사이트를 적절하게 탐색할 수 있도록 탐색 링크를 추가해야 한다. <nav> 태그를 사용하면 탐색 링크용으로 지정된 사이트의 특정 섹션을 구성하는 데 도움이 된다.
GNB란, Global Navigation Bar의 약자로, 웹사이트 전체에 동일하게 적용되는 내비게이션 바를 의미
<article>은 독립적으로 보여줄 수 있는 문서나 글을 묶는 단위이며, <section>은 문서 내에서 관련된 주제로 묶은 영역 단위이다.
화면에 보이는 결과는 같지만 태그에 차이가 있다.
<b>, <i>, <u>, <s>는 단순히 시각적으로 그렇게 보이게 만들 뿐이지만 <strong>, <em>, <ins>, <del>은 의미적으로 정보를 전달한다.
동작 / 기능 / 액션을 담당할 떄는 <button>태그를 사용, 단순 페이지를 이동할 때는 <a>태그를 사용
🔗참고🔗
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/html/semantic.md
https://seo.tbwakorea.com/blog/what-is-semantic-tag/