Home > Article > Web Front-end > HTML5 semantic structured standardization_html5 tutorial skills
HTML5 semantic structured standardization_html5 tutorial skills
- WBOYOriginal
- 2016-05-16 15:51:391424browse
HTML structure is clearer and more standardized, learn the ideas of HTML5 optimization structure.
HTML5 adds some new elements to mark commonly used structures, making html more semantic, but we cannot use it directly, and even if it is possible to use it, it will take ten or eight years.
It’s like microformats, use class instead, or feel free to use id and class name instead to make your structure clearer and promote it as a standard to make team collaboration smoother.
Some new structural tags
◎section: This can be a chapter or a section in a book, really anything that has its own heading in HTML4
◎header: the header displayed on the page; different from the head element
◎footer: footer; can display the signature in the email
◎nav: a set of links to other pages
◎article: An article in a blog, magazine, article compilation, etc.
Some examples
HTML5 document structure
...
...
XHTML document structure
header
nav
section
aside
footer
HTML5 image structure
XHTML image structure
Figure2.InstallMozillaXFormsdialog
HTML5 markup
The m element indicates that the text is "marked", but it does not necessarily need to be emphasized. Think of it like a highlighted section in a book.
Google’s cached page is a typical use case. If linking to a cached copy, the search term is flagged. For example, if you search for "Egret", a cached Google page might look like this:
TheGreatEgret (also known as theAmericanEgret )isalargewhitewadingbirdfoundworldwide.TheGreatEgret flieswithslowwingbeats. (also known as theAmerican Egret)isalargewhitewadingbirdfoundworldwide.TheGreatEgretflieswithslowwingbeats.
HTML5 adds some new elements to mark commonly used structures, making html more semantic, but we cannot use it directly, and even if it is possible to use it, it will take ten or eight years.
It’s like microformats, use class instead, or feel free to use id and class name instead to make your structure clearer and promote it as a standard to make team collaboration smoother.
Some new structural tags
◎section: This can be a chapter or a section in a book, really anything that has its own heading in HTML4
◎header: the header displayed on the page; different from the head element
◎footer: footer; can display the signature in the email
◎nav: a set of links to other pages
◎article: An article in a blog, magazine, article compilation, etc.
Some examples
HTML5 document structure
XHTML document structure
HTML5 image structure
XHTML image structure
HTML5 markup
The m element indicates that the text is "marked", but it does not necessarily need to be emphasized. Think of it like a highlighted section in a book.
Google’s cached page is a typical use case. If linking to a cached copy, the search term is flagged. For example, if you search for "Egret", a cached Google page might look like this:
TheGreat
Statement：
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
Previous article：html5 touch event realizes sliding up and down of touch screen page (2)_html5 tutorial skillsNext article：html5 touch event realizes sliding up and down of touch screen page (2)_html5 tutorial skills
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server