code-standard-html.md

layout	group	subgroup	title	landing-page	menu_title	menu_order	version	github_link
default	coding-standards	01_Coding standards	HTML style guide	Coding standards	HTML style guide	9	2.0	coding-standards/code-standard-html.md

This style guide defines Magento internal requirements for {% glossarytooltip a2aff425-07dd-4bd6-9671-29b7edefa871 %}HTML{% endglossarytooltip %} code style for teams that develop LESS and {% glossarytooltip 6c5cb4e9-9197-46f2-ba79-6147d9bfe66d %}CSS{% endglossarytooltip %} code. We recommend that developers who create Magento extensions and customizations also use these standards.

The guide is based on the Google HTML/CSS Style Guide with certain modifications that are described further.

Indentations

Use only spaces for indentation:

• Tab size: 4 spaces
• Indent size: 4 spaces
• Continuation indent: 4 spaces

Recommended {%highlight html%}

• One
• Two

{%endhighlight%}

End of file

Add a blank line at the end of file.

Self-closing tags

Always close self-closing tags.

Inappropriate {%highlight html%}
{%endhighlight%}

Recommended {%highlight html%}
{%endhighlight%}

Line length

Avoid code lines longer than 120 characters. When using an editor, it is inconvenient to scroll right and left to read the HTML code. Align tag attributes one under another to increase code readability.

Inappropriate {%highlight html%} {%endhighlight%}

Recommended {%highlight html%} {%endhighlight%}

Spaces around equals sign ("=")

Spaces around equals sign ("=") are acceptable, but not recommended. The code without spaces is easier to read.

Not recommended {%highlight html%}

{%endhighlight%}

Recommended {%highlight html%}

{%endhighlight%}

Spaces and colon in attributes

Use no space before the colon and one space after the colon for the sake of readability.

Not recommended {%highlight html%} {%endhighlight%}

Recommended {%highlight html%} {%endhighlight%}

Block-level elements

Use appropriate HTML5 elements for blocks. The following diagram shows how to define which HTML5 element to use for a block:

Class names

Use semantic class names and IDs. Avoid presentational class names.

Inappropriate {%highlight html%} Submit {%endhighlight%}

Recommended {%highlight html%}

Submit {%endhighlight%}

Accessibility

All pages should comply with the Web Content Accessibility Guidelines (WCAG) 2.0.

Microdata

All crucial pages (like product page) should contain microdata. Please pay attention to this recommendation when adding new functionality.