[2강] 검색 엔진이 좋아하는 글쓰기! 시맨틱 태그(Semantic Tags) 활용법
"의미 있는 태그로 웹사이트의 가치를 높여보세요."
안녕하세요! 지난 1강에서는 HTML의 기본 구조를 배웠습니다. 오늘은 단순히 화면에 보여주는 것을 넘어, 검색 엔진(네이버, 구글 등)이 내 글을 더 잘 이해하도록 돕는 '시맨틱 태그(Semantic Tags)'를 알아보겠습니다.
1. 시맨틱 태그란 무엇인가요?
'시맨틱(Semantic)'은 '의미론적인'이라는 뜻입니다. 즉, 태그 그 자체에 의미를 담아 브라우저와 검색 로봇에게 이 부분이 어떤 역할을 하는지 명확히 알려주는 태그를 말합니다.
✅ 비시맨틱 태그: <div>, <span> (내용의 의미를 알 수 없음)
✅ 시맨틱 태그: <header>, <nav>, <footer> (태그만 봐도 역할을 알 수 있음)
2. 주요 시맨틱 태그의 종류
웹사이트의 주요 구조를 잡을 때 사용하는 대표적인 태그들입니다.
- 🚩 <header>: 사이트의 로고, 제목, 상단 메뉴가 들어가는 영역
- 🧭 <nav>: 다른 페이지로 이동하는 링크 모음 (내비게이션)
- 📄 <main>: 해당 페이지의 가장 핵심적인 본문 내용
- 📰 <article>: 독립적인 포스팅, 뉴스 기사, 블로그 글 영역
- 🧩 <section>: 문서 내의 주제별 구역 나누기
- 👣 <footer>: 저작권 정보, 주소, 하단 메뉴가 들어가는 영역
3. 시맨틱하게 구조 잡기 (실습)
아래 코드는 웹사이트의 표준적인 레이아웃 구조입니다. 단순히 <div>만 쓰는 것보다 훨씬 명확합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>시맨틱 구조 배우기</title> </head> <body> <header> <h1>나의 기술 블로그</h1> <nav> <ul> <li>홈</li> <li>소개</li> </ul> </nav> </header> <main> <article> <h2>HTML 2강: 시맨틱 태그</h2> <p>시맨틱 태그를 쓰면 SEO에 아주 좋습니다.</p> </article> </main> <footer> <p>© 2024 MyBlog. All rights reserved.</p> </footer> </body> </html>
SEO를 위한 첫걸음!
시맨틱 태그는 검색 노출(SEO)뿐만 아니라 웹 접근성 향상에도 큰 도움이 됩니다.
다음 3강에서는 페이지를 풍성하게 만드는 '이미지와 비디오' 활용법을 배울게요!
'Frontend > HTML' 카테고리의 다른 글
| [5강] 실전! HTML로 만드는 나만의 미니 포트폴리오 (0) | 2026.02.09 |
|---|---|
| [4강] 사용자 소통의 창구! Form 태그와 입력 양식 (0) | 2026.02.09 |
| [3강]텍스트와 멀티미디어! 생동감 있는 페이지 만들기 (0) | 2026.02.09 |
| [1강]웹 개발의 첫걸음! HTML 개념 이해와 기본 구조 마스터하기 (0) | 2026.02.09 |