시맨틱 HTML: 초보자를 위한 파트 1

Source: Dev.to

비‑시맨틱 예시

HTML을 처음 배우는 입장에서, 빠르게 동작하지 않는 여행 앱을 만들고 싶어 본문에 다음과 같이 작성했다고 가정해 보세요:

## Traveling App

## Easier to travel than ever

Book your flight today

©2026-2027 Traveling App All Rights Reserved.

이 마크업은 시맨틱하지 않으며 SEO 향상에 도움이 되지 않습니다.

시맨틱 버전 (Tailwind가 설치되어 있다고 가정)

## Traveling App

## Easier to travel than ever

Book your flight today

©2026-2027 Traveling App All Rights Reserved.

이 마크업은 시맨틱하며 SEO 개선에 도움이 됩니다.

왜 시맨틱 HTML을 사용해야 할까요?

• “ – 웹 페이지의 제목과 부제목을 포함합니다.
• “ – 페이지의 주요 콘텐츠를 감싸는 역할을 합니다.
• “ – 저작권 또는 라이선스 정보를 담고 있습니다.
• “ – 시맨틱 의미가 없는 일반 컨테이너이며, 다른 요소가 맞지 않을 때만 사용합니다.

적절한 시맨틱 요소를 사용하면 검색 엔진과 보조 기술이 콘텐츠의 구조와 목적을 더 명확하게 파악할 수 있습니다.