반응형
시맨틱 태그란 무엇일까요?
HTML 시맨틱 태그는 웹 페이지의 각 요소에 의미를 부여하는 태그입니다. 단순히 내용을 표현하는 것을 넘어, 해당 요소가 무엇을 의미하는지 명확하게 해줍니다.
예를 들어, <div> 태그는 단순히 내용을 감싸는 역할만 하지만, <header> 태그는 페이지의 머리 부분, <nav> 태그는 탐색 메뉴를 의미합니다. 이렇게 의미를 부여하면 사람뿐만 아니라 검색 엔진도 웹 페이지의 구조를 더 잘 이해할 수 있게 되고, 결과적으로 사용자 경험과 검색 엔진 최적화(SEO)에 큰 도움이 됩니다.
왜 시맨틱 태그를 사용해야 할까요?
- 웹 페이지 구조 명확화: 시맨틱 태그를 사용하면 웹 페이지의 구조가 더욱 명확해져 코드 가독성이 높아집니다.
- 검색 엔진 최적화(SEO) 향상: 검색 엔진은 시맨틱 태그를 통해 웹 페이지의 내용을 더 잘 이해하고 검색 결과에 반영합니다.
- 웹 접근성 향상: 시각 장애인을 위한 화면 판독기는 시맨틱 태그를 통해 웹 페이지의 내용을 더 정확하게 전달할 수 있습니다.
- 유지보수 편의성 증가: 코드의 의미가 명확하기 때문에 코드 수정 및 유지보수가 더욱 용이합니다.
주요 시맨틱 태그와 예시
- <header>: 페이지의 머리 부분 (제목, 로고 등)
- <nav>: 탐색 메뉴
- <section>: 페이지의 주요 섹션
- <article>: 독립적인 콘텐츠 (블로그 게시글, 뉴스 기사 등)
- <aside>: 본문과 관련된 부가적인 정보 (사이드바, 광고 등)
- <footer>: 페이지의 바닥 부분 (저작권 정보, 연락처 등)
HTML
<!DOCTYPE html>
<html>
<head>
<title>시맨틱 태그 예시</title>
</head>
<body>
<header>
<h1>나의 웹사이트</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>첫 번째 게시글</h2>
<p>이것은 시맨틱 태그를 이용한 예시입니다.</p>
</article>
</section>
<footer>
<p>© 2023 나의 웹사이트</p>
</footer>
</body>
</html>
시맨틱 태그 활용 시 주의사항
- 중복 사용 금지: 하나의 요소에 여러 개의 시맨틱 태그를 중복해서 사용하면 안 됩니다.
- 의미에 맞게 사용: 시맨틱 태그는 단순히 디자인을 위해 사용하는 것이 아니라, 해당 요소의 의미를 정확하게 나타내기 위해 사용해야 합니다.
- div 태그 남용 자제: div 태그는 의미가 없는 일반적인 컨테이너 요소입니다. 시맨틱 태그를 사용할 수 있는 경우에는 div 태그 대신 시맨틱 태그를 사용하는 것이 좋습니다.
반응형
'HTML&CSS' 카테고리의 다른 글
| [CSS] 3. 선택자(selector) (0) | 2024.09.13 |
|---|---|
| [CSS] 2. 문법과 규칙 (0) | 2024.09.13 |
| [CSS] 1. CSS 소개 (0) | 2024.09.13 |
| #6 HTML 태그 (0) | 2024.08.25 |
| #4 HTML5의 새로운 기능 (1) | 2024.08.25 |
| #3 HTML 요소와 속성 (0) | 2024.08.25 |
| #2 HTML 문서의 구조 (0) | 2024.08.25 |
| #1 HTML 이란 (0) | 2024.08.24 |