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.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Page description here.">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!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.
head is where you add information about your page (or metadata), such as the charset, title and stylesheets.
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.
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.
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.
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.
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:
script tags, one for each file. The
script tag is at the end of the
body section in this example instead of in the
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.
Published on 9 Aug 2022