HTML에서 웹표준을 지키면서 쓰는 HTML 태그

HTML에서 사용되는 태그

이미지 출처

 

1. <header></header> : HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있습니다.
2. <nav></nav> : HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다.
3. <section></section> : HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소 <h2>~<h6>를 포함하는 것이 좋습니다.
4. <article></article> : HTML 문서 내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목 요소 <h2>~<h6>를 포함하는 것이 좋습니다.
5. <aside></aside> : 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며 HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 고아고 등의 영역으로 사용됩니다.
6. <footer></footer> : HTML 문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보, 고나련된 문서의 링크를 포함할 수 있습니다.
7. <audio></audio> : HTML 문서에 음악과 같은 오디오를 삽입할 떄 사용하는 태그입니다.(mp3, wav, ogg)
8. <video></video> : HTML 문서에 동영상을 삽입할 떄 사용하는 태그입니다.(mp4, webm, ogg)

 

이미지 출처

<header>
  <h1>로고</h1>
  <nav>
   <ul>
    <li><a href="#">nav 태그는 메뉴를 만들 때 사용이 됩니다.</a></li>
   </ul>
  </nav>
</header>

<div id="container">
  <section>
    <h2>section태그에는 콘텐츠 내용을 적어줍니다.</h2>
  </section>
  <article>
    <h2>article 태그는 기사, 광고에 사용이 적절합니다.</h2>
  </article>
  <aside>광고</aside>
</div>

<footer>
  <p>footer태그에는 회사 정보나 회사 전화번호 등을 적습니다.</p>
</footer>

 

태그를 사용하는 이유

마크업을 할 때는 "왜 시멘틱하게 마크업을 해야하지?"라는 의문이 들 수도있습니다. 모든 사람들이 정보를 동일하게 받아 들일 수 있는 환경이 아닐 수도 있습니다. 예를 들어 시각장애인의 경우에는 HTML 문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다.