Yogesh Chauhan's Blog

A few HTML coding standards from WordPress

in HTML & WordPress on July 28, 2021

When you create an HTML page, it should be verified against the W3C validator to make sure about the formatting according to the standards.

Here are a few standards.

Close all tags

As per Empty Elements guides from w3c, all elements must be properly closed.

For self-closing tags such as br and hr, add EXACTLY ONE space before the forward slash (/) and close them.


<!-- don't do this -->
<br>
<hr>

<!-- do this -->
<br />
<hr />


Human readable vs machine readable

HTML standards require to write all tags and attributes of those tags in lowercase.

Regarding the attributes values, write them if they are just going to be used for machines but if the data is going to be human readable then write it with proper capitalization.


<!-- machine readable attributes -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- human readable attribute title -->
<a href="http://yogeshchauhan.com/" title="Yogesh Chauhan's Blog">Example.com</a>


Attribute values must always be quoted

According to w3c HTML standards, all attribute values must be quoted, even the numeric ones.


<!-- Correct -->
<input type="email" name="user-email" disabled="disabled" />
<input type='email' name='user-email' disabled='disabled' />
<td rowspan="3">

<!-- Incorrect -->
<input type=email name=user-email disabled>
<td rowspan=3>


You can get away with the incorrect HTML code but that might lead to security vulnerabilities.


HTML indentation in PHP

You need to create a logical structure while adding HTML code in a PHP file.

Use tabs and avoid using spaces.

Even when you mix PHP and HTML code (e.g. in a loop), you need to indent PHP blocks to match the HTML code.

The indentation level should match while closing HTML tags and PHP blocks.

Like this:


<?php if ( ! have_posts() ) : ?>
<div class="post">
    <h1 class="title">Title</h1>
    <div class="content">
        <p>Lorem Ipsum...</p>
    </div>
</div>
<?php endif; ?>



Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Solution for the error Commit failed – exit code 1 received in Desktop GithubMiscellaneousOverview of Drupal and how it worksDrupalHow to create a simple slider with CSS and jQuery?CSSHow to set up the local environment and workspace for Angular development?AngularClean Form Input With These PHP Functions Before Inserting into DatabasePHPKanban vs Scrum: The two frameworks of agile principlesMiscellaneous