Can quotes be ignored in html5 attribute values?

html5 attribute values ​​can ignore quotes. In HTML5, the quotation marks around the attribute value in the tag are optional, if the attribute value does not contain spaces or any """, "'", "`", "=", " " and other special symbols, it can remain in the format without quotation marks.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer .

html5 can use single quotes, double quotes, or no quotes. The quotes on both sides of the attribute value in the tag are optional. However, it is customary to still write it.

W3C Working Draft (January 13, 2011):

The attribute value can remain unquoted if it does not contain spaces or any ",' , `, =, , <code>> and other special symbols

HTML Detailed explanation of the rules for whether to add quotation marks to the attribute value

Explanation:

When the attribute value is a word or a whole string (without When the attribute value is multiple words or a whole string of characters (with spaces in between): quotation marks are required

Remarks: The above are the teacher’s original words. Personal experiment found that whether to add quotation marks depends on whether there are spaces in the value. If there are spaces, add quotation marks. If not, you don’t need to add them. [But for the sake of convenience Programming habits, it is recommended to add quotation marks in both cases]

Experiment:

Case 1: Material name (nothing in the name Space):

Code ① (value with quotes):

<img  src="/static/imghwm/default1.png" data-src="images/163logo.gif" class="lazy" alt="Can quotes be ignored in html5 attribute values?" >

Normal display

Code ② (value without quotes):

<img  alt="Can quotes be ignored in html5 attribute values?" >

Normal display

Case 2: Material name (there are spaces in the name):

## Code ① (Value with quotes):

<img  src="/static/imghwm/default1.png" data-src="images/163 logo.gif" class="lazy" alt="Can quotes be ignored in html5 attribute values?" >

Normal display

Code ② (Value without quotes):

<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/f0500214e16d3d9f8377585a2cdaef5a-4.png?x-oss-process=image/resize,p_40" class="lazy" alt="Can quotes be ignored in html5 attribute values?" >

Picture not found

Summary: It can be seen that if there are spaces in the value, the value must be quoted. If there are no spaces in the value, you can add it or not

Expand knowledge: Some easily overlooked details of html5

In html5, spaces and slashes at the end of empty elements can be ignored.

• The quotation marks around the attribute value in the tag are optional. However, it is customary to write it down.

• The numeric value of the attribute does not need to enter the unit, only the value itself can be entered. Such as height and width in labels, etc.

• Some attributes in the tag only accept predefined values ​​(also called enumeration values). Be sure to write enumeration values ​​in lowercase letters. Such as input type. Some attributes can be any value, such as the Value of input. There is also a special Boolean attribute value in the

• tag. This attribute value is optional and represents true if present. If you must fill in a value, fill it in itself. Such as hidden="hidden". Naming convention for

• #html: It is best to use all lowercase letters, use - (dash) between words to separate words, and use .html for the extension (although you can also use . htm means html page).

• The alt attribute in the img tag is used to display the text if the image does not load successfully or is only accessed through a text-only browser (rarely), and the screen reader will read the text. Text (Accessibility).

• The title tag must be located inside the head tag and behind the character encoding meta tag.

• Related recommendations: "
html video tutorial

"

The above is the detailed content of Can quotes be ignored in html5 attribute values?. For more information, please follow other related articles on the PHP Chinese website!