The effect of bad HTML on SEO

SEO Tips for beginners. How to rank YOUR website in Google using my tips built up over 10+ years as a web designer. Whether you are a small business creating your own website, or a web designer/developer looking to learn how to make client websites rank, find out how to effectively audit your HTML using the free W3C Validator here.

Playing this video loads a YouTube embed in privacy-enhanced mode.

Comment on YouTube if you tested your website using this validator!? What results did you get? Subscribe to get SEO tips over on YouTube, in an Irish accent to boot. ☺️

How can I test my HTML?

Modern browsers usually now highlight in red text errors they found when rendering your html page, in particular this can happen when tags are opened and closed in the wrong way, or the close tag might be missing on some elements. Just right click on your webpage, and you should see a ‘view page source’ option there. Once you click that you’ll see all of the output HTML rendered by the browser, and any mismatched tags should highlight red depending on your browser.

You can also use the W3C Validation tool for HTML markup we used in the video above! This is a free HTML validation tool at: https://validator.w3.org

HTML & Accessibility

The w3c validation tool that I use in this video helps you to check if anything is broken on your website, which is something that could be very detrimental to your search engine optimisation and overall Google ranking. While John Mueller, a senior webmaster trends analyst at Google says they do not use the tool to give ranking boosts, he does also agree it’s a really useful tool to check the health of your HTML code and to improve your accessibility. All great things to do for the overall quality and health of your site, and of course making sure images have alt tags is super important for accessibility and SEO too!

John Mueller on the W3C validator – Thanks to Search Engine Journal for documenting!: https://www.searchenginejournal.com

Fix broken HTML

While Google and Googlebot will be quite forgiving when parsing your HTML even if there are errors, some code can be structured so badly that images are output as broken, or heading tags can’t be separated from paragraph tags which of course will effect your SEO!

Good quality HTML is HTML5

Of course quality HTML doesn’t just stop at it not being broken HTML. That would be no fun (for us HTML nerds!). HTML markup includes HTML microdata schema if you decide to use HTML over JSON-LD. HTML5 is incredible, HTML elements were so unwieldy in previous versions we would rely on what should have been unnecessary JavaScript just to get it to behave in a varied and effective manner for users. Now HTML5 lets us web designers use so many native elements that the browser is responsible for rendering. This means HTML5 when coupled with CSS3 stylesheets, gives us the best opportunity that we have ever had when it comes to creating front-end website code that people love to navigate, and that loads super fast.

HTML5 Semantic markup

Make sure you make full use of the semantic elements available to us in HTML5. Where we would previously mark almost every element on a page up using a ‘div’ tag, now we have access to far improved ways of naming areas on a website with semantic markup. This means each area of your website is clearly identified, and again here we are satifying for both accessiblity and SEO as the page is more easily read and understood.

Some of the main tags separating HTML5 webpage markup include:

  • header
  • nav
  • main
  • section
  • article
  • aside

There are many other tags available for use, the W3 Schools HTML Semantic Elements is a great resource with explanations and examples of semantic HTML5 elements. Do check it out for more info!

I hope this article helped you on your web design and SEO journey, drop me a tweet @proximowebs as I love to connect with you all!

Testimonials