The use of footer tags in HTML5 you know what? , what does the footer tag in HTML5 mean?

The use of footer tags in HTML5 you know what? , what does the footer tag in HTML5 mean? This article introduces the definition and usage of footer tags in HTML5, as well as the standard attributes in footer, as well as the simple implementation method at the bottom of the page.

Definition and usage of footer tags in HTML5:

The <footer> tag defines the footer for section or document.

Typically, the element contains the creator's name, the date the document was authored, and/or contact information.

In a document, you can define multiple <footer> elements.

Instance

Footer of the document:

<footer>this document was written in 2010</footer><! DOCTYPE Html>
Differences between HTML 4.01 and HTML 5

The <footer> tag is a new label in HTML 5.

Tip: If you use footer to insert contact information, you should use the <address> element within the footer element.

Standard properties for footer in HTML:

Class, Contenteditable, ContextMenu, dir, draggable, id, irrelevant,

Lang, ref, Registrationmark, TabIndex, template, title

HTML5 syntax Structure-TOP

1. Syntax

<</span>footer> topic.alibabacloud.com<</span>br/> Learn css, find div+ CSS Resources on topic.alibabacloud.com! </</span>footer>
2. Add ID to footer element tag

<</span>footer id= "abc" > TOPIC.ALIBABACLOUD.COM<</SPAN>BR/> Learn css, find div+ CSS Resources on topic.alibabacloud.com! </</span>footer>
3. Add class to the footer tag

<</span>footer class= "Yanshi" > Topic.alibabacloud.com<</span>br/> Learn css, find div+ CSS Resources on topic.alibabacloud.com! </</span>footer>
4. Knowledge expansion

When we use the footer tag in HTML5 development, we treat it as a normal div tag, but it is generally used for the bottom layout of the site. In general, the next page has only one bottom area, so it is best to use only one footer at a time.

Note: Is HTML5 new, in IE8 and the following IE browser is not compatible, use with caution.

On the Internet to see a page at the bottom of the simple implementation method, now share to everyone

Requirements: Sometimes, when the content of the page is short, can not open the browser height, but also want to footer at the lowest end of the window.

Idea: The minimum height of the parent layer of the footer is 100%,footer set to the absolute (absolute) base of the parent level (bottom:0), the height of the footer to be reserved within the parent layer.

HTML code:

Xml/html code copy content to clipboard

<!--parent Layer--     <div id= "Wapper" >         <!--main Content--         <div id= "main-content" >         </div >         <!--footer--         <div id= "Footer" >         </div>     </div>
The CSS is as follows:

CSS code copy content to clipboard

#wapper {         position:relative;   /* Important! Ensure footer is relative to wapper position absolute */         Height:auto;          /* Ensure that the page can open the browser height display normal */         min-height:100%/  * IE6 not supported, IE6 to be configured separately */     }     #footer {        position:absolute;  bottombottom:0; /* Key */        left:0; * * IE must remember */        height:60px;         /* Footer height must be fixed value */     }     #main-content{        padding-bottom:60px;/* Important! Space reserved for footer */     }
At this time, other browsers can be displayed normally, but IE 6 to be processed separately:

CSS code copy content to clipboard

<!--[if IE 6]->     <style>     #wapper {height:100%;}/* IE will automatically open up layers when not high enough */     </style>     <! [endif]-->
Well, this article is about as much as everyone else. The article about the page will also be published, I hope you can click to see.

"Recommended"

What are the attributes of the HTML img tag? Learn about the use of IMG tags

What is the web in HTML5? What are the elements in Web Storage?