HTML HTML5 시맨틱 태그 (Semantic Tags)
페이지 정보
조회 3회 작성일 26-02-25 22:01
본문
HTML5 시맨틱 태그 (Semantic Tags)
‘의미 있는’ 태그로, 웹 문서의 구조와 역할을 명확히 해 브라우저·검색엔진·스크린 리더가 더 잘 이해하도록 돕는 HTML5의 요소입니다.
주요 태그
header: 상단(로고·제목·상단 메뉴 등)
nav: 메뉴·내비게이션 링크 묶음
main: 페이지의 핵심 콘텐츠
article: 독립 배포·재사용 가능한 글·기사 등
section: 주제별 묶음(일반적 섹션)
aside: 사이드바 등 부가 영역
footer: 하단 정보(연락처·저작권 등)
시맨틱 태그를 활용한 강의 사이트 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>강의 사이트 구조</title>
</head>
<body>
<header>
<h1>코딩 학습 사이트</h1>
<nav>
<ul>
<li><a href="#">강의목록</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>추천 강의</h2>
<article>
<h3>HTML 초급</h3>
<p>웹 구조의 기초를 배웁니다.</p>
</article>
<article>
<h3>자바스크립트 입문</h3>
<p>동적인 웹사이트 제작법을 배웁니다.</p>
</article>
</section>
<aside>
<h3>최근 본 강의</h3>
<p>CSS 레이아웃 마스터</p>
</aside>
</main>
<footer>
<p>Copyright 2026. 코딩학습. All rights reserved.</p>
</footer>
</body>
</html>
결과
|
- 이전글HTML5 란 무엇인가? 26.02.25