What are the standards for writing HTML code?

This time I will bring you what are the specifications for writing HTML code, what are the precautions for writing HTML code, the following is a practical case, let's take a look.

General convention
Tag

Self-closing tag, no need to close (for example: img input br hr, etc.);
Optional The closing tag must be closed (for example: bed06894275b65c1ab86501b08a632eb or 36cc49f0c466276486e50c850b7e4956);
Reduce the number of tags as much as possible;

<img src="images/google.png" alt="Google">  
<input type="text" name="title">   
<ul>  
  <li>Style</li>  
  <li>Guide</li>  
</ul>  
<!-- Not recommended -->  
<span class="avatar">  
  <img src="...">  
</span>  
<!-- Recommended -->  
<img class="avatar" src="...">

Class and ID

The class should be named after the function or content, not the expression;
class and id word letters are lowercase, and when composed of multiple words, use dash-separation;
Use a unique id as Javascript hook, and avoid creating classes without style information;

<!-- Not recommended -->  
<div class="j-hook left contentWrapper"></div>   
<!-- Recommended -->  
<div id="j-hook" class="sidebar content-wrapper"></div>

AttributesOrder

HTML attributes should appear in a specific order to ensure readability.

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

<a id="..." class="..." data-modal="toggle" href="###"></a>  
  
<input class="form-control" type="text">  
  
<img src="..." alt="...">

Quotation marks

Use double quotation marks uniformly for the definition of attributes.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to php Chinese website Other related articles!

Related reading:

HTML optimization techniques you must know

How to set the horizontal and vertical centering of HTML elements

How to use HTML and CSS to make a clear message

The above is the detailed content of What are the standards for writing HTML code?. For more information, please follow other related articles on the PHP Chinese website!