시멘틱 태그란 무엇일까요?

HTML_CSS

by 헬로제이콥 2024. 11. 6. 09:19

시멘틱 태그란 무엇일까요? 쉽게 알아보기

시멘틱(Semantic) 태그는 웹 페이지의 각 요소가 어떤 의미를 가지는지 명확하게 나타내주는 HTML 태그입니다. 마치 문서의 각 부분에 제목, 본문, 표 등의 이름표를 붙여 내용을 쉽게 파악하도록 하는 것과 같습니다.

왜 시멘틱 태그를 사용해야 할까요?

웹 페이지 구조를 명확하게: 사람뿐만 아니라 검색 엔진도 웹 페이지의 구조를 더 쉽게 이해할 수 있도록 도와줍니다.
웹 접근성 향상: 시각 장애인을 위한 화면 읽기 프로그램이 페이지의 내용을 정확하게 파악하고 전달하는 데 도움이 됩니다.
SEO(검색 엔진 최적화)에 유리: 검색 엔진이 웹 페이지의 내용을 더 정확하게 파악하여 검색 결과에서 더 높은 순위로 노출될 가능성이 높아집니다.

시멘틱 태그 예시

태그의미예시

<header>	페이지의 헤더 영역	웹사이트 로고, 메뉴 등
<nav>	네비게이션 영역	메뉴 목록
<main>	페이지의 주요 콘텐츠 영역	게시글 본문, 제품 목록 등
<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>

    <main>
        <article>
            <h2>첫 번째 게시글</h2>
            <p>이것은 시멘틱 태그를 사용한 예시입니다.</p>
        </article>

        <aside>
            <h3>광고</h3>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 나의 웹사이트</p>
    </footer>
</body>
</html>

위 코드를 보면:

<header> 태그 안에 웹사이트의 제목과 메뉴를 배치했습니다.
<main> 태그 안에 게시글을 나타내는 <article> 태그와 추가 정보를 나타내는 <aside> 태그를 배치했습니다.

시멘틱 태그를 사용하면 웹 페이지의 구조를 더 명확하게 나타낼 수 있으며, 이는 검색 엔진 최적화와 웹 접근성 향상에 큰 도움이 됩니다.

'HTML_CSS' 카테고리의 다른 글

CSS 속성 선택자 (1)	2024.11.07
HTML 자동 완성 (에밋 Emmet) (0)	2024.11.06
Border Styles (0)	2024.11.04
HTML 목록을 이용한 메뉴만들기 (0)	2024.11.04
목록 스타일 (List Style) (0)	2024.11.04