시맨틱 태그에 종류와 구조

시맨틱 태그에 종류와 구조에 대해서 알아보자.

시맨틱태그란?
웹페이지의 구조를 더 명확하게 정의하고, 검색 엔진, 스크린 리더와 같은 도구가 콘텐츠를 더 잘 이해할 수 있게 HTML5에 도입된 태그다.

<header>

header 태그는 웹페이지나 섹션의 머리말을 정의 한다. 사이트 로고, 제목, 메뉴, 검색 폼 등이 포함된다. header 태그는 웹페이지에 가장 상단 부분에 위치한다.

<header>
    <h1>제목</h1>
    <nav>
        <ul>
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
            <li><a href="#">메뉴4</a></li>
        </ul>
    </nav>
</header>

<nav>

nav 태그는 네비게이션내비게이션 영역을 말한다. 메뉴, 사이트 내부 링크 등이 내비게이션 요소에 포함된다.

<nav>
    <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
        <li><a href="#">메뉴4</a></li>
    </ul>
</nav>

<main>

main 태그는 주요 컨텐츠를 정의한다. 하나의 html파일에는 main태그는 하나만 있어야 된다.

<main>
    <article>
        <h3>제목1</h3>
        <p>내용1</p>
    </article>
    <article>
        <h3>제목2</h3>
        <p>내용2</p>
    </article>
</main>

<article>

article 태그는 독립적으로 구별되거나 재사용이 가능한 콘텐츠들을 정의한다. 예를 들어 블로그 포스터, 뉴스기사 등이 있다.

<article>
    <h3>제목</h3>
    <p>내용...</p>
</article>
<article>
    <h3>제목</h3>
    <p>내용...</p>
</article>

<section>

section 태그는 문서의 구획을 정의한다. 콘텐츠 들을 그룹화 하고 각각에 세션에 제목을 부여한다.

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

<aside>

aside 태그는 콘텐츠와는 연관성이 낮은 정보들을 정의한다. 사이드바, 광고 등이 있다.

<aside>
    <h3>광고</h3>
    <p>광고 내용...</p>
</aside>

<footer>

<footer>
    <p>copyright 2024 웹 사이트</p>
    <nav>
        <ul>
            <li><a href="#">이용약관</a></li>
            <li><a href="#">개인정보 처리방침</a></li>
        </ul>
    </nav>
</footer>

시맨틱 태그를 사용해서 html구조를 짜보면 아래와 같이 나오게 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>시맨틱 태그 구조</title>
</head>
<body>
    <header>
        <h1>웹 사이트 제목</h1>
        <nav>
            <ul>
                <li><a href="#">메뉴1</a></li>
                <li><a href="#">메뉴2</a></li>
                <li><a href="#">메뉴3</a></li>
                <li><a href="#">메뉴4</a></li>
            </ul>
        </nav>
    </header>

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

        <section>
            <h2>item 소개</h2>
            <article>
                <h3>item 1</h3>
                <p>item 1에 대한 설명...</p>
            </article>
            <article>
                <h3>item 2</h3>
                <p>item 2에 대한 설명...</p>
            </article>
        </section>

        <aside>
            <h3>광고</h3>
            <p>광고 내용...</p>
        </aside>
    </main>

    <footer>
        <p>copyright; 2024 웹 사이트</p>
        <nav>
            <ul>
                <li><a href="#">이용약관</a></li>
                <li><a href="#">개인정보 처리방침</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

저작자표시 비영리 변경금지

'Mark Up > HTML' 카테고리의 다른 글

HTML 기본 구조 태그 (0)	2024.04.16

시맨틱 태그에 종류와 구조

'Mark Up > HTML' 카테고리의 다른 글

관련글

티스토리툴바