html

HTML syntax good practices

Writing a code in a neat and clear format is the aim of good developers. The HTML code is usually lengthy and thus it is recommended to build a clean structure of HTML documents. The readability and the reusability of the HTML code depend upon the writing pattern of the code. This descriptive post illustrates good practices for writing HTML syntax.

HTML Syntax Good Practices

This section lists several practices that need to be followed for a good HTML document.

Document type (DOCTYPE)

The document type needs to be there at the top of the code to get to know about the type of content. In HTML5, the following text must be written at the top of the document (or you would get the structure by default in modern editors):

Document Structure

The document structure of HTML must be followed to render the pages correctly. If not doing so, you may have to encounter various rendering problems. A sample of an HTML5’s document structure is shown below:

Semantic Structuring

The semantic elements provide a proper meaning of their usage like <section>, <article>, <table>, etc. Whenever writing an HTML code, you must use semantic elements as they provide a purpose for their usage.

Title

A title summarizes the content of your page in a few words, so it is recommended to use the appropriate title that defines the content.

Meta tags

The meta tags are practiced to communicate with the browser or define the responsiveness of the web page. The responsiveness is carried out using the viewport attribute as shown below. You would also find that the charset of the web page is set to utf-8 (which will tell the browser the charset being used).

Optimize your code

An HTML document may be very complex, so it is suggested that you must look for optimization opportunities by limiting the number of elements on a page.

Indentation

The indentation in HTML will not produce any errors, however, it will effect the readability of the document. So, the indentation needs to be used properly by following the opening and closing tags in a proper manner.

Comments

For better usability of HTML code, comments play a vital role in conveying the purpose of the piece of code. The HTML comments can be used in the following manner:

Lowercase tags

HTML5 is a case-insensitive language, but it would be a good convention to use lowercase letters for the HTML elements.

Closing tags

Several code editors allow you to end the tag that is started. However, if the support is not provided by the editor, you are required to ensure the closing tag to avoid any execution error.

File Names

If a URL such as (“https://www.linuxhint.com/”) does not contain any filename at the end, then the default filename(specified by the server) is accessed. You must look for the default filename specified by the server (usually it is index.html) and configure the server accordingly.

Styles

The inline styles can be added inside an HTML element where the external CSS contains styling formats in an external file. In the case of bulk styling, the inline or internal styles may create a mess which results in poor visibility of the code. From the discussion, it is clear that the external CSS would be beneficial in every aspect.

Placement of a CSS file

A CSS file can be placed anywhere in the code, but it is recommended to add the CSS file inside the <head> tag. The placement of the CSS file in the head tag would assist in loading the page faster.

Validation

The validation of the code is quite necessary to avoid any execution errors. So, instead of waiting for the completion of the code, you must keep on validating the code time by time.

Conclusion

An HTML document can be created by following several practices. However, if the formatting is neat and clear it would be easy to reuse and read the code. This article illustrates the good practices of HTML syntax. These practices include lowercase tags, title, styles, a systematic document structure, optimizing the code, indentation, comments, meta tags. You have multiple possibilities to write HTML code, but it is recommended to follow the practices provided here to make the HTML document readable and reusable.

About the author

Adnan Shabbir