HTML 독학 가이드 7 - 시맨틱 태그

learning by Seven Fingers Studio 14분
HTML시맨틱태그HTML5headerfooternav웹개발

예전엔 모든 걸 <div>로 만들었어요. 근데 HTML5부터는 시맨틱 태그가 생겼어요. “의미가 있는” 태그죠. header, nav, article… 이름만 봐도 뭔지 알 수 있어요. SEO와 접근성에도 좋고요!

시맨틱 태그가 뭔가요?

태그 이름 자체가 의미를 가지고 있어요.

<!-- 옛날 방식: 의미 없는 div -->
<div id="header">헤더</div>
<div id="nav">메뉴</div>
<div id="content">내용</div>
<div id="footer">푸터</div>

<!-- HTML5: 의미 있는 시맨틱 태그 -->
<header>헤더</header>
<nav>메뉴</nav>
<article>내용</article>
<footer>푸터</footer>

실행 결과:

옛날 방식:

내용

HTML5 시맨틱 태그:

헤더
내용
푸터

검색 엔진과 스크린 리더가 페이지 구조를 더 잘 이해해요.

주요 시맨틱 태그

header - 헤더

페이지나 섹션의 상단 부분이에요.

<header>
    <h1>웹사이트 제목</h1>
    <p>웹사이트 설명</p>
</header>

실행 결과:

웹사이트 제목

웹사이트 설명

로고, 제목, 검색 바 등이 들어가요.

nav - 내비게이션

메뉴 링크를 담는 곳이에요.

<nav>
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">소개</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</nav>

실행 결과:

main - 주요 콘텐츠

페이지의 핵심 내용이에요.

<main>
    <h2>메인 제목</h2>
    <p>주요 내용...</p>
</main>

주의: 페이지당 하나만 써야 해요!

article - 독립적인 콘텐츠

그 자체로 완결된 콘텐츠예요. 블로그 글, 뉴스 기사, 포럼 글 등이에요.

<article>
    <h2>블로그 제목</h2>
    <p>작성일: 2025-11-25</p>
    <p>내용...</p>
</article>

section - 섹션

연관된 콘텐츠를 묶어요.

<section>
    <h2>소개</h2>
    <p>내용...</p>
</section>

<section>
    <h2>서비스</h2>
    <p>내용...</p>
</section>

article vs section:

  • article: 독립적으로 존재 가능
  • section: 문맥상 연관된 그룹

aside - 부가 콘텐츠

본문과 간접적으로 관련된 내용이에요. 사이드바, 광고, 관련 링크 등이에요.

<aside>
    <h3>관련 글</h3>
    <ul>
        <li><a href="#">관련 글 1</a></li>
        <li><a href="#">관련 글 2</a></li>
    </ul>
</aside>

footer - 푸터

페이지나 섹션의 하단 부분이에요.

<footer>
    <p>&copy; 2025 내 웹사이트</p>
    <p>연락처: contact@example.com</p>
</footer>

저작권, 연락처, 사이트맵 등이 들어가요.

figure와 figcaption

이미지, 다이어그램, 코드 등에 설명을 붙여요.

<figure>
    <img src="chart.png" alt="판매 차트">
    <figcaption>2025년 1분기 판매 실적</figcaption>
</figure>

실행 결과:

판매 차트
2025년 1분기 판매 실적

time

날짜나 시간을 나타내요.

<p>
    작성일: <time datetime="2025-11-25">2025년 11월 25일</time>
</p>

실행 결과:

작성일:

datetime 속성은 기계가 읽을 수 있는 형식이에요.

mark

하이라이트(형광펜) 효과예요.

<p>검색어: <mark>HTML</mark></p>

실행 결과:

검색어: HTML

전체 구조 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>시맨틱 태그 예제</title>
</head>
<body>
    <!-- 헤더 -->
    <header>
        <h1>내 블로그</h1>
        <p>웹 개발 이야기</p>
    </header>

    <!-- 내비게이션 -->
    <nav>
        <ul>
            <li><a href="/">홈</a></li>
            <li><a href="/blog">블로그</a></li>
            <li><a href="/about">소개</a></li>
        </ul>
    </nav>

    <!-- 메인 콘텐츠 -->
    <main>
        <!-- 블로그 글 -->
        <article>
            <h2>HTML 시맨틱 태그 완벽 가이드</h2>
            <p>
                <time datetime="2025-11-25">2025년 11월 25일</time>
            </p>
            <p>시맨틱 태그는...</p>

            <section>
                <h3>헤더 태그</h3>
                <p>설명...</p>
            </section>

            <section>
                <h3>내비게이션 태그</h3>
                <p>설명...</p>
            </section>
        </article>

        <!-- 사이드바 -->
        <aside>
            <h3>인기 글</h3>
            <ul>
                <li><a href="#">CSS 기초</a></li>
                <li><a href="#">JavaScript 입문</a></li>
            </ul>
        </aside>
    </main>

    <!-- 푸터 -->
    <footer>
        <p>&copy; 2025 내 블로그. All rights reserved.</p>
        <p>이메일: contact@myblog.com</p>
    </footer>
</body>
</html>

실전 예제

뉴스 사이트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>뉴스 사이트</title>
</head>
<body>
    <header>
        <h1>데일리 뉴스</h1>
        <nav>
            <a href="/">홈</a> |
            <a href="/politics">정치</a> |
            <a href="/economy">경제</a> |
            <a href="/sports">스포츠</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>오늘의 주요 뉴스</h2>

            <article>
                <h3>주요 뉴스 제목</h3>
                <p><time datetime="2025-11-25T10:00">2025년 11월 25일 오전 10시</time></p>
                <p>뉴스 내용...</p>
            </article>

            <article>
                <h3>두 번째 뉴스 제목</h3>
                <p><time datetime="2025-11-25T09:30">2025년 11월 25일 오전 9시 30분</time></p>
                <p>뉴스 내용...</p>
            </article>
        </section>

        <aside>
            <h3>실시간 급상승 검색어</h3>
            <ol>
                <li>HTML</li>
                <li>웹 개발</li>
                <li>시맨틱 태그</li>
            </ol>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 데일리 뉴스</p>
        <nav>
            <a href="/about">회사 소개</a> |
            <a href="/terms">이용약관</a> |
            <a href="/privacy">개인정보처리방침</a>
        </nav>
    </footer>
</body>
</html>

실행 결과:

데일리 뉴스

오늘의 주요 뉴스

주요 뉴스 제목

뉴스 내용...

두 번째 뉴스 제목

뉴스 내용...

포트폴리오 사이트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내 포트폴리오</title>
</head>
<body>
    <header>
        <h1>홍길동</h1>
        <p>웹 개발자</p>
        <nav>
            <a href="#about">소개</a> |
            <a href="#projects">프로젝트</a> |
            <a href="#contact">연락</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>소개</h2>
            <p>저는 프론트엔드 개발자입니다...</p>
        </section>

        <section id="projects">
            <h2>프로젝트</h2>

            <article>
                <h3>프로젝트 1: 쇼핑몰 사이트</h3>
                <figure>
                    <img src="project1.jpg" alt="프로젝트 1 스크린샷">
                    <figcaption>React로 만든 쇼핑몰</figcaption>
                </figure>
                <p>설명...</p>
            </article>

            <article>
                <h3>프로젝트 2: 블로그 플랫폼</h3>
                <figure>
                    <img src="project2.jpg" alt="프로젝트 2 스크린샷">
                    <figcaption>Node.js 블로그 시스템</figcaption>
                </figure>
                <p>설명...</p>
            </article>
        </section>

        <section id="contact">
            <h2>연락처</h2>
            <p>이메일: hong@example.com</p>
            <p>GitHub: github.com/honggildong</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 홍길동. All rights reserved.</p>
    </footer>
</body>
</html>

자주 하는 실수

1. div처럼 시맨틱 태그 남용

<!-- 나쁜 예: 의미 없는 남용 -->
<section>
    <section>
        <section>텍스트</section>
    </section>
</section>

<!-- 좋은 예: 필요한 곳에만 -->
<section>
    <h2>제목</h2>
    <p>텍스트</p>
</section>

2. main 태그 여러 개 사용

<!-- 틀림: main은 하나만 -->
<main>내용1</main>
<main>내용2</main>

<!-- 맞음 -->
<main>
    <section>내용1</section>
    <section>내용2</section>
</main>

3. header/footer를 최상위에만 쓰기

<!-- header와 footer는 article 안에도 쓸 수 있음 -->
<article>
    <header>
        <h2>글 제목</h2>
        <p>작성일</p>
    </header>

    <p>본문...</p>

    <footer>
        <p>태그: HTML, CSS</p>
    </footer>
</article>

다음 단계

다음 글에서는 레이아웃 구성을 배웁니다. 시맨틱 태그와 CSS를 함께 써서 실제 웹사이트 레이아웃을 만드는 방법을 알아볼 거예요.

시맨틱 태그는 코드를 읽기 쉽게 만들고, SEO와 접근성을 높여줘요. 꼭 사용하세요!

HTML 독학 가이드 시리즈:

← 블로그 목록으로