[HTML] Sementic Tag 란?

📖 Sementic Tag란

시멘틱 태그(Sementic Tag)에서 Sementic의 사전적 의미는 "의미론적"이라는 뜻으로,

HTML에서 시멘틱 태그란 의미를 가지는 태그를 말한다.

 

가령 제목과 같이 큰 글씨를 나타낼 때 <h1> 태그를 사용하여 나타낼 수 있다.

<h1> 태그는 페이지 제목이라는 의미를 갖고 있다.

반면 <span> 태그에 style을 입혀 <h1> 태그와 동일한 스타일을 표시할 수 있다.

하지만 이것은 HTML 의미(Sementic)를 제대로 살리지 못한 것 이기 때문에 지양할 필요가 있다.

페이지 Layout을 만들거나 HTML 마크업을 할 때 최대한 의미있는 Sementic Tag를 사용하길 권장한다.

 

장점

1. 검색엔진 최적화
2. 웹 접근성 향상
3. 가독성 향상

---

📖 HTML Sementic Elements

• <header> : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다.
• <nav> : 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 내비게이션 링크로 구성된 섹션을 표현합니다.
• <aside> : 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있다.
• <main> : 문서의 body 요소의 주 콘텐츠(main content)를 정의할 때 사용한다.
• <section> : 문서나 응용프로그램의 일반적인 섹션을 표현한다.
• <article> : article은 여러가지 아이템들을 묶어 재사용 가능하게 그룹화 한다.
• <footer> : 주로 저작권 정보나 서비스 제공자 정보등을 나타내며 사이트 하단에 위치한다.
• <details> : 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타낸다.
• <summary> : 부모요소인 details요소의 내용에 대한 요약이나 캡션등을 나타낸다.
• <figcaption> : 부모요소인 figure요소의 내용들에 대한 캡션, 혹은 제목을 나타낸다.
• <figure> : 일러스트, 다이어그램, 사진, 코드등에 주석을 다는 용도로 사용된다.
• <mark> : 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트된 텍스트를 표현한다.
• <time> : 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜를 나타낸다.

---

📖 HTML5 시맨틱 태그 기반 페이지 레이아웃

일반적인 HTML 페이지에는 페이지 머리글, 바닥글 및 중간 페이지 콘텐츠가 있다. 

중간 페이지 콘텐츠 내에서 최상위 수준에는 탐색, 콘텐츠 및 3열이 있을 수 있다. 

확실히 콘텐츠 내에서 각 페이지의 특정 콘텐츠에 따라 더 많은 섹션을 포함할 수 있다.

 

위 그림은 이 최상위 페이지 레이아웃을 시각적으로 보여준다.

 

일반적으로 <header> 그룹은 소개 또는 탐색 보조 도구이다. 

• 일반적으로 헤더 요소는 섹션의 제목을 포함하기 위한 것이며 섹션의 목차, 검색 양식, 로고 등을 래핑할 수 있다.

 

맨 아래에 있는 <footer>는 일반적으로 누가 작성했는지,

• 관련 문서에 대한 링크, 저작권 데이터 등과 같은 섹션에 대한 정보를 포함한다.

 

페이지 중간에 있는 <nav> 요소는 다른 페이지 또는 페이지 내의 부분으로 연결되는 페이지의 섹션을 나타냅니다.

• 일반적으로 탐색 링크가 있는 섹션이다.

 

<aside> 콘텐츠가 옆 요소 주변의 콘텐츠와 접선적으로 관련되어 있는 경우 해당 콘텐츠와 분리된 것으로 간주할 수 있다.

• (예: 인용문 또는 사이드바, 광고 등).

 

페이지 레이아웃의 바로 중앙에 있는 <section> 은 논리적 또는 물리적으로 그룹화된 일반 콘텐츠를 포함한다.

• 문서 또는 응용 프로그램, 예를 들어 웹 사이트의 홈 페이지는 소개, 뉴스 항목, 연락처 정보에 대한 섹션으로 분할될 수 있다.

 

그리고 <article> 태그는 문서, 페이지, 응용 프로그램 또는 사이트에 독립적으로 배포될 수 있는 자체 포함된 구성이다. 

• 예: <article> 에는 포럼 게시물, 잡지 또는 신문 기사, 웹 로그 항목, 사용자가 제출한 댓글, 대화형 위젯 또는 가젯 또는 기타 독립적인 콘텐츠 항목이 포함될 수 있습니다.

 

 

---

본 내용은 유튜버 짐코딩님의 웹 개발 강의를 정리한 것 입니다. 하단 링크 참고해주세요!