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 -->

<!-- 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>
<?php endif; ?>

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresShort-Circuit Evaluation in JavaScriptJavaScript3 JavaScript methods to use when you want to go back and forth in historyJavaScriptPre-defined DatePipe format options in Angular 9AngularHow to compress images with gulp in WordPress?WordPressperspective property in CSSCSS