How to use the <footer> tag element in HTML5-HTML Tutorial-php.cn

H5 has added a tag element, so how do we use it? I remember that when we laid out the copyright at the bottom of the web page before the HTML5 version, we were used to using id="footer" or class="footer" to mark paragraphs, but after having this tag in H5, everything is much simpler.

HTML5 tag element adds a new footer element tag at the bottom of html5. Understand the basics of the new footer tag in html 5 and understand the footer css layout tutorial to truly master and understand the

Remember that when we laid out the copyright at the bottom of the web page before the previous HTML5 version, we were accustomed to using id="footer" or class="footer". Learn more about html tutorial tags!

For example, traditional html layout Code:

学习PHP，上www.php.cn! Copy after login But in html5, this commonly used naming of "footer" is added as an html5 element tag member.

html5 Grammar Structure

1. Grammar

第一行 学习PHP，上www.php.cn! Copy after login 2. Add id to the footer element tag

第一行 学习PHP，上www.php.cn! Copy after login 3. Add footer Add class

第一行 学习PHP，上www.php.cn! Copy after login to the tag 4. Knowledge expansion

When we use the footer tag in HTML5 development, we can treat it as an ordinary div tag, but it is generally used for the bottom layout of the website. Generally, a web page has only one bottom area, so it is best to use the footer only once.

Note: is new to HTML5 and is not compatible with IE8 and below IE browsers , so use it with caution.

tml5 footer usage layout case

Master the footer tag by comparing and observing the traditional div tag layout and the footer tag layout. At the same time, add class to the footer and set the red font for comparison.

1. Complete HTML5 layout example code

footer body{text-align:center} /* 传统布局CSS */ #footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%} /* HTML5布局样式 直接对footer元素设置样式 */ footer{ background:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%} .color-F00{ color:#F00} 传统html 使用div布局

第一行 学习PHP，上www.php.cn! html5 footer标签布局

第一行 学习PHP，上www.php.cn! html5 footer标签布局设置class

第一行 学习PHP，上www.php.cn! Copy after login The above uses the traditional html div tag and html5 footer tag layout, and also sets the class

tag for the footer. There are so many usages. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related recommendations

How to use the tag of html

##html document How to write a type declaration

How to display a circular image in css3

How to use the tag element in HTML5

How to use the
tag element in HTML5