WEB/HTML

[HTML] Semantic Tag

우와왕고기다 2023. 11. 3. 09:25

시멘틱 태그 : 그 이름만 봐도 의미를 알 수 있는 태그

시멘틱 태그를 사용하지 않더라도 웹 문서에 문제는 없지만 소스 코드만 보고도 이해하고 내용을 정확히 찾기위해 사용

<header> : 헤더영역을 나타내는 태그

<header>
        <div id="logo">
            <a href="#"><h1>Dream Jeju</h1></a>
        </div>
</header>

Dream Jeju

<nav> : 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크

보통 헤더나 푸터, 사이드 바 안에 포함하거나 독립해서 사용한다.

<nav>
    <ul id="topmenu">
        <li><a href="#">단체 여행</a></li>
        <li><a href="#">맞춤 여행</a></li>
        <li><a href="#">갤러리</a></li>
        <li><a href="#">문의하기</a></li>
    </ul>
</nav>

<main> : 웹 문서에서 핵심이 되는 내용을 넣는다.

<article> : 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣는다.

<section> : 웹 문서에서 콘텐츠 영역을 나타낸다.

<main class="contents">
    <section id="headling">
        <h2>section 구역입니다!!!!!</h2>
    </section>
    <section id="activity">
        <h2>section 구역입니다!!!!!!</h2>
    </section>
</main>

section 구역입니다!!!!!

section 구역입니다!!!!!!

<aside> : 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.

<footer> : 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다.

<footer>
    <div id="bottom">
        <ul>
            <hr>
            <li><a href="#">회사 소개</a></li>
            <li><a href="#">개인정보처리방침</a></li>
            <li><a href="#">여행약관</a></li>
            <li><a href="#">사이트맵</a></li>
        </ul>
    </div>
</footer>