Can quotes be ignored in html5 attribute values?

<blockquote><p>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. <!--”、“--></p></blockquote> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/202201/18/2022011810542942686.jpg" class="lazy" alt="Can quotes be ignored in html5 attribute values?" ></p> <p> The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer .</p> <p>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.</p> <blockquote> <p>W3C Working Draft (January 13, 2011): </p> <p>The attribute value can remain unquoted if it does not contain spaces or any <code>"</code>,<code>'</code> , <code>`</code>, <code>=</code>, <code><</code>, <code>></code> and other special symbols</p> </blockquote> <h2 id="strong-HTML-Detailed-explanation-of-the-rules-for-whether-to-add-quotation-marks-to-the-attribute-value-strong"><strong>HTML Detailed explanation of the rules for whether to add quotation marks to the attribute value </strong></h2> <p><span style="font-size: 18px;"><strong>Explanation: </strong></span></p> <p>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 </p> <p></p> <p>Remarks: <span style="color:#a2e043;"><strong>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] </strong></span></p> <p>Experiment: <strong><span style="font-size: 18px;"></span></strong></p>Case 1: Material name (nothing in the name Space): <p><strong></strong> Code ① (value with quotes): </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><img src="images/163logo.gif" alt="logo"/></pre><div class="contentsignin">Copy after login</div></div> <p></p>Normal display <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/00eae49203e0874f882870c50d05c6ca-0.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"> Code ② (value without quotes): </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><img src=images/163logo.gif alt="logo"/></pre><div class="contentsignin">Copy after login</div></div> <p> </p>Normal display<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/00eae49203e0874f882870c50d05c6ca-0.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p> Case 2: Material name (there are spaces in the name): <p><strong></strong></p> <p>## Code ① (Value with quotes): <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/00eae49203e0874f882870c50d05c6ca-2.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><img src="images/163 logo.gif" alt="logo"/></pre><div class="contentsignin">Copy after login</div></div> <p>Normal display </p> <p>Code ② (Value without quotes): <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/00eae49203e0874f882870c50d05c6ca-0.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><img src=images/163 logo.gif alt="logo"/></pre><div class="contentsignin">Copy after login</div></div> <p>Picture not found</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/f0500214e16d3d9f8377585a2cdaef5a-4.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"> 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 </p> <p><span style="color:#a2e043;"></span></p>Expand knowledge: Some easily overlooked details of html5<p><span style="font-size: 18px;"><strong></strong></span></p>In html5, spaces and slashes at the end of empty elements can be ignored. <ul style="list-style-type: disc;"> <li> <p></p>The quotation marks around the attribute value in the tag are optional. However, it is customary to write it down. </li> <li> <p></p>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. </li> <li> <p></p>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 </li> <li> <p></p> 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 </li> <li> <p></p>#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). </li> <li> <p></p>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). </li> <li> <p></p>The title tag must be located inside the head tag and behind the character encoding meta tag. </li> <li> <p></p>Related recommendations: "</li>html video tutorial</ul>"<p></p>

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!