6 principles that html5 needs to abide by (introduction)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

6 principles that html5 needs to abide by (introduction)

青灯夜游

Sep 26, 2018 pm 04:33 PM

html5

What are the series of principles that enable HTML5 to be quickly promoted? This chapter introduces you to the six principles that HTML5 needs to abide by. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Principle 1: Avoid unnecessary complexity

html4

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Copy after login

html5

<!DOCTYPE html>

Copy after login

html4

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Copy after login

html5

<meta charset="utf-8">

Copy after login

Principle 2: Support existing content

The following four pieces of code are only available in xhtml The first paragraph is correct; and in html5, everything is correct

XML/HTML

<img src="foo" alt="bar" />  
<p class="foo">Hello world</p>

Copy after login

<img src="foo" alt="bar">  
<p class="foo">Hello world

Copy after login

<IMG SRC="foo" ALT="bar">  
<P CLASS="foo">Hello world</P>

Copy after login

<img src=foo alt=bar>  
<p class=foo>Hello world</p>

Copy after login

Principle 3: Solve real-life problems

In html4, even if two block-level elements have the same link address, they must 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>

Copy after login

And in html5 , due to the use of the content model, the element can also contain block-level elements

<a href="/path/to/resource">  
    <h2>Headline text</h2>  
    <p>Paragraph text.</p>  
</a>

Copy after login

Principle 4: Be truthful and pragmatic

html5 has added multiple Elements, including: section, article, aside and nav, they 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.

Principle 5: 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"

Copy after login

Principle 6: End user first

In case of conflict, the end user takes priority, followed by the author, followed by the implementer, followed by the standard The framer, in the end, is the theoretical perfection.

The above are the 6 design principles that HTML5 needs to follow. I hope it will be helpful to everyone's learning.

The above is the detailed content of 6 principles that html5 needs to abide by (introduction). For more information, please follow other related articles on the PHP Chinese website!

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