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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
How get_template_part helps write reusable code in WordPress?WordPressHow to add AppRoutingModule in Angular application using command line?AngularOrder By and Group By in PostgresPostgresHow to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQLHow to concatenate variable with string in Swift?SwiftINTERSECT and EXCEPT in PostgresPostgres