Giters

nganttk89 / html-coding-standards

HTML Coding Standards you must conform to when writing HTML in Xfive projects.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HTML Coding Standards

HTML Coding Standards you must conform to when writing HTML in Xfive projects.

Table of contents

Write valid HTML

All HTML code must be valid and well formed. You must validate it against the HTML specification pertaining to the project you are working on. Unless another specification is requested or needed, use HTML5 Document Type Definition:

<!DOCTYPE HTML>

Lowercase names

Element and attribute names must be in all lower case:

<!-- Correct -->
<input name="name" type="text" />

<!-- Wrong -->
<input name="name" TYPE="text" />

Closing tags

Non-empty elements must have corresponding closing tags.

<h1>My title</h1>
<p>Some text</p>

Empty elements must be followed by a corresponding closing tag:

<span></span>

Elements with a single tag, such as HR, BR, INPUT, IMG must end with >:

<br>
<hr>
<img src="john.jpg" alt="John Doe" width="200" height="100">

Nested elements

Nested elements must be nested appropriately - for example:

<!-- Correct -->
<div>
  <p>Some text</p>
</div>

The <p> tag and its corresponding closing tag, </p>, are both nested inside the <div> and </div> tags.

If elements overlap they are not properly nested. This is illustrated in the following code:

<!-- Wrong -->
<div>
  <p>Some text</div>
</p>

Attribute values

Attribute values, even numeric attributes should be quoted—for example:

<!-- Correct -->
<input name="age" type="text" size="3" />

<!-- Wrong -->
<input name=age type=text size=3 />

Indentation

Use soft tabs with 2 spaces for code indentation.

Use indentation consistently to enhance the readability of the code.

When elements carry over more than one line of code, indent the contents of elements between the start tag and the end tag. This will make it easy to see where the element begins and ends.

Example:

<div class="container">
  <header class="header">
    <h1>Site Name<span></span></h1>
  </header>
  <!-- / header -->
  <hr>
  <nav class="navigation">
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
  <!-- / navigation -->
</div>
<!-- / container -->

Line endings

Format files with \n as the line ending (Unix line endings). Do not use \r\n (Windows line endings) or \r (Apple OS's).

Encoding and charset

Set encoding of HTML document and its charset to UTF-8 Normalization Form C (NFC):

<meta charset="utf-8" />

Special characters

Encode special characters, for example:

&amp;
&copy;
&raquo;
&gt;

HTML anchors

When you need to link to the section inside a HTML document use ID attribute:

<a href="#section">link</a>
<div id="section"></div>

If it isn't possible to use IDs (for example because of ASP.NET platform), use a named anchor:

<a href="#section">link</a>
<a name="section"></a>

Comments

Insert ending comment after closing tag of the HTML section in this format:

<!-- / name-of-class-or-id -->

Do not use starting comment.

Examples:

<ol class="accessibility-nav">
  <li><a href="#navigation">Skip to navigation</a></li>
  <li><a href="#content">Skip to content</a></li>
  <li><a href="#sidebar">Skip to sidebar</a></li>
</ol>
<!-- / accessibility-nav -->
 
<p>
  <a href="#" title="Go to homepage"><em>Home</em></a>
</p>
<!-- / breadcrumb -->

Accessibility

Adhere to basic accessibility principles when writing HTML.

General

  • Use h1 - h6 to identify headings - Read more »
  • Use structural elements to group links - Read more »
  • Provide definitions for abbreviations by using the abbr and acronym elements - Read more »
  • Use language attributes on html element to identify the default language of a document - Read more »

Tables

  • Use table markup to present tabular information - Read more »
  • Use the scope attribute to associate header cells and data cells in data tables - Read more »
  • Use the summary attribute of the table element to give an overview of data tables - Read more »

Forms

  • Provide submit buttons - Read more »
  • Use alt attributes on images used as submit buttons - Read more »
  • Use label elements to associate text labels with form controls - Read more »
  • Use the title attribute to identify form controls when the label element cannot be used - Read more »
  • Indicate required form controls - Read more »

Images

  • Use alt attributes on img elements - Read more »
  • Use null alt text and no title attribute on img elements for images that Assistive Technology should ignore - Read more »

License

This work is licensed under a Creative Commons Attribution 4.0 International License.

About

HTML Coding Standards you must conform to when writing HTML in Xfive projects.