简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

How to use the
tag element in HTML5

php中世界最好的语言
Release： 2017-11-22 17:20:37
Original
7565 people have browsed it

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, traditionalhtml layoutCode:

 　　学习PHP，上m.sbmmt.com!
Copy after login

But in html5, this commonly used naming of "footer" is added as an html5 element tag member.

html5 GrammarStructure

1. Grammar

 第一行 　学习PHP，上m.sbmmt.com!
Copy after login

2. Add id to the footer element tag

 第一行 　学习PHP，上m.sbmmt.com!
Copy after login

3. Add footer Add class

 第一行 　学习PHP，上m.sbmmt.com!
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   

  
传统html 使用div布局
  
html5 footer标签布局
 
 　　 第一行 　学习PHP，上m.sbmmt.com! 
 
html5 footer标签布局设置class
 
 　 第一行 　学习PHP，上m.sbmmt.com!
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

The above is the detailed content of How to use the

tag element in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
h5 html5
source：php.cn
Previous article：How to use the
tag of html Next article：How to use HTML5
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Change background image opacity while preserving visibility of child elements Is it possible to set the opacity of a background image without affecting the opacity of c...
From 2023-10-10 19:40:19
0
1
257
How to fix footer CSS properties not displaying correctly? My footer is not displaying CSS properties correctly. I tried changing height, weight, pad...
From 2023-09-15 19:05:11
0
1
246
The rewritten title is: How to trigger JavaScript code when anchor is clicked in footer tag? This is my footer HTML code:
test1...
From 2023-09-07 13:39:39
0
1
279
How to include common components Header and Footer in SPA Vue.js I'm creating a project in vuejs spa/I have created common components header and footer whi...
From 2023-08-28 18:16:20
0
1
310
How to ensure that the height of all

tags is consistent I got the h3 tag. One of them is lower I tried using margin:0 and padding but it didn't wo...
From 2023-08-20 11:15:19
0
1
264

Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！