The meaning, usage, and difference between the new HTML5 tag and HTML4, html5html4

The meaning, usage, and difference between the new HTML5 tag and HTML4, html5html4

1. <article>:

Define independent content, such as Forum posts, blog entries, and user comments.

HTML5:<Article> </article>
HTML4:<Div> </div>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

2. <aside>:

Define two or more sidebar content, such as contact us, customer service, website announcements, and advertisements.

HTML5:<Aside> the content of Aside is independent, but should be related to the content of the document. </Aside>
HTML4:<Div> the content of Aside is independent, but should be related to the content of the document. </Div>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

3. <audio>:

Define audio content, such as music or other audio streams.

HTML5:

<Audio src00000000audio.wav ">

Your browser does not support the audio tag. (Note: You can add the text content between the start tag and the end tag, so that if the browser does not support this element, this information can be displayed .)

</Audio>

HTML4:<Object type = "application/ogg" data = "someaudio.wav"> <param name = "src" value = "someaudio.wav"> </object>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

4. <canvas>:

Define images, tables, or other images. (Canvas is only a graphical container. We must use scripts (JavaScript) to draw images)

HTML5:

<Canvas id = "myCanvas"> </canvas>

<Script type = "text/javascript">

Var canvas = document. getElementById ('mycanvas ');

Var ctx = canvas. getContext ('2d ');

Ctx. fillStyle = '# ffff00 ′;

Ctx. fillRect (0, 0, 20, 30 );

</Script>

HTML4:<Object data = "inc/hdr. svg" type = "image/svg + xml" width = "200" height = "200"> </object>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

5. <datalist>:

Defines the Option list, which must be used with the input element. The list attribute of the input element is used to define the optional value of input. (Datalist and its options are not displayed. It is only a valid input list)

HTML5:

<Input id = "fruits" list = "fruits"/>

<Datalist id = "fruits">

<Option value = "Apple">

<Option value = "Banana">

</Datalist>
HTML4:See combobox.

 

6. <details>:

Used to describe the details of a document or a certain part of the document.

HTML5:

<Details>

<Summary> Some title. </summary>

<P> Some details about the title. </p>

</Details>
HTML4:<Dl>7. <embed>:

Defines External Interactive Content or plug-ins.

HTML5:

<Embed src##someone.swf "/>

HTML4:<Object data = "flash.swf" type = "application/x-shockwave-flash"> </object>

 

8. <figure>:

Define a set of media content (images, charts, photos, Code, etc.) and their titles. (If deleted, the document cannot be left blank)

HTML5:

<Figure>

<P> The title of the image. </p>

</Figure>

HTML4:<Dl>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

9. <footer>:

A script that defines a page or a region. The name, creation date, or contact information of the document can be included.

HTML5:<Footer> </footer>
HTML4:<Div> </div>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

10.

Defines the headers of a page or area.

HTML5:<Header> HTML4:<Div> </div>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

11.

Define information about a block in the document and use the

HTML5:

<Hgroup>

<H1> Welcome my world! </H1>

<H2> This is a title.

</Hgroup>
HTML4:<Div> </div>

 

12. <keygen>:

Defines the key value generated in a form. Specifies the key pair Generator Field Used for forms. When a form is submitted, the private key is stored locally and the Public Key is sent to the server.

HTML5:

<Form action = "demo_keygen.asp" method = "get">

Username: <input type = "text" name = "usr_name"/>

Encryption: <keygen name = "security"/>

<Input type = "submit"/>

</Form>
HTML4:None

Browser support:

Firefox, Chorme, Safari, and Opera.

 

13. <mark>:

Define tagged text to highlight the text you want to display.

HTML5:

<P> I like <mark> apple </mark> most. </p>

HTML4:<Span> </span>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

14. <meter>:

Define a scale. It is used only for measurements with the largest and minimum values known. (The measurement range must be defined, either in the text of the element or in the min/max attribute)

HTML5:

<Meter min = "0" max = "10"> 2 </meter>

<Meter> 2 out of 5 </meter>

<Meter> 10% </meter>

HTML4: none

Browser support:

Firefox, Chorme, Safari, and Opera.

 

15. <nav>:

Define the navigation link. (If there is a "front and back" button in the document, put it in the <nav> element)

HTML5:

<Nav>

<A href = "index. asp"> Home </a>

<A href = "Previous. asp"> Previous </a>

<A href = "Next. asp"> Next </a>

</Nav>

HTML4:<Ul> </ul>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

16. <output>:

Define different types of outputs, such as the output of scripts.

HTML5:<Output> </output>
HTML4:<Span> </span>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

17. <progress>:

The process of defining tasks (such as downloading) can be used to display the progress of time-consuming functions in JavaScript.

HTML5:

<Progress>

<Span id = "progress"> 15 </span> %

</Progress>
HTML4:None

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

18. <section>:

Define sections (sections and sections) in the document ). For example, a section, header, footer, or other part of the document.

HTML5:<Section> </section>
HTML4:<Div> </div>

 

19. <source>:

Defines media resources for media elements (such as <vodeo> and <audio>.

HTML5:<Source>
HTML4:<Param>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

20. <time>:

Defines a date/time, which can be coded in a machine-readable manner. For example, the user agent can add birthday reminders or scheduled events to the user's calendar, the search engine can also generate more intelligent search results.

HTML5:

<P> everyone works at <time> </time> in the morning. </P>

<P> <time datetime = "2012-01-01"> New Year's Day </time> Gala. </P>

HTML4:<Span> </span>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.

 

21. <video>:

Define videos, such as movie clips or other video streams.

HTML5:

<Video src?#movie.ogg "controls =" controls ">

Your browser does not support video tags. (Note: You can add the text content between the start tag and the end tag, so that if the browser does not support this element, this information can be displayed .)

</Video>

HTML4:<Object type = "video/ogg" data = "movie. ogv"> <param name = "src" value = "movie. ogv"> </object>

Browser support:

IE9 +, Firefox, Chorme, Safari, and Opera.