Page Structure
Each page follows the same layout structure.
The Code
We will begin with the basic structure of a web page and look at what each section is for.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
//......All of your code goes between these tags
</html>
To see a list of language codes please visit https://thewebtoolbox.com/utilities/language-code-finder.php
Next we will tell the web broswer something about the page
<header>
<title>The page title goes here</title>
<meta name="robots" content="index, follow" />
<meta name="author" content="your name" />
<meta name="contact" content="your email" />
<meta name="revisit-after" content="7 days" />
<meta name="description" content="what the page is about" />
<meta name="keywords" content="some keywords" />
<link rel="canonical" href="the page url" />
<link rel="alternate" href="the page url" hreflang="en-GB" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0" />
<!--Favicon script start-->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!--Favicon script end-->
<link rel="stylesheet" href="url of your master style sheet" />
<style>
html, body{
margin:0;
padding:0;
}
</style>
</header>
Next we will give our vistors something to look at
<body>
//The actual page content code goes here
</body>
The complete page will look like this..
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
<header>
<title>The page title goes here</title>
<meta name="robots" content="index, follow" />
<meta name="author" content="your name" />
<meta name="contact" content="your email" />
<meta name="revisit-after" content="7 days" />
<meta name="description" content="what the page is about" />
<meta name="keywords" content="some keywords" />
<link rel="canonical" href="the page url" />
<link rel="alternate" href="the page url" hreflang="en-GB" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0" />
<!--Favicon script start-->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!--Favicon script end-->
<link rel="stylesheet" href="url of your master style sheet" />
<style>
html, body{
margin:0;
padding:0;
}
</style>
</header>
<body>
<p>HELLO WORLD!</p>
</body>
</html>