HTML Coding Standards you must conform to when writing HTML in Xfive projects.
- Write valid HTML
- Indentation
- Line endings
- Encoding and charset
- Special characters
- Images
- Images prefixes
- HTML anchors
- Comments
- Accessibility
- Attaching CSS and JavaScript files
- License
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>Element and attribute names must be in all lower case:
<!-- Correct -->
<input name="name" type="text" />
<!-- Wrong -->
<input name="name" TYPE="text" />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 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, even numeric attributes should be quoted—for example:
<!-- Correct -->
<input name="age" type="text" size="3" />
<!-- Wrong -->
<input name=age type=text size=3 />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 -->Format files with \n as the line ending (Unix line endings). Do not use \r\n (Windows line endings) or \r (Apple OS's).
Set encoding of HTML document and its charset to UTF-8 Normalization Form C (NFC):
<meta charset="utf-8" />Encode special characters, for example:
&
©
»
>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>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 -->Adhere to basic accessibility principles when writing HTML.
- 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 »
- 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 »
- 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 »
- 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 »
This work is licensed under a Creative Commons Attribution 4.0 International License.