Web/HTML

[HTML] 시맨틱 태그

웹코린이 2023. 6. 21. 09:09
728x90

시맨틱 태그

웹 문서의 구조와 의미를 명확하게 정의하기 위해 사용되는 태그
이러한 시맨틱 태그들은 웹 페이지의 가독성을 높이고 검색 엔진 최적화를 돕는데 큰 역할을 한다

 

 

시맨틱 태그의 종류

  • <header> : 웹 페이지나 섹션의 제목이나 소개 부분을 감싸는 태그로, 로고, 제목, 네비게이션 등을 포함할 수 있다
  • <nav> : 주요 내비게이션 링크들을 담는 태그로 사이트의 메뉴를 정의할 때 사용된다
  • <main> : 문서의 주요 내용을 감싸는 태그로, 사이트의 메뉴를 정의할 때 사용된다
  • <article> : 독립적인 내용의 블록을 정의하는 태그로, 뉴스 기사, 블로그 포스트, 댓글 등이 포함될 수 있다
  • <section> : 문서의 일반적인 섹션을 정의하는 태그로, 주제별로 그룹화된 내용을 나타낸다
  • <aside> : 주요 내용과는 관련성이 적지만 부가적인 정보를 담는 태그로, 사이드바나 광고 영역에 사용될 수 있다
  • <footer> : 웹 페이지의 섹션의 바닥글을 담는 태그로, 저작권 정보, 연락처 정보 등이 위치할 수 있다

 

task.html

<!DOCTYPE html>
<html>
<head>
    <title>간단한 블로그 포스트</title>
</head>
<body>
    <header>
        <h1>나의 블로그</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">블로그</a></li>
            <li><a href="#">소개</a></li>
            <li><a href="#">문의</a></li>
        </ul>
    </nav>

    <main>
        <article>
            <h2>첫 번째 포스트 제목</h2>
            <p>이곳은 첫 번째 포스트의 내용이 들어갈 자리입니다...</p>
        </article>

        <article>
            <h2>두 번째 포스트 제목</h2>
            <p>두 번째 포스트의 내용도 이곳에 적을 수 있습니다...</p>
        </article>
    </main>

    <aside>
        <h3>광고</h3>
        <p>특별 할인 이벤트! 지금 바로 확인하세요!</p>
    </aside>

    <footer>
        <p>&copy; 2023 나의 블로그. 모든 권리 보유.</p>
    </footer>
</body>
</html>

 

728x90