Home > Article > Web Front-end > Introduction to HTML 5 design principles
Introduction to HTML 5 design principles
- 王林forward
- 2021-02-01 14:14:572625browse
Introduction:
HTML5 is a language description method for constructing Web content. HTML5 is the next generation standard of the Internet and a language method for constructing and presenting Internet content. It is considered to be one of the core technologies of the Internet. HTML was created in 1990, and HTML4 became an Internet standard in 1997 and is widely used in the development of Internet applications.
Actually, html5 is not directly formulated by w3c. The direction of w3c is xhtml2, not html5. When xhtml2 was out of touch with reality and could not be put into practice, the w3c working group turned its research direction to html5. Why did xhtml2 never materialize? Because it violates a design principle, which is the famous Burstahl's law - be conservative when sending; be open when receiving. A series of principles were followed in the html5 design process, which enabled html5 to be promoted quickly. This article will introduce the 5 design principles followed by html5
Avoid unnecessary complexity
html4
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html5
<!DOCTYPE html>
html4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> html5 <meta charset="utf-8">
Support existing content
The following four pieces of code, in xhtml only the first paragraph is correct; in html5, all of them are correct
<img src="foo" alt="bar" /> <p class="foo">Hello world</p> <img src="foo" alt="bar"> <p class="foo">Hello world <IMG SRC="foo" ALT="bar"> <P CLASS="foo">Hello world</P> <img src=foo alt=bar> <p class=foo>Hello world</p>
(Learning video sharing: html video tutorial)
Solve real-life problems
In HTML4, even if two block-level elements have the same link address, It must also be written separately, because inline elements cannot contain block-level elements
<h2><a href="/path/to/resource">Headline text</a></h2> <p><a href="/path/to/resource">Paragraph text.</a></p>
And in html5, due to the use of the content model, 3499910bf9dac5ae3c52d5ede7383485 elements can also contain block-level elements
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>Content model
html5 adds a number of new elements, including: section, article, aside and nav, which represent a new content model - partitioning content. People have been using divs to organize content on pages in the past, but like other similar elements, divs themselves have no semantics. But section, article, aside, and nav are actually telling you clearly that this section is like another document within the document. Any content located within these elements can have its own summary, its own title, its own footer.
Smooth degradation
When the browser encounters an unrecognized type value, it will interpret the value of type as text
input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
Related recommendations: html5 tutorial
The above is the detailed content of Introduction to HTML 5 design principles. For more information, please follow other related articles on the PHP Chinese website!