HTML heading vs head vs header 태그별 예제 차이점


HTML heading = <h1> ~ <h6>

HTML heading<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그를 부르는 말입니다. 웹페이지의 제목, 소제목 기능을 합니다. 최대 <h6> 태그 까지 존재합니다.

heading 또는 <h> 태그는 <body> 사이에 위치합니다.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
  <h1>복소수</h1>
    <h2>실수</h2>
      <h3>유리수</h3>
        <h4>정수</h4>
          <h5>양의 정수</h5>
  </body>
</html>

HTML <head>

<head> 태그는 <body> 태그를 설명하는 기능을 합니다. 내부를 살펴보면, <title> 태그는 <body> 태그 문서의 제목을 검색엔진과 같은 컴퓨터에게 전달합니다. <meta> 태그는 <body> 태그의 내용을 요약해서 검색엔진과 같은 컴퓨터에게 전달합니다.

<style> 태그는 <body> 태그에 디자인 효과 (CSS)를 부여해서 검색엔진과 사용자에게 전달합니다.


<!DOCTYPE html>
<html>
  <head>
    <title>사과</title>
    <meta name="description" content="이 페이지는 사과의 효능을 설명하고 있습니다.">
    <style>
      h2 {
        color:red ;
      }
   </style>
   </head>
  <body>
    <h2>사과의 효능</h2>
      <p>변비에 좋습니다.</p>
  </body>
</html>

HTML <header>

<header> 태그는 <body> 태그의 제목 부분을 영역으로 구분할 때 사용하는 태그입니다. 맨 위에서 설명한 <h> 태그 즉 HTML heading<header> 태그 사이에 포함될 수 있습니다.

또는 <h> 태그는 본문 영역을 구분하는 <article> 태그 사이에도 포함될 수 있습니다.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <header>
      <h2>사이트 제목</h2>
    </header>
    <article>
      <h2>사과의 효능</h2>
        <p>사과는 변비에 굿!</p>
    </article>
  </body>
</html>