Basic HTML page template HTML
The basics of an HTML page will be the same on every page, so it makes sense to copy and paste a blank basic starter HTML structure for each new page. Here is a basic HTML page template.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<meta name="description" content="Page description here.">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<h1>Hello, world!</h1>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>
<!doctype html> tells the browser what type of document to expect and makes sure all browsers parse the document in the same way. You might see it written as <!DOCTYPE html> but since it is not case sensitive I usually leave it all lower-case like the rest of the HTML.
The head is where you add information about your page (or metadata), such as the charset, title and stylesheets.
The meta charset tag defines the character encoding for the document. HTML5 requires utf-8. You may see this written as UTF-8 but since it is not case sensitive I leave it lower-case.
The meta viewport tag included here is what makes sure mobile browsers render websites at the screen size of the device instead of scaling down a larger viewport size. This helps with responsive web design.
The title element sets the title of your page which is what shows up in the browser's tab for your page and in Google search results. The title for each of your web pages should be unique and appropriate to the content of the page.
The meta description sets the description of your page which is what shows up as a paragraph under the heading in Google search results; unless Google decides to use other text from your page if they think it's more relevant.
The link element with rel="stylesheet" links to your CSS file. The location of your CSS file is written in the href attribute. This example assumes you have your CSS file inside a folder named "css". If you have multiple CSS files, you'll use multiple link elements, one for each file. CSS files that are linked to after other CSS files can overwrite styles in the other stylesheets so you always want to link to your own custom CSS file last, after linking to any stylesheet created by anyone else.
The content of your page goes inside the body tag. Everything you see on a website is in that section of the HTML between the opening and closing body tags: <body> and </body>.
The script tag links to your JavaScript file. The location of your file is written in the src attribute. This example assumes you have your JavaScript file inside a folder named "js". If you have multiple JavaScript files, you'll use multiple script tags, one for each file. The script tag is at the end of the body section in this example instead of in the head because it became standard practice as it makes sure the HTML is parsed before the script is executed and avoids render-blocking JavaScript. Since defer, we no longer need to do this. If you'd like to optimise your page speed, read about defer vs async.
Thanks for reading.
Ryan
Published on 9 Aug 2022