html5 헤더 태그는 무엇을 의미하나요? html5 헤더 태그 사용법에 대한 자세한 설명(예제 포함)-H5 튜토리얼-php.cn

PHP中文网

PHP中文网的html5语义化标签之结构标签

HTML5教程php中文网

집

웹 프론트엔드

H5 튜토리얼

html5 헤더 태그는 무엇을 의미하나요? html5 헤더 태그 사용법에 대한 자세한 설명(예제 포함)

寻∝梦

Aug 30, 2018 pm 01:41 PM

header html

이 글에서는 주로 html5 헤더 태그의 요소에 대한 기본적인 소개와 헤더 태그의 사용 예 분석을 소개합니다. html5 헤더 태그 관련 글을 살펴보겠습니다

1. 먼저 html5 헤더 태그 요소의 기본 소개에 대해 이야기해 보겠습니다

헤더 요소는 안내 및 탐색 기능을 갖춘 구조적 요소로, 일반적으로 전체 페이지의 제목이나 페이지 내 콘텐츠 블록을 배치하는 데 사용되지만 헤더에 로고 이미지를 배치하는 등 다른 콘텐츠를 포함할 수도 있습니다. , 검색 양식 등

참고: 페이지에 표시되는 헤더 수에는 제한이 없습니다. 즉, 동일한 페이지의 다양한 콘텐츠 블록에 헤더 요소를 추가할 수 있습니다.

HTML5 버전 이전에는 웹 페이지 레이아웃에 div 태그를 사용하는 것이 일반적이었습니다. HTML5에서는 DIV 태그를 기반으로 새로운 헤더 태그 요소가 추가됩니다. "

" 헤더 태그라고도 합니다. 과거에는 div CSS 레이아웃에서 웹페이지를 헤더, 콘텐츠, 하단으로 나누는 경우가 많았습니다. 대규모 구조의 경우 레이아웃을 위해 ID가 포함된 div를 사용하는 경우가 많습니다. 헤더는 또는 를 사용하여 레이아웃되는 경우가 많습니다. 기존 DIV 레이아웃과 다른 점이 있습니다. div 태그는 필요하지 않지만 새 요소 태그를 추가하세요.

"header"는 HTML 레이아웃에서 일반적으로 사용되는 이름으로 인식되어 HTML5에 새로운 헤더 태그 요소가 추가되었습니다. html5에서 헤더가 label 요소로 추가된 이유를 알 수 있습니다.

헤더 태그를 직접 사용하는 것 외에도 헤더에 클래스나 ID를 설정할 수도 있습니다.

html5 헤더 태그 사용법 예:

홈페이지 소개:

<header>  
 <h1 id="PHP中文网">PHP中文网</h1>  
 <p>专注于编程（PHP中文网）</p>  
</header>  
<article>  
 <header>  
  <h1 id="PHP中文网的html-语义化标签之结构标签">PHP中文网的html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含了很多东西...</p>  
</article>

로그인 후 복사

# 🎜 🎜#코드 효과는 그림과 같습니다:

html5 헤더 태그는 무엇을 의미하나요? html5 헤더 태그 사용법에 대한 자세한 설명(예제 포함)

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

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

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

2. 이제 호환성 문제에 대해 이야기해 보겠습니다.

헤더 태그는 HTML5의 새로운 태그 요소이므로 이전 버전을 찾아보아야 합니다. 어떤 브라우저에서도 지원되지 않으며 이를 지원하려면 IE9+ 이상의 브라우저, 최신 Google Chrome 및 기타 브라우저가 필요합니다. 물론 360브라우저, 바이두브라우저, 아오유브라우저 등 국내 브라우저는 모두 시스템에 딸려오는 IE 커널을 사용하기 때문에 국내 브라우저는 실제로 시스템에 딸려오는 IE 버전과 동일한 버전이므로 사용하시는 IE 브라우저는 IE9 이상 버전은 HTML5의 새로운 태그 요소와 자연스럽게 호환됩니다.

이제 위 코드를 업그레이드해 보겠습니다.

<body>
<header>
<hgroup>
<h1 id="HTML-教程php中文网">HTML5教程php中文网</h1>
<a href=”/”>[手机版]</a>
<a href=”/”>[PHP中文网]</a>
</hgroup>
<nav>
<ul>
<li><a href=”/”>首页</a></li>
<li><a href=”/”>手机版</a></li>
<li><a href=”/”>论坛</a></li>
</ul>
</nav>
</header>
</body>

로그인 후 복사

효과는 다음과 같습니다.

html5 헤더 태그는 무엇을 의미하나요? html5 헤더 태그 사용법에 대한 자세한 설명(예제 포함)