1. 시맨틱 태그란?
시맨틱 태그는 콘텐츠의 의미와 역할을 표현하는 HTML 태그입니다. 일반적인 <div>, <span>과는 다르게, 시맨틱 태그를 사용하면 해당 영역의 의미가 명확해지므로, 웹 접근성과 SEO(검색 엔진 최적화)에 긍정적인 영향을 줍니다.
2. 주요 시맨틱 태그와 역할
1) <header>
웹 페이지나 섹션의 머리글로, 주로 로고, 내비게이션 메뉴, 검색창 등을 포함합니다.
<header>
<h1>사이트 제목</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>2) <nav>
주요 내비게이션 링크를 담는 태그로, 페이지 내의 다른 부분으로 이동할 수 있게 도와줍니다.
<nav>
<a href="#section1">섹션 1</a>
<a href="#section2">섹션 2</a>
</nav>3) <main>
문서의 주요 콘텐츠를 나타내는 태그로, 페이지의 핵심 내용을 감쌉니다. 한 문서에 하나만 사용합니다.
<main>
<h2>주요 콘텐츠</h2>
<p>이곳이 페이지의 메인 콘텐츠입니다.</p>
</main>4) <section>
문서 내에서 주제를 구분하는 구획을 나타내며, 각 섹션은 관련 있는 내용을 그룹화하는 데 사용됩니다.
<section>
<h2>섹션 제목</h2>
<p>섹션 내용입니다.</p>
</section>5) <article>
독립적으로 사용할 수 있는 콘텐츠를 나타내며, 블로그 글, 뉴스 기사, 댓글 등에 주로 사용됩니다.
<article>
<h3>기사 제목</h3>
<p>기사 내용입니다. 이 콘텐츠는 독립적으로 존재할 수 있습니다.</p>
</article>6) <aside>
메인 콘텐츠와 관련된 보조 정보나 광고 등을 나타냅니다.
<aside>
<h4>관련 정보</h4>
<p>추가 정보나 관련 링크 등을 표시합니다.</p>
</aside>7) <footer>
문서나 섹션의 하단 영역으로, 저작권 정보, 작성자 정보, 링크 등을 포함할 수 있습니다.
<footer>
<p>Copyright © 2024 회사명</p>
</footer>3. HTML5 시맨틱 태그 예제
아래는 시맨틱 태그를 사용하여 페이지 구조를 정의한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 시맨틱 태그 예제</title>
</head>
<body>
<!-- 헤더 영역 -->
<header>
<h1>웹사이트 이름</h1>
<nav>
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- 메인 콘텐츠 영역 -->
<main>
<section>
<h2>소개</h2>
<p>우리 웹사이트에 오신 것을 환영합니다.</p>
</section>
<section>
<h2>서비스</h2>
<article>
<h3>웹 개발</h3>
<p>최신 기술로 웹사이트를 제작합니다.</p>
</article>
<article>
<h3>디지털 마케팅</h3>
<p>성공적인 온라인 마케팅 전략을 제공합니다.</p>
</article>
</section>
</main>
<!-- 보조 정보 영역 -->
<aside>
<h4>공지사항</h4>
<p>최신 업데이트와 소식을 확인하세요.</p>
</aside>
<!-- 푸터 영역 -->
<footer>
<p>© 2024 모든 권리 보유.</p>
</footer>
</body>
</html>코드 설명
- <header>: 페이지의 상단부로 제목과 내비게이션을 포함합니다.
- <main>: 주요 콘텐츠 영역으로, <section>, <article>을 사용해 콘텐츠를 나눕니다.
- <aside>: 메인 콘텐츠와 관련된 보조 정보를 나타냅니다.
- <footer>: 저작권 정보가 포함된 페이지 하단부입니다.
4. 시맨틱 태그의 장점
1) SEO 최적화
검색 엔진이 시맨틱 태그를 분석하여 페이지 구조와 중요성을 더 잘 이해할 수 있어 검색 순위에 긍정적인 영향을 줄 수 있습니다.
2) 웹 접근성 향상
화면 읽기 장치가 시맨틱 태그를 분석하여 사용자에게 페이지 구조와 중요 정보를 명확히 전달할 수 있어 접근성을 높여 줍니다.
3) 코드 가독성 향상
HTML 구조가 더 명확해져서 개발자와 협업할 때 코드 이해도가 높아지고, 유지 보수도 쉬워집니다.
요약
이번 강의에서는 HTML5 시맨틱 태그를 사용하여 웹 페이지의 구조를 명확히 하고, 접근성과 SEO를 개선하는 방법을 배웠습니다. 다음 강의에서는 폼 유효성 검사와 JavaScript를 사용해 폼 데이터의 유효성을 체크하는 방법을 알아보겠습니다.
'Study > HTML' 카테고리의 다른 글
| HTML 기초 강의 10편: 이미지, 비디오, 오디오 삽입하기 (3) | 2024.11.10 |
|---|---|
| HTML 기초 강의 9편: 폼 유효성 검사(Validation) (1) | 2024.11.09 |
| HTML 기초 강의 7편: 테이블로 데이터 정리하기 (0) | 2024.11.07 |
| HTML 기초 강의 6편: 폼과 입력 필드 (5) | 2024.11.06 |
| HTML 기초 강의 5편: 반응형 웹 디자인과 미디어 쿼리 (0) | 2024.11.05 |
