Programming For Beginners: 10 Best HTML Coding Practices You Must Know

HTML…One of the easiest thing to learn in programming. Most of the newbies and even kids step into programming picking up HTML. They learn, they build some web pages but a lot of developers even experienced one make some silly mistake while writing the code for frontend. Making these silly mistakes not only annoy other developers (when they need to make some changes) but also hurts your main site and drive the end-user away. We are going to mention some common and best practices which you should follow to write a clean and clear HTML code.

Programming-for-Beginners-10-Best-HTML-Coding-Practices-You-Must-Know

Following some common practices makes debugging easier and saves a lot of time. It also helps in search engine optimization as well.



1. Use Proper Document Structure With Doctype

HTML has nature that it will still render your markup correctly even if you forget to mention some elements such as <html>, <head>, <body> and <!DOCTYPE html>. You will see correct result in your browser as you want but that doesn’t mean you will find the same result in every browser. To avoid this issue it’s a good habit to follow a proper document struture with correct doctype. Doctype is the first thing to mention in HTML document. You can choose the right doctype from the link W3.org.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Welcome Programmers</h1>
    <p>This website is GeeksforGeeks.</p>
  </body>
</html>

chevron_right


2. Close the Tags

To avoid validation and compatibility issue don’t forget to close all the tags in your code. Today most of the text editors come up with features that close the HTML tags automatically still, it’s a good practice(and definitely for final check) to make sure that you don’t miss any parent or nested tag which is not closed. In HTML5 it’s optional to close HTML tags but according to W3C specification, you should close all the HTML tags to avoid any validation error in the future.

missing-div1-in-HTML

3. Write Tags in Lowercase

Make a habit to use lowercase for all the tags, attributes, and values in HTML code. It is an industry-standard practice and it also makes your code much more readable. Capitalizing the tags won’t affect the result in your browser but it’s a good practice to write elements in lowercase. Writing your code in lowercase is easy and it also looks cleaner.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Bad code-->
<SECTION>
  <p>This is a paragraph.</p>
</SECTION>
  
<!-- Good code-->
<section>
  <p>This is a paragraph.</p>
</section>

chevron_right


4. Add Image Attributes

When you add an image in your HTML code don’t forget to add alt attribute for validation and accessibility reasons. Also, make sure that you choose the right description for the alt attribute. Search engines rank your page lower as a result when you don’t mention alt attributes with an image. It’s also good to mention the height and width of the image. It reduces flickering because the browser can reserve space for the image before loading.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Bad Code-->
<img src="html5.gif">
  
<!-- Good Code-->
<img src="html5.gif"><img src="html5.gif" alt="HTML5" style="width:100px;height:100px">

chevron_right


5. Avoid Using Inline Styles

A lot of newbies make this mistake that they add inline-style in HTML tags. It makes your code complicated and difficult to maintain. Make a habit to keep your styles separate from HTML mark-up. Using inline styles can create so many problems. It makes your code cluttered, unreadable and hard to update or maintain. Separating HTML with CSS also helps other developers to make changes in code very easily.

Example:


filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Bad Code -->
<p style="color: #393; font-size: 24px;">Thank you!</p>
  
<!-- Good Code -->
<p class="alert-success">Thank you!</p>

chevron_right


6. Use a Meaningful Title and Descriptive Meta Tags

HTML title really matters a lot when it comes to search engine optimization or ranking of your page. Always try to make your title as meaningful as possible. The title of your HTML page appears in the google search engine result page and the indexing of your site relies on it.
A meta description tells the user what the page is all about, so make it descriptive that clearly specify the purpose of your website or page. Avoid using repeated words and phrases. When a user types some keyword in search engine bar that keyword is picked up by the search engine spiders and then it is used to find the relevant page for users based on the matching keyword used in meta tags.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
<meta name="description" content="A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.">
<link rel="shortcut icon" href="https://www.geeksforgeeks.org/favicon.ico" type="image/x-icon" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="theme-color" content="#0f9d58" />
  
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
  
<title>GeeksforGeeks | A computer science portal for geeks</title>

chevron_right


7. Use Heading Elements Wisely

Heading tags also play a crucial role in making your website search engine friendly. HTML has 6 different types of heading tags that should be used carefully. Learn to use <h1> to <h6> elements to denote your HTML’s content hierarchy also make sure that you use only one h1 per page. In W3C specs it is mentioned that your page content should be described by a single tag so you can add your most important text within h1 such as article title or blog post.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<h1>Topmost heading</h1>
<h2>Sub-heading underneath the topmost heading.</h2>
<h3>Sub-heading underneath the h2 heading.</h3>

chevron_right


8. Always Use Right HTML Elements

A lot of beginners make a common mistake using wrong HTML elements. They need to learn with time that which element should be used where. We recommend you to learn about all the HTML elements and use them correctly for a meaningful content structure. For example instead of using <br> between two paragraphs you can use CSS margin and/or padding properties. Learn when to use <em> and when to use <i> (both looks the same), learn when to use <b> and when to use <strong> (both looks the same). It comes with practice and when you keep your eyes on good code written by other developers. Another good example is given below..

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Bad Code -->
<span class="heading"><strong>Hello Geeks</span></strong>
<br><br>
This is Computer Science portal for geeks.
<br><br>
  
<!-- Good Code -->
<h1>Hello Geeks</h1>
<p>This is Computer Science portal for geeks.</p>

chevron_right


9. Proper Use of Indentation

it is important to give proper space or indentation in your HTML code to make it more readable and manageable. Avoid writing everything in one line. It makes your code cluttered and flat. When you use the nested element give proper indentation so that users can identify the beginning and end of the tag. A code that follows proper formatting is easy to change and looks nice to other developers. It’s a good coding practice that reduces development time as well.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Bad Code -->
<aside>
<h3>GeeksforGeeks</h3>
<h5>A computer science portal for geeks</h5>
<ul>
<li>Computer Science</li>
<li>Gate</li>
</ul>
</aside>
  
<!-- Good Code -->
<aside>
  <h3>GeeksforGeeks</h3>
  <h5>A computer science portal for geeks</h5>
  <ul>
    <li>Computer Science</li>
    <li>Gate</li>
  </ul>
</aside>

chevron_right


10. Validate Your Code

Last but not least make a habit to validate your HTML code frequently. Validating your code is a great piece of work and helps in finding the difficult issues. You can download W3C markup validation or Firefox developers tool bar to validate your site by url. Validators are very helpful in detecting the errors and resolving them.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


4


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.