Edit in GitHubLog an issue

HTML style guide

This style guide defines the internal requirements for HTML code style for teams that develop LESS and CSS code. We recommend that developers who create 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:

Copied to your clipboard
1<ul>
2 <li>One</li>
3 <li>Two</li>
4</ul>

End of file#

Add a blank line at the end of file.

Self-closing tags#

Always close self-closing tags.

Inappropriate:

Copied to your clipboard
1<br>
2<img src="image.png" alt="image">
3<input type="text" name="username">

Recommended:

Copied to your clipboard
1<br />
2<img src="image.png" alt="image" />
3<input type="text" name="username" />

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:

Copied to your clipboard
<input data-bind="attr: { id: 'cart-item-'+item_id+'-qty', 'data-cart-item': item_id, 'data-item-qty': qty }, value: qty" type="number" size="4" class="item-qty cart-item-qty" maxlength="12"/>

Recommended:

Copied to your clipboard
1<input data-bind="attr: {
2 id: 'cart-item-'+item_id+'-qty',
3 'data-cart-item': item_id,
4 'data-item-qty': qty
5 }, value: qty"
6 type="number"
7 size="4"
8 class="item-qty cart-item-qty"
9 maxlength="12"/>

Spaces around equals sign ("=")#

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

Not recommended:

Copied to your clipboard
<link rel = "stylesheet" href = "styles.css">

Recommended:

Copied to your clipboard
<link rel="stylesheet" href="styles.css">

Spaces and colon in attributes#

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

Not recommended:

Copied to your clipboard
1<span data-bind="i18n : 'Update'"></span>
2<span data-bind="i18n:'Update'"></span>

Recommended:

Copied to your clipboard
<span data-bind="i18n: 'Update'"></span>

Block-level elements#

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

HTML5 element flowchart

Class names#

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

Inappropriate:

Copied to your clipboard
<button type="submit" class="button-green">Submit</button>

Recommended:

Copied to your clipboard
1
2<button type="submit" class="action-primary">Submit</button>

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.

  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.