Chapters

HTML Coding Standards

Writing HTML

We loosely follow the Block Element Modifier (BEM) convention here at True Market. It’s a bit ugly, though the benefit is in its intelligibility; as a developer can you understand what’s going on and how layout/components fit together by looking at your code? That’s the benefit of BEM. Here’s a cheatsheet to get you started if you are not familiar with it and here’s a good explanation by Free Code Camp.

The Golden Rule of HTML

Add targetable classes (even if you don’t need to add styles!) to your HTML. Your future self and team will thank you for it later. Otherwise we’ll have to break our workflow just to tweak a layout slightly.

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.

Attributes and Tags

All tags and attributes must be written in lowercase and surrounded in double or single quotes.

Correct:

        
            <input type="text" name="email" disabled="disabled" />
<input type='text' name='email' disabled='disabled' />

Incorect:

        
            <input type=text name=email disabled>

Indentation

As with PHP, HTML indentation should always reflect logical structure. Use tabs and not spaces.

When mixing PHP and HTML together, aim to indent HTML blocks once, this will help with readability.

Correct:

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

This is also accepted:

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

Incorrect:

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