Donate with
Categories
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
Created: March 31st 2021
Last updated: May 19th 2022
Categories: Common Web Development
Author: Tim Fürer
Last updated: May 19th 2022
Categories: Common Web Development
Author: Tim Fürer
HTML Basics: The HTML5 Scaffold
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
When learning HTML, it is beneficial to know how to construct a basic scaffold. Every HTML site is built on top of this foundation.
To be able to following along with this guide, it is recommended that you know how elements (tags) work. If you do not know, you can read up on them in our guide on HTML elements.
The Scaffold
This is a common variant of the HTML5 scaffold:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
</body>
</html>Let us analyse it.
Declaring The DOCTYPE: <!DOCTYPE html>
The DOCTYPE should be declared at the beginning of every HTML site's code. The reason being that this is what signals to your browser (and the search engine) that the code is to be read and understood as an HTML document.
The HTML Tag: <html>
The <html> tag is the container for all HTML-related things. It is recommended to set the "lang" attribute to your site's intended language as this will make browsers and search engines happy.
The HEAD Tag: <head>
The <head> tag is the container for all your site's metadata, such as the page title, the used character encoding (generally UTF-8), certain file includes (style sheets and scripts), and more. Elements of the <head> tag are not visible content of the site.
The META Tag: <meta>
<meta> tags are used to define metadata. They assist browsers and search engines in understanding the site.
The TITLE Tag: <title>
The <title> tag contains your site's title. Search engines require this.
The BODY Tag: <body>
The <body> tag is the container for all elements meant to be visible content (text, images, lists, buttons…). Also, at the bottom of the <body> tag is where you should include your JavaScript files.