Online HTML formatter

Tips to write better HTML

HTML or Hypertext Markup Language is not a programming language that we all know. However, still there are some tips that come in handy whenever you are trying to write HTML for your webpage. Are you wondering what might be the rules to write good HTML? Well, don’t worry cause here we are with top tips that will help you to write better HTML, since they are really simple so you won’t sweat applying them. So, let’s get started:


Presence of a DOCTYPE as the first line of HTML is something that you must keep in mind. While using DOCTYPE also make sure that you are adhering to the requirements in your code. As they say a good beginning is necessary for a good ending, so it will not hurt you to start good with your HTML.

Character Set & Encoding Characters

We have got proper encoding patterns of the commonly used characters in HTML, so always make sure that you are using them. So instead of writing &use its encoding &this will not only make your HTML look cleaner but will make sure that you will feel better too.

Also, don’t forget that character encoding make sure to mention it before using any of its elements.

Proper Indentation

Indentation has no control on how the page is rendered, but it has a huge effect on the readability of the code. Standard procedure is to indent one tab on starting an element and move back when closing it. Indentation can be applied using HTML Formatter , it formats a HTML string/file with your desired indentation level. The formatting rules are not configurable but are already optimized for the best possible output. 

So you don’t need to sweat if you are planning on to indent your HTML.

Keep Your CSS And JavaScript External

Keeping CSS and JS external is not the rule, but it is the convention for a clean HTML code. It will help you to organize your code properly and will keep the way open for the changes in the future as well. If you are not happy with how the things turn out to be then you can easily go to separate files and make desired changes over there. 

With a common CSS and JS file that too which is external, will help you to apply your designs to multiple webpages at once. And voila you will just practice DRY principle; but still HTML will not become a programming language!

 Nest Your Tags Properly

No Jokes this time!! But proper nesting of tags is a must. If you want someone to look at your code and feel happy about it then proper nesting of tags is what you should always do. This not only makes your code look good but also helps others to understand that what you are doing. And even if you need to revisit your code then properly nested tags will act as your old pals guiding you to your destination.

Eliminate Unnecessary Divs

 ‘divitis’ which refers to the overuse of divs in HTML markup may ruin all your efforts to generate a good looking HTML. So, if you really like your divs then it is awesome however overusing them may not be a good choice. It leads to a proliferation of the div element.

Use Better Naming Conventions

Everyone likes being called by a name that accurately matches their personality. So, why keep the HTML elements away from this luxury. So using better naming conventions will help you only while referencing those elements. Think of it this way – if you are designing a form and needing user name for validation via JS, then if user name is referenced by the it’s id : name, then it will be easier to work with it. Rather then when it’s id is : formtextboxuserinput.

So, always make sure that you use better naming conventions! 

Leave Typography To The CSS

Typography is essential and it makes text look good. We all agree on that however, instead of writing it simply as text a better option would be to just use your CSS for this purpose.

ul li a {
            text-transform: uppercase;

Will do the same job in a better way then simply just writing an uppercase text.

Logical Ordering

Logical ordering of the sections is the best. However, only try this if it is possible. That means if you are planning to add a footer then it is probably for the best that you add it at the end of your HTML. Same goes with other sections like a navbar, or a body. Although there may be some situations where this kind of approach is not feasible, so don’t stress on it. But, whenever you get a chance make sure to go with logical ordering.

Although there is no right way to do things, however there is a distinction between a clean and messy HTML.