Some HTML is 'Optional'

HTML offers surprising flexibility. Certain elements and attributes, while technically optional, are automatically handled by browsers, resulting in valid markup. This can lead to seemingly incomplete code that still renders correctly.

Consider this example:

<p>Paragraph one.
</p><p>Paragraph two.
</p><p>Paragraph three.</p>

While unusual, the missing closing

tags are acceptable. The browser implicitly adds them during DOM construction. This often occurs without the developer's knowledge. Another instance:

This appears complete, yet the browser inserts a <tbody> element around the <code><tr>. Similarly, the <code><tbody> itself is often optional. Even <code><link> tags can omit their closing tag, as shown by Jens Oliver Meiert:

<link href="default.css" rel="stylesheet">

Some attributes also have default values, making them optionally omittable. For instance, a <button></button> element is automatically a <button type="submit"></button>.

While these omissions might be viewed as optimizations (reducing file size and improving load times), I prefer more explicit HTML. The potential for errors in complex scenarios outweighs the minor performance gain. Unquoted filenames, for example, can cause issues. Omitting closing tags can unexpectedly affect sibling elements. I prioritize code clarity and maintainability. The performance difference is typically negligible, similar to the debate around CSS selector optimization.

JSX's strictness in enforcing complete HTML is appealing, enhancing code readability and simplifying formatting tools like Prettier. However, automated tools like HTMLminifier can address this, optimizing compiled output without sacrificing code clarity in the source.

The above is the detailed content of Some HTML is 'Optional'. For more information, please follow other related articles on the PHP Chinese website!