HTML Coding Guidelines & W3C Standards

[sgmb id=”1″]

The ultimate aim of a front-end developer should be to develop HTML that would meet W3C standards since W3C (World Wide Web Consortium) validator is the world finest quality checker of HTML code. I found many programmers whether working as a freelancer or under an agency, neglect the HTML coding guidelines and in the result, they fail to meet the W3C standards. It’s not that simple though to meet the W3C HTML validator standards, especially when someone is not following the proper HTML coding guidelines. Now the question arises; what are the guidelines for HTML coding? Here, we are going to share the most important HTML standards with the hope our readers will learn from this topic share views if they face any issues adopting it.

Here we go:

Folder Structure

Before working on a particular front-end project the first step is to create a new folder on your PC with the project name. Inside that folder, create two more folders with the names “Markup” and “Design”. Now place PSD files into “Design” folder and rest of the files should place in “Markup” folder in their separate folders like CSS, images, JS, Fonts, HTML. While doing work on WordPress markup index.html and style.css files should place on root of “Markup” folder.

While working on Shopify project index.html files should be placed on the root of “markup” folder and rest of the files like CSS, JS, Fonts, images should be in the same folder with the name “Assets”. This is the right approach of folder structure and every HTML developer should follow this hierarchy.

Basic Structure

Usually HTML developers don’t care much about basic structure of HTML code and that could end up in a mess. Thus, the right approach is to start coding HTML with a basic structure like below:

It is the best and professional approach. Header related stuff should be in header div and same with main body and footer.

Properties Formatting

Proper formatting speaks about the perfection of HTML coding. Usually, developers do mistakes while padding and margin. Here is the perfect way to give padding and margins:

padding: 2px 3px 5px 7px;
not like that
padding-top: 2px;
padding-bottom: 5px;
padding-right: 3px;
padding-left: 7px;

If you want to avoid horizontal scroll then all content of the page should be wrapped in one div like this:

<div id=”wrapper”>….</div>
and its style will be
#wrapper {
overflow: hidden;
width: 100%
}

Layout Property

Every PSD to HTML developer should avoid “clear” property. If two divs are floating then they must be wrapped in a div and div should have property overflow:hidden;

Or use this:

Div:after {
Display: block;
Clear: both;
Content: ‘’;
}

Proper Headings

Use of proper headings in a markup speaks about the ability of an HTML coder. To meet the W3C standards, a coder must follow the flow of headings like h1, h2, h3, h4… for specific areas and keep in mind that heading shows the main info of the block like title of any content; one more thing; there should be one h1 on one page because it is standard for SEO.

CSS Reset

Use CSS reset in your project and customize it according to the current project, so that in future if a developer looking to add some text, link, heading etc. then it should be in proper format and according to the theme.

Logo Structure

To show logo on a website, the best approach is

<div class=”logo”><a href=”#”><imgsrc=”images/logo.png” width=”202″ height=”176″ alt=”logo name”></a></div>
and in css:
.logo {
float: left; (this propert can be changed according to the structure)
width: 202px;
height: 176px;
}
.logo img{ display: block; }

Main Navigation Structure

For top main menu the HTML structure should be

<nav id=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
.
.
.
</ul>
</nav>

Columns Structure

Mostly font-end developers do mistakes in column structure when they find more than one column in a design. Here is a proper column structure for more than one column design

Block Quote Structure

Some HTML developers don’t use proper structure for quotes. They use paragraphs structure and span to show the quote block which is really a wrong approach. I would say why to use other methods when you have a spate blog quote structure? Here is the block quote structure to show quotations

<blockquote>
<q>comments from any person/companyshould goes here</q>
<cite>company/person name should goes here</cite>
</blockquote>

Date Structure

Date structure should be in its own tag. Usually freelancers don’t follow date tag while showing data on the website. Here is the proper HTML date structure

Image Optimization

Image optimization plays a vital role in website loading speed and it’s really helpful in SEO optimization. Therefore, image optimization is an essential part in HTML coding and that is helpful to reduce the page size. Always use optimized images when coding. Many online tools and websites are available to optimize images like:

http://www.jpegmini.com
http://pnggauntlet.com

Social Network Structure

For social icons which is usually placed in the top main menu; the HTML structure should be:

Conclusion

One can write highest quality markup code after following above suggested structure. If someone follows the Code standards written above, he can easily get approval from W3C validator. It is recommended to always follow these HTML coding guidelines to meet the w3C standards.

At HTMLPro, our front-end development team is bound to follow the standard HTML structure as above to generate finest quality markup for our clients and KPIs are set to measure performances while code review is done before submitting projects to the client. Being top PSD to HTML company in New York and widely used HTML service globally, HTMLPro.net never compromise on markup quality as we provide W3C valid, SEO semantic, pixel perfect and fully responsive HTML to enhance the client experience. Feel free to contact us at +1 (347) -308-5764 or send us your PSD designs at sales@192.249.118.223 and get better HTML conversion service according to W3C standards.

HTML Coding guidelines, W3C Standards