H5에서 헤더 태그를 사용하는 방법

이번에는 H5에서 헤더태그를 어떻게 사용하는지 알려드리겠습니다. H5에서 헤더 태그를 사용할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

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

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

태그에는 제목 태그(

-

)가 하나 이상 포함되며,

태그도 포함될 수 있습니다. , 로고, 검색 양식,

탐색 등

<header>  
 <h1 id="">1</h1>  
 <p>专注于web前端开发</p>  
</header>  
<article>  
 <header>  
  <h1 id="html-语义化标签之结构标签">html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含很多东西...</p>  
</article>

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

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

마찬가지로 페이지를 구성할 때 헤더 태그는 일반적으로 페이지 상단에 배치되지만, 왼쪽, 오른쪽, 심지어 하단에 배치하려는 경우 태그는 해당 역할만 정의하는 것은 중요하지 않습니다. 위치가 아닌 페이지에. 물론, 페이지를 구성할 때 중요한 콘텐츠가 최종적으로 고급화되는 것은 검색 엔진 최적화 원칙에 더 가깝습니다.
마지막으로 HTML5의 헤더는 블록 요소이므로 대부분의 주류 브라우저에서 사용하려면 CSS를 다음과 같이 정의하는 것이 가장 좋습니다.

header { display:block;}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

정규 표현식을 사용하는 방법블로그 가든의 목록 데이터를 캡처하는 방법

하이라이트를 표시할 수 있는 정규 표현식의 종류

jquery의 ajax를 사용하여 비동기적으로 양식 데이터를 제출하는 방법

위 내용은 H5에서 헤더 태그를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!