Web developers are often uncertain about the coding style and syntax to use in HTML.
Between 2000 and 2010, many web developers converted from HTML to XHTML.
With XHTML, developers were forced to write valid and "well-formed" code.
HTML5 is a bit more sloppy when it comes to code validation.
With HTML5, you must create your own Best Practice, Style Guide and Coding Conventions.
A consequent use of style, makes it easier for others to understand and use your HTML.
In the future, programs like XML readers, may want to read your HTML.
Using a well-formed "close to XHTML" syntax, can be smart.
Always keep your style smart, tidy, clean, and well-formed. |
Always declare the document type as the first line in your document:
If you want consistently with lower case tags, you can use:
HTML5 allows mixing uppercase and lowercase letters in element names.
We recommend using lowercase element names:
In HTML5, you don't have to close all elements (for example the <p> element).
We recommend closing all HTML elements:
Looking bad:
Looking good:
In HTML5, it is optional to close empty elements.
This is allowed:
This is also allowed:
The slash (/) is required in XHTML and XML.
If you expect XML software to access your page, it might be a good idea to keep it.
HTML5 allows mixing uppercase and lowercase letters in attribute names.
We recommend using lowercase attribute names:
Looking bad:
Looking good:
HTML5 allows attribute values without quotes.
We recommend quoting attribute values:
This will not work, because the value contains spaces:
This will work:
Always use the alt attribute with images. It is important when the image cannot be viewed.
Always define image size. It reduces flickering because the browser can reserve space for images before they are loaded.
Spaces around equal signs is legal:
But space-less is easier to read, and groups entities better together:
When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.
Try to avoid code lines longer than 80 characters.
Do not add blank lines without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add 2 spaces of indentation. Do not use TAB.
Do not use unnecessary blank lines and indentation. It is not necessary to use blank lines between short and related items. It is not necessary to indent every element:
In the HTML5 standard, the <html> tag and the <body> tag can be omitted.
The following code will validate as HTML5:
We do not recommend omitting the <html> and <body> tags.
The <html> element is the document root. It is the recommended place for specifying the page language:
Declaring a language is important for accessibility applications (screen readers) and search engines.
Omitting <html> or <body> can crash DOM and XML software.
Omitting <body> can produce errors in older browsers (IE9).
In the HTML5 standard, the <head> tag can also be omitted.
By default, browsers will add all elements before <body>, to a default <head> element.
You can reduce the complexity of HTML, by omitting the <head> tag:
Omitting tags is unfamiliar to web developers. It needs time to be established as a guideline. |
The <title> element is required in HTML5. Make the title as meaningful as possible:
To ensure proper interpretation, and correct search engine indexing, both the language and the character encoding should be defined as early as possible in a document:
Short comments should be written on one line, with a space after <!-- and a space before -->:
Long comments, spanning many lines, should be written with <!-- and --> on separate lines:
Long comments are easier to observe, if they are indented 2 spaces.
Use simple syntax for linking style sheets (the type attribute is not necessary):
Short rules can be written compressed, on one line, like this:
Long rules should be written over multiple lines:
Adding a space after a comma, or a semicolon, is a general rule in all types of writing. |
Use simple syntax for loading external scripts (the type attribute is not necessary):
A consequence of using "untidy" HTML styles, might result in JavaScript errors.
These two JavaScript statements will produce different results:
If possible, use the same naming convention (as JavaScript) in HTML.
Visit the JavaScript Style Guide.
Most web servers (Apache, Unix) are case sensitive about file names:
london.jpg cannot be accessed as London.jpg.
Other web servers (Microsoft, IIS) are not case sensitive:
london.jpg can be accessed as London.jpg or london.jpg.
If you use a mix of upper and lower case, you have to be extremely consistent.
If you move from a case insensitive, to a case sensitive server, even small errors will break your web.
To avoid these problems, always use lower case file names (if possible).
HTML files should have a .html extension (not .htm).
CSS files should have a .css extension.
JavaScript files should have a .js extension.