CSS

HTML5와 시맨틱 태그

alarim 2023. 6. 22. 14:30

HTML5 문서

 

대부분의 웹 사이트는 디자인은 다르지만 구조는 크게 다르지않다.

→ 그러므로 표준화 된 시멘틱 태그를 이용해 웹 문서를 작성하면 문조 구조를 보다 쉽고 정확하게 이해 할 수 있다.

 

문서 구조를 위한 HTML5 시맨틱 태그

 

 

<header> - 머리말 지정하기

(사이트 전체의 제목 부분이 될 수도 있고, 본문의 제목 부분이 될 수도 있다.)

<nav> - 내비게이션 링크

같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타냄

<section> - 주제별 콘텐츠 영역

문서에서 주제별로 콘텐츠를 묶을때 사용

(<hn>태그가 보통 같이 사용된다)

<article> - 웹 상의 실제 내용

<aside> - 본문 이외의 내용

<footer> -사이트 제작자의 연락처 정보와 저작권 정보를 표시

<address> - 사이트 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보

 

예제) 시맨틱 태그 (헤드라인)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style1.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Joandora</h1>
            <h2>가장 제주다운 수산리집</h2>
        </header>
        <nav class="navi">
            <ul>
                <li><a href="#">이용 안내</a></li>
                <li><a href="#">객실 소개</a></li>
                <li><a href="#">예약 방법</a></li>
                <li><a href="#">예약 하기</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

 

예제) 시맨틱태그 (aside)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Joandora</h1>
            <h2>가장 제주다운 수산리집</h2>
        </header>
        <nav class="navi">
            <ul>
                <li><a href="#">이용 안내</a></li>
                <li><a href="#">객실 소개</a></li>
                <li><a href="#">예약 방법</a></li>
                <li><a href="#">예약 하기</a></li>
            </ul>
        </nav>
        <section class="content">
            <h2>요안드라 소개</h2>
            <h3>요안드라는 게스트 하우스 (guest house)</h3>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis impedit, illo similique voluptas culpa dolor consectetur corrupti 
                voluptates dolore odio explicabo consequatur quisquam dicta omnis et sit vel veniam ut.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis impedit, illo similique voluptas culpa dolor consectetur corrupti 
                voluptates dolore odio explicabo consequatur quisquam dicta omnis et sit vel veniam ut.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis impedit, illo similique voluptas culpa dolor consectetur corrupti 
                voluptates dolore odio explicabo consequatur quisquam dicta omnis et sit vel veniam ut.
            </p>  
            <div>
                <img src="images/banner2.png" width="700" height="233">
            </div> 
        </section>
        <aside>
            <h3>알립니다</h3>
            <p>
                게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다
                게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다
            </p>
            <img src="images/2.jpg">
            <img src="images/1.jpg">
            <img src="images/4.jpg">
        </aside>
    </div>
</body>
</html>

 

예제) 시맨틱 태그 (footer)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Joandora</h1>
            <h2>가장 제주다운 수산리집</h2>
        </header>
        <nav class="navi">
            <ul>
                <li><a href="#">이용 안내</a></li>
                <li><a href="#">객실 소개</a></li>
                <li><a href="#">예약 방법</a></li>
                <li><a href="#">예약 하기</a></li>
            </ul>
        </nav>
        <section class="content">
            <h2>요안드라 소개</h2>
            <h3>요안드라는 게스트 하우스 (guest house)</h3>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis impedit, illo similique voluptas culpa dolor consectetur corrupti 
                voluptates dolore odio explicabo consequatur quisquam dicta omnis et sit vel veniam ut.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis impedit, illo similique voluptas culpa dolor consectetur corrupti 
                voluptates dolore odio explicabo consequatur quisquam dicta omnis et sit vel veniam ut.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis impedit, illo similique voluptas culpa dolor consectetur corrupti 
                voluptates dolore odio explicabo consequatur quisquam dicta omnis et sit vel veniam ut.
            </p>  
            <div>
                <img src="images/banner2.png" width="700" height="233">
            </div> 
        </section>
        <aside>
            <h3>알립니다</h3>
            <p>
                게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다
                게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다
            </p>
            <img src="images/2.jpg">
            <img src="images/1.jpg">
            <img src="images/4.jpg">
        </aside>
        <footer>
            <address>
                <p>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라</p>
                <p>yoan##@naver.com</p>
            </address>
            <p>Copyright @. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>