HTML5의 헤더 태그는 무엇을 의미하나요? HTML5에서 헤더 태그를 사용하는 방법을 알고 있나요?

寻∝梦

풀어 주다： 2018-08-15 17:48:28

원래의

8937명이 탐색했습니다.

HTML5의 헤더 태그는 무엇을 의미하나요? HTML5에서 헤더 태그를 사용하는 방법을 알고 있나요? 이 글에서는 주로 HTML5 헤더 태그

에 대해 자세히 소개하고 그 사용법과 사용법을 설명합니다.

홈페이지 소개:

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>

로그인 후 복사

HTML에서 헤더 태그의 정의와 사용법:

태그는 문서의 헤더(소개 정보)를 정의합니다.

HTML

요소는 일부 서문이나 탐색 내용을 나타내는 데 사용됩니다. 일부 제목 요소를 포함할 수 있으며 로고, 검색 상자 또는 기타

요소와 같은 일부 요소를 배치할 수도 있습니다.

사용 지침:

요소는 단락 콘텐츠를 구성할 수 있는 요소가 아니므로 콘텐츠 디렉터리에 반영할 필요가 없습니다.

사용 예:

<header>
  a logo
</header>

로그인 후 복사

HTML 4.01과 HTML 5의 차이점

태그는 HTML 5의 새로운 태그입니다.

: 문서의 헤더 영역을 설명하며, 콘텐츠의 소개 및 표시 영역을 정의하는 데 사용됩니다.

헤더 태그는 우리에게 가장 익숙한 head 태그와 다릅니다. 헤더는 기사의 헤드를 정의하는 데 더 일반적으로 사용됩니다. 아래에서는 HTML5의 헤더 태그 사용법을 간략하게 분석하겠습니다.

태그는 일반적으로 일부 안내 및 탐색 정보와 같은 문서의 헤더를 정의합니다. 웹페이지의 헤더에만 쓰는 것이 아니고, 웹페이지의 콘텐츠에도 쓸 수 있습니다.

새 표준에서는 헤더 태그를 다음과 같이 정의합니다.

"A group of introductory or navigational aids.”

로그인 후 복사

기본 의미는"내비게이션 입문 관련 보조 콘텐츠의 집합"입니다. 문자 그대로 이해하면 헤더 태그는 페이지 헤더의 내용을 정의할 뿐만 아니라 페이지 헤더 아래에 다른 콘텐츠의 도입을 정의할 수도 있습니다. 이는 기존 페이지 헤더 정의와 완전히 일치하지 않습니다.

일반적으로

태그에는 최소한 헤더 태그(

-

)가 포함되며, 태그도 포함될 수 있습니다. 콘텐츠, 로고, 검색 양식,

<header>  
 <h1>PHP中文网</h1>  
 <p>专注于前端后台开发授课</p>  
</header>  
<article>  
 <header>  
  <h1>html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含很多东西...</p>  
</article>

로그인 후 복사

위 구조에서 헤더를 사용하여 기사의 제목과 내용을 정의하는 것을 볼 수 있습니다. 여기서 사용된 헤더 태그는 페이지의 헤더가 아닌 기사의 헤더입니다.

그래서 HTML5에서는 헤더 사용이 더욱 유연해졌으며 필요에 따라 문서 구조를 정의하고 구성할 수 있습니다.

마찬가지로 페이지를 구성할 때 헤더 태그는 일반적으로 페이지 상단에 배치되지만, 왼쪽, 오른쪽, 심지어 하단에 배치하려는 경우 태그는 해당 역할만 정의하는 것은 중요하지 않습니다. 위치가 아닌 페이지에. 물론, 페이지를 구성할 때 중요한 콘텐츠가 최종적으로 고급화되는 것은 검색 엔진 최적화 원칙에 더 가깝습니다.

마지막으로 HTML5의 헤더는 블록 요소이므로 대부분의 주류 브라우저에서 사용하려면 CSS를 다음과 같이 정의하는 것이 가장 좋습니다.