Programming For Beginners: 10 Best HTML Coding Practices You Must Know
Last Updated :
10 Jun, 2024
HTML is one of the easiest things 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 ones make some silly mistakes while writing the code for the front end. Making these silly mistakes not only annoys other developers (when they need to make some changes) but also hurts your main site and drives the end-user away. We are going to mention some common and best practices that you should follow to write clean and clear HTML code.
Following some common coding practices makes debugging easier and saves a lot of time. It also helps in search engine optimization as well.
10 Best HTML Coding Practices You Must Know
1. Use Proper Document Structure With Doctype
HTML has a nature that 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 the 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 structure with the correct doctype. Doctype is the first thing to mention in an HTML document. You can choose the right doctype from the importance of doctype.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Welcome Programmers</h1>
<p>This website is GeeksforGeeks.</p>
</body>
</html>
To avoid validation and compatibility issues don't forget to close all the tags in your code. Today most 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 that 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.
Note: Not all the tags have losing tags, Please check Which tags contain both opening & closing tags in HTML.of using
Example:
HTML
<div>
<div>
<div>
<p>Hello Programmers</p>
<ul>
<li>Array<li>
<li>Linked List<li>
<1i>Stack<li>
</ul>
</div>
</div>
</div>
<div> Missing close div -->
Make a habit of using 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:
HTML
<!-- Wrong practice-->
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
<!-- Right practice-->
<section>
<p>This is a paragraph.</p>
</section>
4. Add Image Attributes
When you add an image to your HTML code don't forget to add an 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. This allows the browser to reserve the appropriate space for the image before it loads, reducing layout shifting and flickering as the page renders.
Example:
HTML
<!-- Wrong Practice-->
<img src="html5.gif">
<!-- Right Practice-->
<img src="html5.gif" alt="HTML5" style="width:100px;height:100px;">
5. Avoid Using Inline Styles
A lot of newbies make the mistake they adding inline style in HTML tags. It makes your code complicated to maintain. Make a habit of keeping your styles separate from HTML markup. Using inline styles can create so many problems. It makes your code cluttered, unreadable, and hard to update or maintain. Separating HTML from CSS also helps other developers to make changes in code very easily.
Example:
HTML
<!-- Wrong Practice -->
<p style="color: #393; font-size: 24px;">Thank you!</p>
<!-- Right Practice -->
<p class="alert-success">Thank you!</p>
HTML title 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 and specify the purpose of your website or page. Avoid using repeated words and phrases. When a user types some keyword in the 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:
HTML
<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."/>
<meta name="theme-color" content="#0f9d58" />
<meta
property="og:image"
content="image/png"/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<script src="https://apis.google.com/js/platform.js"></script>
<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>
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 the article title or blog post.
Example:
HTML
<h1>Topmost heading</h1>
<h2>Sub-heading underneath the topmost heading.</h2>
<h3>Sub-heading underneath the h2 heading.</h3>
8. Always Use the Right HTML Elements
A lot of beginners make the common mistake of using the wrong HTML elements. They need to learn with time which element should be used where. We recommend you 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 look the same), and learn when to use <b> and when to use <strong> (both look 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.
Note: To check the Difference between <i> and <em> tagstags, strong and bold tag in HTML
HTML
<!-- Wrong Practice -->
<span class="heading"><strong>Hello Geeks</strong></span>
<br><br>
This is Computer Science portal for geeks.
<br><br>
<!-- Right Practice -->
<h1>Hello Geeks</h1>
<p>This is Computer Science portal for geeks.</p>
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.
HTML
<!-- 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>
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 difficult issues. You can download the W3C markup validation or Firefox developers toolbar to validate your site by URL. Validators are very helpful in detecting errors and resolving them.
Conclusion
Adhering to best practices in HTML coding is essential for developers, whether beginners or experienced professionals. By following these guidelines, you can ensure that your HTML code is clean, clear, and maintainable. Proper document structure and code validation are all crucial aspects to consider. By implementing these best practices, you not only make your code easier to debug and maintain but also contribute to better accessibility and search engine optimization (SEO) of your web pages.
Also Read
Similar Reads
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Learning to code is an exciting journey, especially when stepping into the world of programming with HTML and CSS—the foundation of every website you see today. For most beginners, these two building blocks are the perfect starting point to explore the creative side of web development, designing vis
8 min read
10 HTML Project Ideas & Topics For Beginners [2025]
HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. As a beginner or even an experienced developer, working on HTML projects can significantly enhance your skills and deepen your understanding of web development. Here are ten HTML project ideas
5 min read
HTML Course | Understanding and Building Project Structure
Now that you've already set up a basic directory structure, it's time to understand and build the basic structure of our project.Course Navigation Understanding and Building Project StructureWe have already created all of the directories needed for our project. Let's just start writing our HTML code
3 min read
HTML Exercises, Practice Questions and Solutions
Are you eager to learn HTML or looking to brush up on your skills? Dive into our HTML Exercises, designed to cater to both beginners and experienced developers. With our interactive portal, you can engage in hands-on coding challenges, track your progress, and elevate your web development expertise.
3 min read
Introduction to HTML and CSS | Learn to Design Your First Website in Just 1 Week
Ready to Design Your First Website in Just 1 Week? With this guide, learn how to build a simple yet stylish website in just one week to gain skills and confidence.This is an introduction course to HTML and CSS which will help you learn all about the basics of HTML and CSS needed to begin with Web De
4 min read
HTML Course | Building Main Content - Section 1
The main content of a website is where you show the core information that visitors are looking for. This could be text, images, links, or any important details about your services, products, or ideas.Course Navigation HTML Course : Building Main Content - Section 1We just completed building the head
4 min read
Tips For Making Coding Websites Accessible
Keeping your website accessible is not as daunting a task as it may seem! Here are a few simple tips you should have in mind while you are coding: Alternative Text: The alternative text serves two main purposes: Provide users with visual impairments a description of what that image represents. If an
4 min read
How to define a thematic change in the content in HTML5?
In this article, we will see how to define a thematic change in the content of a page. This can help to introduce a break in between paragraphs when the description of the paragraph changes. The <hr> element in HTML is used to represent a thematic change in the content. It can be used with att
2 min read
HTML Course | Starting the Project - Creating Directories
Now we have understood the important concepts of HTML, it's time to start building a structured web project. In this chapter, you’ll learn how to set up directories and organize files efficiently. It is important to have a well-structured directory for both small and large projects, as it makes your
3 min read
10 Alternatives to the <div> HTML Tag
Have you noticed how different each webpage on the internet is designed and structured? Just imagine the elements on a page not structured the way it is! It would be clumsy, Right? And yes, as we know the most common element we use for the whole purpose is <div> in HTML while we design our pag
8 min read