HTML Coding Standards

Topics

Warning: This page has been moved here
Please do not edit this page.

HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. HTML

Validation Validation

All HTML pages should be verified against the W3C validator to ensure that the markup is well formed. This in and of itself is not directly indicative of good code, but it helps to weed out problems that are able to be tested via automation. It is no substitute for manual code review. (For other validators, see HTML Validation in the Codex.)

Top ↑

Self-closing Elements Self-closing Elements

All tags must be properly closed. For tags that can wrap nodes such as text or other elements, termination is a trivial enough task. For tags that are self-closing, the forward slash should have exactly one space preceding it:

<br />

rather than the compact but incorrect:

<br/>

The W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. specifies that a single space should precede the self-closing slash (source).

Top ↑

Attributes and Tags Attributes and Tags

All tags and attributes must be written in lowercase. Additionally, attribute values should be lowercase when the purpose of the text therein is only to be interpreted by machines. For instances in which the data needs to be human readable, proper title capitalization should be followed.

For machines:

<br>
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /><br>

For humans:

<br>
&lt;a href="http://example.com/" title="Description Here">Example.com&lt;/a><br>

Top ↑

Quotes Quotes

According to the W3C specifications for XHTML, all attributes must have a value, and must use double- or single-quotes (source). The following are examples of proper and improper usage of quotes and attribute/value pairs.

Correct:

<br>
&lt;input type="text" name="email" disabled="disabled" /><br>
&lt;input type='text' name='email' disabled='disabled' /><br>

Incorrect:

<br>
&lt;input type=text name=email disabled><br>

In HTML, attributes do not all have to have values, and attribute values do not always have to be quoted. While all of the examples above are valid HTML, failing to quote attributes can lead to security vulnerabilities. Always quote attributes.

Top ↑

Indentation Indentation

As with PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher, HTML indentation should always reflect logical structure. Use tabs and not spaces.

When mixing PHP and HTML together, indent PHP blocks to match the surrounding HTML code. Closing PHP blocks should match the same indentation level as the opening blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience..

Correct:

<br>
&lt;?php if ( ! have_posts() ) : ?><br>
&lt;div id="post-1" class="post"><br>
&lt;h1 class="entry-title">Not Found&lt;/h1><br>
&lt;div class="entry-content"><br>
&lt;p>Apologies, but no results were found.&lt;/p><br>
&lt;?php get_search_form(); ?><br>
&lt;/div><br>
&lt;/div><br>
&lt;?php endif; ?><br>

Incorrect:

<br>
&lt;?php if ( ! have_posts() ) : ?><br>
&lt;div id="post-0" class="post error404 not-found"><br>
&lt;h1 class="entry-title">Not Found&lt;/h1><br>
&lt;div class="entry-content"><br>
&lt;p>Apologies, but no results were found.&lt;/p><br>
&lt;?php get_search_form(); ?><br>
&lt;/div><br>
&lt;/div><br>
&lt;?php endif; ?><br>

Top ↑

Credits Credits

Last updated: