current position:Home>Code specification - HTML

Code specification - HTML

2022-06-24 07:32:23Wen Yuan

HTML standard

This code specification applies to my personal project , At the time of formulation , The code documents of some large manufacturers and open source organizations are used for reference .

Attribute order

HTML Properties should be in the order given below , Make sure the code is readable .

  • class
  • id,name
  • data-*
  • src,for,type,href,value
  • title,alt
  • role,aria-*

class Used to identify highly reusable components , So it should come first .

id Used to identify specific components , You should use ( for example , Bookmarks on the page ), So it's in second place .

class name

  • class All words must be lowercase , Between words - Separate .
  • class Must represent the content or function of the corresponding module or component , Do not name with style information .
  • Avoid overly arbitrary abbreviations ..btn representative button, however .s It doesn't mean anything .
  • Based on the nearest father class Or basic (base) class As a new class The prefix of .

id name

  • Elements id Make sure the page is unique .
  • id It's recommended that words be all lowercase , Between words - Separate . The style of the same project must be consistent .
  • idclass name , Keep it as short as possible while avoiding conflict and describing it clearly .

name name

  • Same page , The same... Should be avoided name And id.
  • name General and back end model The naming rules for field names in are consistent .
    • for example Java Use small hump nomenclature (camelCase),Python Use underline _ Connect two lowercase words .

explain :

IE Browsers confuse elements id and name attribute , document.getElementById May get unexpected elements . So in the element of id And name Attribute naming needs to be very careful .

A good practice is , by id and name Use different nomenclature .

Label type properties

It's not necessary for CSS、JS Specify type properties ,HTML5 By default, it already contains .

recommend :

<link rel="stylesheet" href="" >
<script src=""></script>

Not recommended :

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

Annotation specifications

Single-line comments

Generally used for simple description , Such as some state descriptions 、 Attribute description, etc .

A space character before and after the comment , The comment is above the code to be annotated , Take a line alone .

recommend :

<!-- Comment Text -->

Module annotation

It is generally used to describe the name of the module and the beginning and end of the module .

A space character before and after the comment ,<!-- S Comment Text --> Indicates the beginning of the module ,<!-- E Comment Text --> Indicates the end of the module , There is a line between modules .

recommend :

<!-- S Comment Text A -->	
<div class="mod-a">
<!-- E Comment Text A -->
<!-- S Comment Text B -->	
<div class="mod-b">
<!-- E Comment Text B -->

Nested module comments

When the module comment appears again in the module comment , To highlight the main modules , Nested modules use <!-- /Comment Text -->.

The comments are written at the bottom of the tag at the end of the module , A single line .

<!-- S Comment Text A -->
<div class="mod-a">
    <div class="mod-b">
    <!-- /mod-b -->
    <div class="mod-c">
    <!-- /mod-c -->
<!-- E Comment Text A -->

Articles are constantly updated , this paper GitHub Front end cultivation Booklet Included , welcome Star. If you have different opinions on the content of the article , Welcome to leave a message .

copyright notice
author[Wen Yuan],Please bring the original link to reprint, thank you.

Random recommended