HTML boilerplate improvement part 1

#html #webdev #boilerplate #beginners

HTML boilerplates help SEO and they make sure the browser knows what its doing.

A basic Boilerplate starter is <!DOCTYPE html> that 1 line putting it at the start of a script will instantly let the browser know to use HTML5.

However you can always Expand upon your boilerplate and make it better

now this boiler plate does not have a <meta> or <title> tag(Meta can be a void tag):


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./src/Functionality.js"></script>
  </head>
  <body>
    <!-- add your HTML here -->
  </body>
</html>

However, because the boilerplate does not have a <meta> or a <title> tag The browser may not be Compatible with mobile.

A standard HTML5 boilerplate is typically:


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./src/Functionality.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Webpage</title>
  </head>
  <body>
    <!-- add your HTML here -->
  </body>
</html>

Quick tip: In your html boilerplate remember to use the <meta> and <title> tag.

Without <meta>:

The website does not have a viewport
- Result: Mobile devices are incompatible with the website, they scale to desktop width.
The website does not have a charset
- Result: You cant write stuff that needs charsets.
The website does not have any opengraph properties
- Result: Anything you need with opengraph wont be on your website until you add <meta>