A brief introduction to the differences between HTML and XHTML, and HTML4 and HTML5 tags

Difference between HTML and XHTML
1. XHTML elements must be nested correctly
2. XHTML elements must be closed, and empty tags must also be closed. Such as

3. XHTML elements must be lowercase

4. XHTML documents must have a root element

5. XHTML attribute names must be lowercase, attribute values ​​must be quoted, and attributes cannot be abbreviated. For example: <input checked="checked" />
6. XHTML uses the id attribute instead of the name attribute.

Note: You should add an extra space before the "/" symbol to make your XHTML compatible with modern browsers.

7. Language attribute (lang) The lang attribute is applied to almost all XHTML elements. It defines the type of language used by the content inside the element. If you use the lang attribute on an element, you must add an additional xml:lang, like this: <div lang="no" xml:lang="no">Heia Norge!</div>

Three XML document types for XHTML 1.0
XHTML 1.0 specifies three XML document types to correspond to the three DTDs mentioned above.

Use when: You want clean markup and avoid clutter in presentation. Please use with Cascading Style Sheets.

Use it when you need to take advantage of the presentation features of HTML and when you need to write XHTML for browsers that do not support Cascading Style Sheets.

Use in this case: When you need to use HTML frames to split the browser window into two or more frames.

HTML4 vs HTML5

HTML5 is very popular recently. Let's take a look at some differences between HTML5 tags and HTML4 tags:
1. Changes in concepts:

HTML5 focuses on content and structure, not on performance

<header>
<hgroup>Navigation related data</hgroup>
</header>
<nav>Menu</nav>
<article>
<h1>Title: HTML5 Special Video Tutorial</h1>

2. Declaration and label:
HTML5 simplifies more declarations and tags, makes detailed provisions for compatibility, abolishes some elements, and adds some elements.
Introduction to HTML5 tag syntax and new tags

(1) Syntax tags:

a. Tags that do not allow writing end characters: area, basebr, col, command, Embed, hr, img, input, keygen, link, meta, param, source, Track, wbr
b. Tags that can omit the end character: li, dt, dd, p, rt, optgroup, option, colgroup, thread, tbody, tr, td, th
c. Tags that can be completely omitted: html, head, body, colgroup, tbody

(2) Add new tags:

The <article> tag defines an article
The <aside> tag defines a sidebar for the content section of a page.
The <audio> tag defines audio content
The <canvas> tag defines an image
The <command> tag defines a command button
The <datalist> tag defines a drop-down list
The <details> tag defines the details of an element
The <dialog> tag defines a dialog box (session box)
The <embed> tag defines external interactive content or plugins
The <figure> tag defines a group of media content and their titles. The <footer> tag defines the bottom of a page or area.
The <header> tag defines the header of a page or a section.
The <hgroup> tag defines information about a block in a file.
The <keygen> tag defines a generated key value in a form
The <mark> tag defines the text to be marked
The <meter> tag defines a measurement within a predefined range
The <nav> tag defines navigation links
The <output> tag defines some output types
The <progress> tag defines the progress of a task.
The <rp> tag is used in Ruby annotations to tell browsers that do not support Ruby elements how to display them.
The <rt> tag defines the interpretation of ruby ​​notations
The <ruby> tag defines ruby ​​notations.
The <section> tag defines a section
The <source> tag defines a media resource
The <time> tag defines a date/time
The <video> tag defines a video

HTML5 Simple Example