본문 바로가기
웹(Web)/HTML

의미론적 태그

by 지하생활자 2021. 4. 15.

HTML에서 사용되는 정보들을 의미론적으로 표현하기 위한 태그들

 

 

<!DOCTYPE html>
<html>
<head>
  <title>HTML-수업소개</title>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="index.html">HTML</a></h1>
  </header>
  <ol>
    <nav>
      <li><a href="1.html">기술소개</a></li>
      <li><a href="2.html">기본문법</a></li>
      <li><a href="3.html">하이퍼텍스트와 속성</a></li>
      <li><a href="4.html">리스트와 태그의 중첩</a></li>
    </nav>
  </ol>
  <section>
    <article>
      <h2>선행학습</h2>
      본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다.
      이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
    </article>
    <article>
      <h2>선행학습</h2>
      본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다.
      이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
    </article>
  </section>
  <footer>
    <ul>
      <li><a href="privacy.html">개인보호정책</a></li>
      <li><a href="about.html">회사소개</a></li>
    </ul>
  </footer>
</body>
</html>

 

 

 

header 태그는 아무런 기능이 없다 웹사이트 전체에서 정보가 표현되는 부분을 표시하는 의미만을 갖고있다

header가 있으면 footer가 있다

특정한 역할로 정의하기 어려운 것들은 section으로 묶어주면 된다

article,nav,header,footer는 section 태그를 쓰면 안되고 그에 적당한 태그를 써주면 된다
article 본문
aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들
details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure 삽화나 다이어그램과 같은 부가적인 요소를 정의
footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main 문서에서 가장 중심이 되는 컨텐츠를 정의
mark 참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav         문서의 네비게이션 항목을 정의
section 문서의 구획들을 정의 (참고)
time         시간을 정의

등장시기:HTML5

'웹(Web) > HTML' 카테고리의 다른 글

HTML 비디오 -video  (0) 2021.04.15
외부문서삽입 -iframe  (0) 2021.04.15
모바일 지원  (0) 2021.04.15
웹 개발자 도구  (0) 2021.04.15
검색엔진 최적화  (0) 2021.04.15

댓글