Online HTML formatter

Best Practices to write HTML code

Hypertext Markup Language or HTML code is used for the creation of web pages. Whenever you visit a website and see any webpage then, its code is actually written in HTML. Being a markup language HTML is fairly easy to write and understand. Still there are some points that you must always remember while writing your HTML. Let us take a look at what are the best practices to write a clean, readable and understandable HTML code.

Use Meaningful Title Tags

A title tag gives the title of the page on the tab. That means when a user is working with multiple open tabs then the title will communicate the purpose of your page. So whenever you are working with a page, make sure to give a meaningful title. This meaningful title will also appear in Google’s result page, so if the title you provided is meaningful then it will automatically help to rank your page better in Google’s search results.

Use Descriptive Meta Tags

Search engine spiders, use meta tags proper and descriptive meta tags will make your web page more meaningful.

They can be used in two ways:

Descriptive Meta Tags: It describes the basic purpose of a webpage. This description is visible in the search engine results as well. Thus, a proper description of a webpage will help with SEO purposes.

Keywords Meta Attribute: It contains a comma separated list of keywords that are related to the web page.

Use Divs to Divide Your Layout into Major Sections

Div tags are an integral part of any HTML code. A web page consists of different sections such as header, footer, main body, etc. Thus, div tags whose purpose is to divide the layout of the webpage into meaningful sub sections must be used effectively. Proper usage of the div tags will make your code look clean, well organized and easy to read for others.

Also, don’t forget about indentation. Always remember to provide proper indentation for your tags. HTML Formatter will help you with this. It formats a HTML string or a HTML file with your desired indentation level.

Separate Content from Presentation

HTML is used to provide the content of a webpage, while CSS is used for the purpose of presentation. Inline CSS option is present but it is not recommended to use it while working on HTML code. External CSS and JS files are preferred as they not only keep the code clean but also they are used in better organization of the files. Apart from this, the style sheet written for one webpage can be reused in others as well. Thus, while writing the HTML you must always make sure to keep your CSS and JS files separate and use them in HTML code as a part of external CSS and external JS respectively.

DRY CSS,JS and HTML

CSS, JS and HTML are the three pillars on which a webpage is built. While working with each of these files you must follow the DRY principle that is Don’t Repeat Yourself. According to this principle, you must always make sure that you are not repeating anything. Therefore, it is advisable to use CSS and JS files as separate files, thus you can use them in multiple HTML documents with ease.

Along with this, always try to unify your CSS and JS files. A unified file will be easier to work with and much easier to share rather than a bunch of separate files. Also, a common CSS or JS file will further make sure that the DRY principle is followed in your code.

Use Heading Elements Wisely

Headings are one of the most underrated elements of the HTML. However, a proper usage of the heading elements will definitely help you in making your webpage look neat and organized. However, this does not means that an overuse of headings is good. Wherever there is a need of a hierarchy then the headings can be used to effectively portray the content on the webpage.

Use an Unordered List for Navigation purposes

Navigation is a very important aspect of a website design and the unordered list element combined with CSS makes your navigation menus semantic and well organized. The unordered list element or <ul> can be used for this purpose, because a navigation menu is a list of links.

By convention, an unordered list for your navigation menu has been accepted as a markup.

Close Your Tags

Paired tags must always be closed for desired output on the webpage. There are some browsers that may show accurate results even when the tags are not closed. However, it is not the correct way to proceed with the HTML code. While writing code, you can open and close the tag at the same time and then write code within.