Home Web Front-end H5 Tutorial X/HTML5 and XHTML2_html5 Tutorial Tips

X/HTML5 and XHTML2_html5 Tutorial Tips

May 16, 2016 pm 03:51 PM
html xhtml use element definition


After understanding the progress of XHTML 2, let’s take a look at the progress of X/HTML 5.
What’s cool about X/HTML 5
Conception of Chapter Elements
X/HTML 5 introduces new elements for dividing web pages into chapters. These components help search engines and accessibility tools better understand the content of the page. Use these new elements to make labels more readable.
The idea of ​​chaptered content is cool! But take a look at why using chapter technology isn't cool enough.
Dialogue elements
Conversation element is used to represent a conversation. It includes a dt element used to define the speaker and a dd element representing the content of the speaker's speech. For example:

Costello

Look, you gotta first baseman?

Abbott

Certainly.

Costello

Who's playing first?

Abbott

That's right.

Costello

When you pay off the first baseman every month, who gets the money?

Abbott

Every dollar of it.


figrue element
Mastheads are often used in media objects (photos, illustrations, charts, etc.) in printed publications (textbooks, newspapers, magazines, etc.). So far, Web markup languages ​​have no constructs that can produce this effect. The figrue element has a legend child element that can be used to specify the header of the image. For example:
XML/HTML code

Credit: Media Inc., 2007
Photo: J. Smith

m element The
m element represents a section of text that is marked or highlighted. This is very useful when displaying search keywords in dynamic web pages. At this time, the keywords in the page can be marked using the m element. For example, in response to the user's search for the keyword snow, the web page can generate the following content:
XML/HTML code

A snowman is a man-like sculpture constructed out of snow.


The input element has been enhanced
The input element function has been enhanced to support email, url, data-related, time-related, and numeric data types. This means that more verification functions can be completed on the client side.
Open process
The development process of X/HTML is much more open than XHTML 2. Everyone can participate in the X/HTML 5 creative process.
The fly in the ointment of X/HTML 5
Usage of chapter elements
The idea of ​​using chapter elements is good, but it seems a bit cumbersome in X/HTML 5 applications. Some explanations may even leave you more confused. For example:
The aside element represents a part of the page content. It is related to the content before and after the aside element. It can be regarded as an independent part of the content. These components are often used in sidebars in printing technology.
Aren’t div elements with role attributes more extensible and easier to understand?
Another mentioned chapter element is nav, which is used to represent links to other pages in the page. Do we really need the nav element? The nl element in XHTML 2 accomplishes this task better.
The deficiencies in HTML 4 and XHTML 1 will still exist in future specifications
Because X/HTML attempts to provide backward support, deficiencies in HTML 4 and XHTML 1 will still exist in X/HTML 5. Specifications need not be backwards empty; instead, client software should provide backward compatibility by supporting multiple specifications.
X/HTML 5 does not follow the X/HTML 5 manual
X/HTML 5 is designed to be backward compatible with HTML 4 and XHTML 1. Currently big, acronym, u and tt are not part of this specification, but other elements such as i and samll have redefined semantics. For example, i and small are defined in the HTML 4.01 specification as follows:
i: Make the text italic
small: render text in "small" font
In X/HTML 5, i and small have new meanings:
The i element uses different ways to express a piece of text or a paragraph that is different from the main text, such as classification design, technical terms, idioms in foreign languages, an idea, opinion, ship name or other needs in printing technology Renders text in italics. .
The small element presents small print fonts (parts of the document that explain legal constraints, such as copyright or existing drawbacks) and comments.
This breaks backwards compatibility with HTML 4 and XHTML 1 by redefining the meaning of i and small. This is because backward compatibility should mean that the HTML 5 user agent (browser) should be consistent with the HTML 4 user agent when rendering HTML 4 documents. Therefore, if HTML 5 emphasizes backward compatibility, structures that have little meaning in HTML 4 also have little meaning in HTML 5.
No way? Is the font element still supported?
Yes, X/HTML 5 still supports the font element if the developer uses a WYSIWYG editor. Is there any justification for this? Can WYSIWYG editors avoid using fonts?
WYSIWYG signature
Documents generated using a WYSIWYG editor must contain the following WYSIWYG signature in the head element:
XML/HTML code

Or:
XML/HTML code

What is the reason for doing this? Some kind of mark of shame? Does it tell the browser to prepare for the worst because this document was generated with a WYSIWYG editor? So, what if only part of the document is completed using WYSIWYG tools?
Supports predefined class names
Predefined class names are semantic CSS class names reserved in X/HTML 5 user agents. In the following example, copyright is a predefined class name:
XML/HTML code

One problem with predefined class names is that it doesn’t make sense to write them like this:
XML/HTML code



Only writing this way makes sense:
XML/HTML code

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles