We have learned and implemented the basic concepts of HTML, including the structure of the webpages, and it’s time to refine our Bellylicious Home Page. Developing a functional website is essential, but keeping it clean, maintainable, and accessible is equally important.

In this article, we will learn about validating HTML and code organization. We’ll also try to implement these best practices in our code to make it easy to read, error-free, and accessible.

Validating HTML Code

HTML validation is a process of checking your HTML code against globally accepted HTML standards so your webpage runs smoothly on the browser and appears as you want it to. You can find numerous tools for validating your HTML code, but the most popular and invaluable resource is the W3C Markup Validation Service.

W3C Markup Validation

W3C Markup Validation is a free service from W3C that validates web documents. Since the web documents are written in markup languages like HTML and XHTML, this tool checks the documents against the technical specifications for these markup languages. These specifications include machine-readable formal grammar and vocabulary, which must be followed when writing web documents.

That being said, let’s check our web page with the W3C validator and get rid of any errors detected.

Validating Bellylicious Home Page with W3C Validator

First, go to W3C Validator.
Since our page is not live yet, we will either upload the document or paste the code. In this demonstration, I’ll paste the code by switching to the Validate by Direct Input tab.
Copy and paste your code.
Click Check.

We got around 56 errors, warnings, and informational messages. You can ignore the warnings and informational messages but must resolve the errors since they are crucial.

Before moving forward, let’s resolve these issues.

Most of the errors are related to the width and height specification for the image tag. To resolve this error, we only need to remove the px from the width and height attributes and define them as follows:



<img class="bg_img" src="images/background_image.jpg" width="1350" height="300"/>

Another error in our code is regarding the alt attribute. The alt attribute is required in the img tag since the browser uses it for SEO, and screen readers use it to read the text for visually impaired visitors.



<img class="bg_img" src="images/background_image.jpg" width="1350" height="300" alt="Background image for hero section"/>

Another error is an invalid value to the text attribute in the input tag. We must use the <textarea> tag for multiline input from the user. So, let’s replace it too.

Remove the following code:



<input class="user_input" type="textarea" placeholder="Enter your message"/>

Add the following code in the same location:



<textarea class="user_input"></textarea>

After correcting all the errors, our code looks as follows:



<!DOCTYPE HTML>
<html>
<head>
	
	<title>Bellylicious</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

	<!--main div-->
	<div class="container">
		
		<!--Header-->
		<div class="header">
			<!--Logo-->
			<div class="logo"><h1 class="heading">Bellylicious </h1> </div>
			<!--Navigation-->
			<div class="nav">
				<button class="nav_btn">Home</button>
				<button class="nav_btn">Menu </button>
				<button class="nav_btn">Order</button>
				<button class="nav_btn">About Us</button>
				<button class="nav_btn">Contact</button>
			</div>
		</div>
		
		<!--Hero-->
		<div class="hero">
			<img class="bg_img" src="images/background_image.jpg" width="1350" height="300" alt="Background image for hero section"/>
			<h1>Bellylicious - Delicious Food Delivered!</h1>
		</div>
		
		<!--Menu-->
		<div class="section">
<h1 class="heading">Menu</h1>

			<!--Menu Items-->
			<div class="menu_item">
				<!--Item Image-->
				<div class="item_img">
					<img src="images/Biryani.jpg" width="100" height="100" alt="Chicken Biryani"/>
				</div>
				<!--Item Name-->
				<div class="item_text">
					<h3>Chicken Biryani</h3>
				</div>
				<div class="item_img">
					<img src="images/Karahi.jpg" width="100" height="100" alt="Chicken Karahi"/>
				</div>
				<div class="item_text">
					<h3>Chicken Karahi</h3>
				</div>
				<div class="item_img">
					<img src="images/Qorma.jpg" width="100" height="100" alt="Chicken Qorma"/>
				</div>
				<div class="item_text">
					<h3>Chicken Qorma</h3>
				</div>
				<div class="item_img">
					<img src="images/Kababs.jpg" width="100" height="100" alt="Chicken Seekh Kababs"/>
				</div>
				<div class="item_text">
					<h3>Chicken Seekh Kabab</h3>
				</div>
			</div>
		</div>
		
		<!--Popular-->
		<div class="section">
<h1 class="heading">Popular</h1>

			<!--Popular Item-->
			<div class="menu_item">
				<!--Items-->
				<div class="item_img">
					<img src="images/Biryani.jpg" width="100" height="100" alt="Chicken Biryani"/>
				</div>
				<div class="item_text">
					<h3> Chicken Biryani</h3>
				</div>
				
				<!--Add to Cart-->
				<div class="add_to_cart">
					<button class="btn"> Add to Cart </button>
				</div>
			</div>
		</div>
		
		<!--Customer Reviews-->
		<div class="section">
<h1 class="heading">Reviews</h1>

			<!--Customer Name-->
			<div class="name">
				<p>John Smith</p>
			</div>
			<!--Review-->
			<div class="item_text">
				<p> I have never had such an amazing food ever!
			</div>
			<!--Stars-->
			<div class="item_img">
				<img src="images/5_stars.svg" width="30" height="30" alt="Customer review"/>
			</div>
		</div>
		
		<!--About Us-->
		<div class="section">
		<h1 class="heading">About Us</h1>
			<!--About Us Text-->
			<div class="about_text">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In massa arcu, rhoncus ut eros dapibus, pretium ornare felis. Aliquam feugiat erat quis nulla sagittis, non dictum diam faucibus. Phasellus bibendum commodo dolor, ut finibus tortor dapibus et. Nullam tincidunt placerat nisi id tempor. Sed dictum justo nec mauris porttitor, a dictum enim accumsan. Quisque malesuada lobortis consequat. Nunc at rhoncus tortor. Cras accumsan tempor dui, at aliquet diam tempus ac. Vivamus consectetur lacinia quam, a consequat velit finibus id. Sed et nunc lectus.</p>
			</div>
			
			<!--About Us Image-->
			<div class="item_img">
				<img src="images/restaurant.jpg" width="200" height="200" alt="Restaurant interior"/>
			</div>
		
		</div>
		
		<!--Contact Us-->
		<div class="section">
<h1 class="heading">Contact Us</h1>

			<div class="contact_us">
				<form>
					<label class="lbl">Full Name</label>
					<input class="user_input" type="text" placeholder="Enter your full name"/>
					<label class="lbl">Email</label>
					<input class="user_input" type="email" placeholder="Enter your email"/>
					<label class="lbl">Message</label>
					<textarea class="user_input"></textarea>
					
					<button class="nav_btn">Submit</button>
				</form>
			</div>
		</div>
		
		<!--Footer-->
		<div class="footer">
			
			<!--Brand Section-->
			<div class="footer_section">
				<div class="logo">
					<h1>Bellylicious</h1>
					<h2>Delicious Food Delivered</h2>
				</div>
			</div>
			<!--Opt-in form-->
			<div class="footer_section">
				<form class="opt_in">
					<label class="opt_in_lbl">Enter you email to receive promotional offers</label>
					<input type="text" class="user_input" placeholder="Enter your email"/>
					<button class="nav_btn">Submit</button>
				</form>
			</div>
			<!--Social Icons-->
			<div class="footer_section">
				<div class="icons">
					<img class="icon_img" src="images/Whatsapp.svg" width="100" height="100" alt="Whatsapp icon"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Facebook.svg" width="100" height="100" alt="Facebook icon"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Instagram.svg" width="100" height="100" alt="Instagram icon"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Linkedin.svg" width="100" height="100" alt="LinkedIn icon"/>
				</div>
			</div>
			<!--Copyright-->
			<div class="footer_section">
				<p class="opt_in_lbl">Copyright © 2025 Bellylicious.com. All rights reserved.</p>
			</div>
		</div>
	
	</div>
	</body>
</html>

Now, recheck your code with the W3C validator to ensure no more errors. On my end, I have no issues. You might encounter more errors in your code. Make sure to resolve all of these issues before moving forward.

Code Organization and Readability

The well-organized and readable code is highly crucial for maintainability. When your webpage grows, the code becomes more complex. Therefore, structuring the code properly becomes important so that another developer can understand and change it.

You can achieve this by well-indented, consistently formatted, and well-commented code.

Indentation and Formatting

The indentation and formatting make the code more readable and understandable. Your code looks pretty clean when you open and close the tags in separate lines and use proper indentation. Modern code editors automatically take care of indentation and formatting, but it is also better to take care of it yourself.

Comments

The comments are the lines that a browser does not render. These are usually used to define the purpose of a block of code and should be used frequently to enhance code readability. If another developer sees your code, comments will help them understand what each block is supposed to do.

We have already incorporated comments in our code and have a proper indentation. Therefore, we do not need to make any changes to it. However, if you have skipped the comments and haven’t maintained the indentation and formatting, there’s no better time than doing it now.

We are all set to move forward with styling our web page with CSS. We have covered HTML basics and created a basic webpage for a food ordering website. We encourage you to try designing more pages on your own for practice.

Refining the webpages