Quelles sont les normes pour écrire du code HTML ?

Cette fois, je vais vous expliquer quelles sont les normes pour écrire du code HTML, et quelles sont les précautions pour écrire du code HTML. Ce qui suit est un cas pratique, jetons un coup d'œil.

Conventions générales
Balises

Balises à fermeture automatique, pas besoin de fermer (par exemple : img input br hr, etc.
Facultatif) ; La balise de fermeture doit être fermée (par exemple : ou
essayez de réduire le nombre de balises

<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="...">

Classe et ID

 ;

La classe doit être nommée d'après une fonction ou un contenu, pas une expression ;
les mots de classe et d'identifiant sont en minuscules, et lorsqu'ils sont composés de plusieurs mots, utilisez une séparation par tirets
utilisez un identifiant unique comme Javascript ; accrochez-vous et évitez de créer des classes sans informations de style ;

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

AttributsOrdre

Les attributs HTML doivent apparaître dans un ordre spécifique pour garantir la lisibilité du sexe.

id
class
nom
data-xxx
src, pour, type, href
titre, alt
aria-xxx, rôle

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

Guillemets

Utilisez uniformément des guillemets doubles pour la définition des attributs.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php Autres articles liés !

Lecture connexe :

Techniques d'optimisation HTML que vous devez connaître

Comment définir le centrage horizontal et vertical des éléments HTML

Comment utiliser HTML et CSS pour rédiger un message clair

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!