html/css) 시멘틱 태그 semantic tag

⭐시맨틱 태그
semantic tag

시맨틱 웹
단순표시를 넘어 데이터가 의미를 가지도록 만드는 철학

기존 논시멘틱 웹구조는 기계가 이해할 수 없다.
시멘틱웹운 메타데이터를 추가해 기계도 이해하고 처리할 수 있게 돕는다.

비시멘틱의 div, span 등은 아무 의미가 없는 단순 구조적 용도를 가진다.
하지만 시멘틱의 article, section은 의미를 가진다.

<!-- 1.header: 페이지 상단

     로고, 제목 등을 포함 -->

    <header style="background-color: bisque;">

      <h1>나의 블로그</h1>

      <p>여러분 환영한다</p>

    </header>

    <!-- 2.nav: 내비게이션 -->

    <nav>

      <ul>

        <li><a href="홈"></a></li>

        <li><a href="소개"></a></li>

        <li><a href="연락처"></a></li>

      </ul>

    </nav>

    <!-- 3.section: 주제별 콘텐츠 구별 -->

    <section>

      <h2>오늘의 포스트</h2>

      <!-- 4.article: 독립적 콘텐츠 -->

      <article>

        <h3>html5</h3>

        <p>html5는 웹의 최신 표준이다 시멘틱 태그를 통해 구조를 명확히 한다</p>

      </article>

      <article>

        <h3>css 배우기</h3>

        <p>css는 스타일링을 담당한다 html과 함께 사용한다</p>

      </article>

    </section>

    <!-- 5.aside: 부가 콘텐츠 -->

    <aside>

      <h3>추천 링크</h3>

      <p><a href="https://www.naver.com">html 배우기</a></p>

    </aside>

    <!-- 6.footer: 페이지 하단이다

       저작권 정보 등을 넣는다 -->

       <footer style="background-color: bisque;">

        <p>&copy 2025 나의 블로그. all rights reserved</p>

        <p>문의: contact@myblog.com</p>

       </footer>