[HTML] 시맨틱 태그(Semantic tag) (1) - <header>, <nav>, <main>, <footer>

시맨틱 태그(Semantic tag)

- 의미가 부여된 태그

- 여는 태그와 닫는 태그 사이의 내용에 대한 정보를 제공

- 장점 : 접근성, 검색엔진 최적화, 이해하기 쉬움

<header> 태그

- 문서나 특정 섹션의 헤더(header)를 정의

- 주로 하나 이상의 제목 요소(h1 ~ h6), 네이게이션 정보<nav>, 로고(logo)나 아이콘(icon), 저자(author) 정보 포함

<!-- <div id="header"> -->
<header>
  <h1>Navigational Links</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
 <!-- </div> -->
</header>

<nav> 태그

- 메뉴 및 목차와 같은 탐색 링크 블록을 정의

<!DOCTYPE html>
<html>
  <body>
    <div id="header">
      <h1>Navigational Links</h1>
      <div id="nav">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#posts">Posts</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

<main> 태그

- 웹페이지 내에서 주요 콘텐츠를 캡슐화

<main>
  <header>
    <h1>Types of Sports</h1>
  </header>
  <article>
    <h3>Baseball</h3>
    <p>
      The first game of baseball was played in Cooperstown, New York in the summer of 1839.
    </p>
  </article>
</main>

<footer> 태그

- 웹페이지 하단의 바닥글 정보를 정의

<footer>
  <p>Email me at Codey@Codecademy.com</p>
</footer>

저작자표시

'Front-end > HTML' 카테고리의 다른 글

[HTML] 시맨틱 태그(Semantic tag) (3) - <figure>, <figcaption>, <audio>, <source>, <embed> (0)	2023.09.07
[HTML] 시맨틱 태그(Semantic tag) (2) - <section>, <article>, <aside> (1)	2023.09.07
[HTML] 텍스트 영역 태그 - <textarea> (0)	2023.09.07
[HTML] 드롭 다운 목록 태그 - <select> & 데이터리스트 태그 - <datalist> (0)	2023.09.07
[HTML] UI 요소 라벨 태그 - <label> (0)	2023.09.07