Standard format and code coding convention in HTML5

HTML coding rules

Web developers often disagree with code writing and syntax when using HTML. During the period from 2000 to 2010, many programmers changed the way of writing from HTML to XHTML - a language that requires syntax to be written in a well-formed standard.

HTML5 has a way of writing more freely, so to become a smart programmer, you need to create your own habit of writing code in the right way so that others can easily understand and use your HTML code. Moreover, in the future, search engines and formatted analyzers like XML readers may want to read your HTML pages. Using syntax close to XHTML standard will be a smart choice for programmers. Remember to keep your code neat, clean, and accurate.

Use the correct DOCTYPE

Always declare the DOCTYPE document type in the first line of your code: If you want consistency with the other tags below, you can use:

Write often for element names

HTML5 allows the use of a combination of upper and lower case letters in element names. However, you should use lowercase element names, because:

1. Combining both upper and lower case letters will cause confusion.
2. Developers often use lowercase letters (like XHTML standard).
3. Writing often looks at the code more clearly.
4. Writing often will be faster and easier.

Always close all HTML elements

In HTML5, you don't necessarily have to close all elements. But it is recommended that you use the closing tag after the end of the element.

Close empty HTML elements

In HTML5, empty elements can be used to close or not. You can use one of two ways to write: However, a closed slash (/) is required in XHTML and XML. If you want XML reading software to understand your page, you should use the closing tag after ending the element.

Write often for attribute names

HTML5 allows to use both uppercase and lowercase letters with attribute names. However, you should use lowercase letters because:

1. Using both upper and lower case letters is very messy
2. Developers often use lower names (as in XHTML)
3. Writing often looks at the code more clearly.
4. Writing often will be faster and easier.

Use double quotes for attribute values

HTML5 allows non-quotes attribute values. However, it is better to include quotation marks because:

1. Values ​​in brackets will be easier to read and distinguish.
2. You need to use quotation marks if the value contains spaces.

Image properties

Always use alt attributes with images inserted into the site. This is very important when image insertion is not displayed and is also a way for search engines to easily find the image content you intend to say. Also, always declare image width and height. It will make your site not blinking because the browser can reserve space for images before downloading.

White space and equal sign

HTML5 allows spaces to be placed at the ends of the equals sign. But when it comes to writing, it will make it easier to read.

Avoid long code on a line

When you use an HTML editor, if there is a too long line of code you will have to slide the scroll bar right or left to be able to read the entire line of code. So try to avoid lines of code longer than 80 characters.

Blank line and backline

1. Do not add blank lines without reason.
2. To make it easier to read, add a blank line to separate long or logical segments between tags.
3. One line should be reversed, but the tab key should not be used.
4. Do not add blank lines or spaces when not needed.

Missing card and

In HTML5, tags and tags can be ignored. The code below is still completely valid. Element is the frame of the page. In it you can declare the language you are using in the page: Declaring a language is important for search engines and applications when accessing your site.Ignoring or possibly damaging the DOM and XML software, may fail when displaying on an older browser (IE9).

Missing card

In the HTML5 standard, tags can also be ignored. By default, the browser will automatically add tags before the card . You can reduce the complexity of HTML, by skipping tags : However, it is better not to ignore the card . Removing tags seems to be unfamiliar to programmers.

Card

To ensure correct and correct indexing with search engines when looking for your site, set the language and encryption characters that the page uses right at the first line:

View mode settings

HTML5 introduced a method to help web designers control the view through tags . View is the area visible to users on the site. It varies depending on the device, will be smaller on a mobile phone and bigger on a computer screen. The viewport element instructs the browser how to control the size and scale of the page. So you should use

Comments in HTML

Short comments should be written on one line, as follows: A multi-line comment should be written as follows: Long annotations will be easier to see if you start up with two spaces.

Style Sheets

You can use simple syntax to link to CSS (it is not necessary to use the type attribute): Short codes can be rewritten on one line, as follows:

 p.intro {font-family: Verdana; font-size: 16em;} 

The long code is written on multiple lines, as follows:

 body { 
 background-color: lightgrey; 
 font-family: "Arial Black", Helvetica, sans-serif; 
 font-size: 16em; 
 color: black; 
 } 

1. Put opening brackets on the same line as the card to be decorated.
2. Use a space before the opening bracket.
3. Use 2 spaces to backline the internal properties.
4. Use semicolons after each pair of 'attributes / values'.
5. Use parentheses only if the value contains spaces.
6. Put parentheses in a separate line, in front of no spaces.
7. Do not use more than 80 characters on the same line.

Link JavaScript in HTML

You can use simple syntax to link to JavaScript (it is not necessary to use the type attribute):
If possible, use the same naming conventions (like JavaScript) in HTML.

Write often directory names

Some web servers (Apache, Unix) are case sensitive with the file name: "london.jpg" cannot be accessed as "London.jpg". But there are web servers (Microsoft, IIS) that are not case sensitive: london.jpg can be accessed by name London.jpg or london.jpg. Therefore, if you use a combination of uppercase and lowercase letters, you must be extremely consistent to avoid errors when moving the server. To avoid leading to these errors, always use lowercase letters for file names.

File extension

1. HTML files should have the extension .html (or .htm).
2. CSS files should have the .css extension
3. JavaScript files should have the extension .js

The difference between .htm and .html

There is no difference between the .htm and .html extensions . Both will be treated as HTML when working with any browser and server.

1. .htm: of the original DOS, where the system limits the extension to 3 characters.
2. .html: of the Unix operating system, there is no limit.

Technical differences

When the URL does not specify a file name (like https://www.tipsmake.com/html/), the server will automatically return the default file name. The default default file is index.html, index.htm, default.html and default.htm.

If your website has been configured with the default file name 'index.html', you must name the file 'index.html', not set to 'index.htm.' However, the server can be configured with many default files, and usually you can set up multiple default files if needed.

Anyway, the full extension for HTML files is .html, and there's no reason that you don't use this name. That's all. Become a smart programmer by writing neat, clean and standard code like this.

Good luck!

David Pac

Update 25 May 2019