Web Front-end
H5 Tutorial
What does the html5 header tag mean? Detailed explanation of the usage of html5 header tag (with examples)
What does the html5 header tag mean? Detailed explanation of the usage of html5 header tag (with examples)
Aug 30, 2018 pm 01:41 PM
This article mainly introduces you to a basic introduction to the elements of the html5 header tag, and an analysis of usage examples of the header tag. Let’s take a look at this article about the html5 header tag
1. First, let’s talk about the basic introduction of the html5 header tag element
header element It is a structural element with guiding and navigation functions. It is usually used to place the title of the entire page or a content block within the page, but it can also contain other content, such as placing logo images, search forms, etc. in the header.
Note: There is no limit to the number of header appearances in a page, which means we can add a header element to different content blocks on the same page.
Before the HTML5 version, it was customary to use div tags to layout web pages. In HTML5, a new header tag element is added based on the DIV tag. Also called "
It is recognized that "header" is a commonly used name in HTML layout, so a new header tag element is added to HTML5. You can understand why the header is added as a label element in html5.
In addition to using the header tag directly, you can also set class or id to the header.
html5 header tag usageExample:
Introduction to the homepage:
<header> <h1>PHP中文網(wǎng)</h1> <p>專注于編程（PHP中文網(wǎng)）</p> </header> <article> <header> <h1>PHP中文網(wǎng)的html5語義化標簽之結(jié)構(gòu)標簽</h1> <p>article、section、hgroup、aside、nav...</p> </header> <p>...這里面包含了很多東西...</p> </article>
The code effect is as shown in the figure:
This is the most basic usage. In the above structure, we can see that using header we define the title and content of an article. The header tag used here is not the header of the page, but the header of the article.
So in HTML5, the use of headers is more flexible, and you can define and organize the document structure according to your needs.
Similarly, when structuring a page, the header tag is generally placed at the top of the page, but if you want to place it on the left, right or even bottom, it doesn’t matter. The tag only defines its location on the page. Role, not location. Of course, it is more based on search engine optimization principles. Important content is finally advanced when structuring the page.
2. Now let’s talk about the compatibility issue:
Because the header tag is a new tag element in HTML5, it is not supported by older versions of browsers. You need to Only supported by IE9 or above browsers, the latest Google Chrome and other browsers. Of course, domestic browsers such as 360 Browser, Baidu Browser, and Aoyou Browser all use the IE kernel that comes with the system, so domestic browsers are actually the same version as the IE version that comes with your system, so your IE browser is IE9 or above. The version is naturally compatible with the new tag elements of HTML5.
Now let’s upgrade the above code:
<body> <header> <hgroup> <h1>HTML5教程php中文網(wǎng)</h1> <a href=”/”>[手機版]</a> <a href=”/”>[PHP中文網(wǎng)]</a> </hgroup> <nav> <ul> <li><a href=”/”>首頁</a></li> <li><a href=”/”>手機版</a></li> <li><a href=”/”>論壇</a></li> </ul> </nav> </header> </body>
The effect is as shown:
The above is an introduction to the usage of HTML5 header tags , this article has introduced so much. If you want to see more, welcome to the PHP Chinese website. If you have any questions, please leave a message below.
【Editor’s Recommendation】
About the difference between the section tag and the div tag in HTML5 (with examples inside)
## What is the use of the #html article tag? Introduction to how to use the html article tag
The above is the detailed content of What does the html5 header tag mean? Detailed explanation of the usage of html5 header tag (with examples). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do I minimize the size of HTML files?
Jun 24, 2025 am 12:53 AM
To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.
How has HTML evolved over time, and what are the key milestones in its history?
Jun 24, 2025 am 12:54 AM
HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout
How do I use the element to represent the footer of a document or section?
Jun 25, 2025 am 12:57 AM
It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.
How do I use the tabindex attribute to control the tab order of elements?
Jun 24, 2025 am 12:56 AM
ThetabindexattributecontrolshowelementsreceivefocusviatheTabkey,withthreemainvalues:tabindex="0"addsanelementtothenaturaltaborder,tabindex="-1"allowsprogrammaticfocusonly,andtabindex="n"(positivenumber)setsacustomtabbing
What is the declaration, and what does it do?
Jun 24, 2025 am 12:57 AM
Adeclarationisaformalstatementthatsomethingistrue,official,orrequired,usedtoclearlydefineorannounceanintent,fact,orrule.Itplaysakeyroleinprogrammingbydefiningvariablesandfunctions,inlegalcontextsbyreportingfactsunderoath,andindailylifebymakingintenti
What is the loading='lazy' one of the html attributes and how does it improve page performance?
Jul 01, 2025 am 01:33 AM
loading="lazy" is an HTML attribute for and which enables the browser's native lazy loading function to improve page performance. 1. It delays loading non-first-screen resources, reduces initial loading time, saves bandwidth and server requests; 2. It is suitable for large amounts of pictures or embedded content in long pages; 3. It is not suitable for first-screen images, small icons, or lazy loading using JavaScript; 4. It is necessary to cooperate with optimization measures such as setting sizes and compressing files to avoid layout offsets and ensure compatibility. When using it, you should test the scrolling experience and weigh the user experience.
How do I use the element to represent a section of navigation links?
Jun 24, 2025 am 12:55 AM
The key to using elements to represent navigation link areas is semantics and clear structure, usually in conjunction with organizational links. 1. The basic structure is to put the parallel links in and wrap them inside, which is friendly to auxiliary tools and is conducive to style control and SEO; 2. Commonly used in or, for placing main navigation or footer link collections; 3. A page can contain multiple areas, such as main menu, sidebar or footer independent navigation.
What are best practices for writing valid and well-formed HTML code?
Jul 01, 2025 am 01:32 AM
When writing legal and neat HTML, you need to pay attention to clear structure, correct semantics and standardized format. 1. Use the correct document type declaration to ensure that the browser parses according to the HTML5 standard; 2. Keep the tag closed and reasonably nested to avoid forgetting closed or wrong nesting elements; 3. Use semantic tags such as, etc. to improve accessibility and SEO; 4. The attribute value is always wrapped in quotes, and single or double quotes are used uniformly. Boolean attributes only need to exist, and the class name should be meaningful and avoid redundant attributes.
