far

[HTML] 시맨틱 태그와 사용하는 이유 본문

HTML, CSS

[HTML] 시맨틱 태그와 사용하는 이유

Eater 2023. 3. 13. 22:12

시맨틱(Semantic) 태그

시맨틱 태그란 HTML5에 처음 등장한 문법으로 말 그대로 의미가 있는 태그라는 뜻이다. 헤더, 네비게이션, 푸터, 섹션 등과 같이 이름만 봐도 어디에 사용하는 태그인지 쉽게 이해할 수 있게 해준다.

 

 

시맨틱 태그를 사용하는 이유

<div>만 사용해도 똑같은 레이아웃을 만들 수는 있지만 시맨틱 태그를 꼭 사용해야 하는 세가지 이유가 있다.

 

1. HTML문서의 가독성을 향상시켜 유지보수가 편해진다.

HTML문서를 전부 <div>로 만들어버린 경우 한눈에 영역을 파악하기 어렵다. 그러면 당연히 문서가 커질수록 유지보수가 어려워지고 협업을 할 때 불편함이 있을 수 있다. 하지만 시맨틱 태그를 사용하면 헤더, 네비게이션, 푸터 등의 영역을 쉽게 파악할 수 있어 유지보수나 협업이 수월해진다.

 

2. 검색엔진 최적화(SEO)에 유리하다.

검색엔진이 검색을 수행하기 위해 웹 크롤링을 할 때 HTML내의 태그를 분석해준다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 웹 사이트의 정보를 수집하는데 기본적으로 컨텐츠의 구조를 이해하지는 못한다. 그래서 각 구조의 텍스트에 의미를 부여해주어 중요도 차이를 인식시켜야 하는데, 이 역할을 시맨틱 태그가 해준다.

 

3. 브라우저가 HTML만 보고 영역을 쉽게 파악할 수 있다.

웹 브라우저가 HTML을 보고 header, main, footer 등을 쉽게 알 수 있다. 이는 웹 접근성 측면에서 중요하게 사용되는데, 특히 시각장애인들이 웹을 이용할 때 사용되는 스크린 리더기 등의 서비스에 활용된다.

 

 

시맨틱 태그의 종류

www.w3schools.com

 

<header>

보통 레이아웃의 최상단에 위치하며 사이트의 로고와 제목이 들어간다. <header>내부에는 검색창이나 내비게이션 등이 들어갈 수도 있다.

 

<nav>

내비게이션 표현을 위한 태그로 현재 페이지 내의 문서나 다른 페이지로의 문서를 연결하는 링크들의 모음을 나타낸다. <nav>태그는 본문 위치에 영향을 받지 않아 <body>태그 내부 어디든 사용이 가능하다.

 

<main>

페이지의 메인 컨텐츠를 나타낼 때 사용하며, 한번만 사용되어야 한다. 해당 문서의 주요 내용이 작성되며 반복되는 컨텐츠가 들어가서는 안된다.

 

<section>

여러가지 컨텐츠들을 그룹을 묶어주는 역할이다. <section>은 일반 요소 컨테이너로 사용하면 안되기 때문에 단순 스타일링이 목적이라면 div를 사용하는 편이 좋다.

 

<article>

웹 페이지 상에서의 실제 내용을 의미한다. 게시글이나 댓글, 신문기사 등 태그를 적용한 부분만 독립적으로 배포하거나 재사용 하더라도 컨텐츠로서의 기능을 한다면 <article>태그 사용 조건이 충족된다.

 

<aside>

주요 내용과 간접적으로 연관된 부분이다. 예를들면 블로그의 사이드바 같은 것들

 

<footer>

보통 레이아웃의 최하단에 들어가는 부분이다. 저작권 관련이나 간단한 정보, 연락처 등이 들어간다.

 

<details>

열림 상태일 때 내부 정보를 보여주는 공개 위젯을 생성한다. <summary>태그와 함께 사용해 접은글을 만들 수 있다.

 

<summary>

요약이나 레이블이 들어가며, <details>태그 내부에 작성된다.

<details>
	<summary>
	요약 및 레이블
	</summary>
	<p>펼쳤을 때의 내용</p>
</details>

 

<hgroup>

제목과 부제목을 묶어서 나타낸다.

 

<address>

말 그대로 연락처 정보를 나타낸다.

 

<mark>

연관성을 가진 텍스트를 의미하며, 노란색으로 형광펜을 칠한 것 처럼 된다. p태그나 span태그 내부에 사용해야한다. 참고로 중요한 텍스트는 <strong>을 사용해준다

 

<time>

시간을 나타내는 텍스트이다. 날짜나 시간을 봇이 읽을 수 있는 방식으로 인코딩한다.

 

<meter>

범위(min, max)를 설정하고, 해당 값이 어느 정도인지 bar 형태로 알려주는 태그이다.

 

<progress>

meter와 비슷하지만, progress는 작업의 진행 정도를 나타낸다.

 

<figure>

img태그와, img 태그의 이미지에 시각적인 설명을 추가하는 <figcaption>태그를 묶어 놓는 태그이다.

 

 

 

더 자세한 내용은

https://developer.mozilla.org/ko/docs/Glossary/Semantics

 

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼

developer.mozilla.org

'HTML, CSS' 카테고리의 다른 글

[UI] 레이아웃 시프트(Layout Shift)에 대해서  (0) 2024.08.19
[CSS] pre태그 텍스트 영역 초과 현상 해결하기  (0) 2023.04.06
[CSS] 다크 모드 적용하기  (0) 2023.04.05
[CSS] 캐스케이딩(Cascading)과 상속  (1) 2023.03.24
[TailwindCSS] Tailwind의 커스터마이징  (0) 2023.03.17
'HTML, CSS' Related Articles more
Comments