As a FullStack developer with an experience of 11 years now, HTML has always been part of my daily life and actually the reason i fell in love with coding in the first place, long ago. A lot of students ask me if they should start learning HTML, or those who have already, if they are doing it right.

In this article, I will be giving you an introduction to HTML and also 5 simple steps to follow in order to write e clean and better HTML code. Whether you are just getting started with HTML, or you have some basics and want to improve, keep in mind that behind the history of success for a professional web developer, lies their love for HTML when they began coding.


What Is HTML

HTML stands for HyperText Markup Language and  is used for creating web pages with the help of styling (CSS). Today, every single website you can visit on the World Wide Web (internet) is build with the help of HTML.

 An HTML document is made of HTML tags each having its own purpose on structuring and displaying the information as you see it when you visit a website.


Brief History about HTML

In the late 1980's , a physicist, Tim Berners-Lee at CERN, proposed a  internet based hypertext systemfor CERN researchers.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a document called "HTML Tags" proposed by him in late 1991.  


What determines a clean HTML code?

When it comes to writing a clean code that is both efficient and easy to read and also works, to serve the purpose you have when writing it, a lot of developers will give there own opinions on this topic that do make sense. Setting personal opinions aside, according to the general convention, these are the few steps you can follow to write a clean html code:

1. Outsource CSS and JS code to external files

Most of the time your main page, while writing HTML code, will be called index.html. As the file extension indicates, it should contain only HTML code and not be "polluted with" CSS or JavaScript code like in the following image:



Try to avoid writing CSS or JavaScript in your index.html file. Use an external file instead and point to it from your index like in the image below:




2.  Include <meta> tags

Include <meta> tags in your <head> section, such as description, keywords, author, as it will help google index your page and better inform people what your page is about.


<meta charset="UTF-8"> will come in handy if your website is written in a language that contains special characters such as Ä/ä, Ö/ö, Ü/ü, ß. If you do not include this line of code you might end up having some strange-looking letters displayed on your page.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> will make your life easier when you have to deal with making your website mobile-friendly.


3.   IMPORTANT: Place your scripts right

Do not include <script> tags in your <head>. The reason for it is that every browser will render a HTML file one line at a time, and scripts usually tend to take more time to load.

 So if the rendering is stuck waiting for a script’s response, your user will most probably see a blank loading page, or an unresponsive page, which you definitively want to avoid as it gives your users a bad user experience.



Add your <script> at the bottom of your code instead, right before the closing </body> tag. This way, even if you a have a script that is taking a few seconds to load, the rendering is already done with your CSS files on the <head> and most of the HTML code so the user is served with the page and will not even understand that your page is stuck loading a script. 

Use <script> tags in your <head> section only when you absolutely have to(e.x. if you are using jquery)

 

4. Use CSS Classes instead of local styling

Try to avoid local styling like: style=”color:white”. When your code starts to grow bigger, and you need to make a change in your styles, most probably you will have to make changes in multiple locations where you have styled locally. Use classes instead.


5. Format your code to better understand what you have written

Last but not least, whenever you call it a day and close your text editor, I would suggest to format your html code. There are online tools you can use, by searching ‘html formatter’, that will do that for you. This way when you get back to your code tomorrow it is clean and fresh.



Conclusion 

HTML provides the building blocks of basically every single thing you can access online through a browser on your laptop, mobile, tablet or whatever. This means that, whether you want to become a Frontend, Backend, FullStack or Software Developer, HTML is the number-one-right-place to start. Feel free to ask me further questions in the comment section below and don't forget to share this article with a friend who might need to read it.