Q: Why should you even care about your old website’s version of HTML?

A: Mainly Google! If you care about staying in favor with Google, continue reading.

I generally start all of my conversions by stripping out almost all of the old HTML tags except for paragraph, links, and image tags. I will then strip the remaining HTML tags down to the basics. I use the very powerful Visual Studio Code to edit all of my HTML documents.

HTML5 is a major revision of the HTML standard. Here are the steps to convert HTML 1.0 to HTML5:

HTML1.0 uses several tags that are deprecated in HTML5. For example, the <font> tag, the <strike> tag, and the <applet> tag are not supported in HTML5. Replace these tags with CSS and other HTML5 elements.

HTML5 has stricter rules for tag and attribute syntax. Ensure that all tags are closed and that all attributes are in quotes.

In HTML5, the document type declaration is <!DOCTYPE html>. Replacing the document type declaration is the first step in converting the document from HTML1 to HTML5.

In HTML5, it’s mandatory to include a character encoding declaration. Add the following tag <meta charset=”UTF-8″> to your document’s <head> section:

HTML5 introduces a method to let web designers take control over the viewport, through the <meta> tag. By setting the appropriate values for the meta viewport tag, developers can ensure that their website is responsive and user-friendly across different devices, which is essential in today’s mobile-first world. Include the following viewport element in all your web pages: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

HTML5 introduces several new rel attributes, such as rel=”stylesheet” and rel=”preload”. Use these attributes to optimize the performance of your HTML document.

HTML5 introduces several new semantic tags, such as <header>, <nav>, <article>, <section>, and <footer>. Use these tags to give your document a more meaningful structure.

HTML5 offers several new input types for forms, such as date, time, email, and url. Use these input types to provide a better user experience.

HTML5 offers several new multimedia tags, such as <video>, <audio>, and <canvas>. Use these tags to add rich multimedia content to your HTML document.

When no other element is suitable the <div> tag defines a division or a section in an HTML document and is used as a container for HTML elements.

HTML5 requires the use of the alt attribute for all images to provide alternative text for screen readers and for cases where the image cannot be displayed.

HTML5 requires the use of the title attribute for all links and form elements. Use this attribute to provide additional information about the link or form element.

HTML5 introduces several ARIA (Accessible Rich Internet Applications) attributes to improve the accessibility of your website. Use ARIA attributes such as aria-label and aria-describedby to provide additional information for screen readers.

HTML5 introduces the data-* attribute to store custom data. Use this attribute to store data that is specific to your application, such as IDs or settings.

HTML5 supports responsive design, which allows your website to adjust its layout and content based on the screen size and device. Use responsive design techniques such as fluid layouts and media queries to create a better user experience.

By following the above outlined steps, you have been able to create your HTML5 documents adhering to modern web development standards, accessibility, and performance. But you’re not completely done yet, because today’s device viewports come in many different sizes. Test, Test, Test!

Keep in mind that converting an existing website to a responsive design can be a complex process, and it may require making significant changes to the website’s code and design. Test your HTML5 document across different browsers and devices to ensure that it works as expected.

Here are the steps you can follow to verify your new HTML5 documents are 100% responsive on all devices. Google is adamant that all documents be mobile ready.

Use CSS media queries to adapt the layout of the website to different screen sizes. Media queries allow you to define different styles for different screen sizes, such as mobile, tablet, and desktop.

Optimize images: Optimize images for different screen sizes by creating multiple versions of the same image with different resolutions or using CSS to resize images based on the screen size.

Use a mobile-friendly font: Use a font that is legible and easy to read on mobile devices. Avoid using small or complex fonts that may be difficult to read on smaller screens.

Use a responsive navigation menu that adapts to different screen sizes. This can include a hamburger menu or a dropdown menu that collapses into a single icon on mobile devices.

Testing the responsive design on different devices and screen sizes, portrait and landscape mode will ensure that it works correctly. You can use emulators or actual devices to test the design.

Validate the HTML1 code using an HTML validator. This will help identify any errors.

Overview, There are huge differences between HTML1 and HTML5. Many benefits can be realized by performing a conversion.

Bonus Tip: Use tools such as PageSpeed Insights or GTmetrix to analyze your website’s speed and identify areas for improvement. Optimizing your images, minifying CSS and JavaScript files, and using a content delivery network (CDN) will improve your website’s performance.

Congratulations, you have now successfully completed your HTML5 website conversion, a mobile-ready responsive design that adapts to different screen sizes and devices.

Q: What can you expect from Google now that you have HTML5?

A: Using HTML5 for your website can bring various benefits to your website, such as improved multimedia support, better semantic markup, and enhanced accessibility. However, simply using HTML5 on your website does not guarantee any specific treatment or ranking by Google.

Google’s search algorithm is complex and considers various factors to determine the relevance and ranking of a website, including the quality of content, user experience, backlinks, page speed, and more. While using HTML5 can contribute positively to a lot of these factors, it is only one aspect of a broader set of factors that Google considers when ranking websites.

So, while you can expect your website to benefit from using HTML5 in terms of improved design, mobile-readiness, and functionality, you can now move on to other aspects of SEO, such as authority, quality content, user experience, and building quality backlinks to achieve better rankings in Google search results.