YJWANG

2.HTML semantic tag 본문

99.Study/99-1.HTML

2.HTML semantic tag

왕영주 2021. 10. 21. 13:41

이미지 출처 https://velog.io/@wan-seung/Semantic-Web-and-Semantic-Tag

HTML의 semantic tag는 각 tag의 속한 다른 tag및 요소들이 web page에서 어떤 부분을 가리치고 있는지 나타냅니다.

위와 같은 semantic tag를 이용하여 웹 페이지를 구조화할 수 있습니다.

아래 코드만으로는 다른 점을 찾기 어렵지만 CSS와 함께 웹페이지를 꾸미다보면 구조화 하는 것이 편함을 알 수 있습니다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>2번 실습 페이지</title>
</head>
<body>
    <header><h1>2번 실습</h1></header>
    <nav>
        <h2>first navigation</h2>
        <ul>
            <li>메뉴1</li>
            <li>메뉴2</li>
        </ul>
    </nav>
    <section>
        <article>
            <header><h3>First</h3></header>
            <p>
                첫번째 목차에 해당되는 내용입니다.
            </p>
        </article>
        <article>
            <header><h3>Second</h3></header>
            <p>
                두번째 목차에 해당되는 내용입니다.
            </p>
        </article>
    </section>
    <footer>
        <address>+82-1234-5678</address>
    </footer>
</body>
반응형
저작자표시
'99.Study/99-1.HTML' Related Articles more