Minimal HTML Skeleton
You already learnt about Elements and Tags and the structure of a web page. The general idea of structuring larger areas of a web page was compared to planning to build various rooms of a house. But before you can build the walls of a house you need to build a foundation where the house can stand on. And before you can build the second floor you need a scaffold. In a similar fashion, you need a kind of code skeleton before you can fill a web page with tags and content (e.g. headings <h1>, paragraphs <p>...).
Ok, so how does this code look like in practice?
Shows a cartoon skeleton holding a sign. The sign shows the smallest amount of code that every web page contains. This code structures an HTML document into two sections comparable to the structure of a human skeleton.
Every HTML page consists of a doctype <!doctype html> and a html tag <html>. The html tag, in turn, further organizes the code by spanning across the following two sections:
- the head is for defining general information (e.g. title or keywords for search engines)
- the body is for the actual content.
This kind of code skeleton is not that exciting and almost the same for all web pages. Nonetheless you have to define it for every web page. Similar to the skeleton of a human (or animal) which holds organs in place, the code skeleton puts the general information and content in their dedicated place in an HTML document.
Note: HTML code skeleton is not a technical term, but rather a metaphor to describe this kind of basic HTML structure. Experienced Developers would rather call this boilerplate code which is a term to describe a piece of code or a code pattern that is used repeatedly, especially when creating a new programming project or a new file.
Complete Code Of A Minimal Web Page
Here is the complete code of a very minimalistic web page. Take a look and then continue with the explanation of all its parts.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
Your content goes here (any HTML elements that don't belong in the head).
</body>
</html>
The minimal HTML structure for a HTML document consists of these essential elements:
- The
<!DOCTYPE> must only be specified nowadays due to historical reasons. In the past (1991-1992) it was used to declare the version and standard of HTML code that follows after the doctype declaration in the same document.
- the
<html>...</html> is the root element of the document and contains the <head> and <body> elements.
- the
<head>...</head> element can contain various elements that describe general information about the document. Its meta data about the document and not the content itself. Below are a few common head elements listed.
- the
<body>...</body> is the container that contains all of the actual page content.
Here are a few examples of common elements that can be used in the <head>...</head> element:
Further tags:
<link rel="icon" href="favicon.ico" type="image/x-icon">: This tag is used to set a small icon (favicon) that appears next to the page title in the browser tab. It's also displayed in bookmarks and history listings.<meta name="robots" content="index, follow">: Explanation: This tag informs search engine crawlers about how to index and follow links on the page. It's used to control whether search engines can index the page and follow its links.<link rel="canonical" href="https://www.example.com/page">: This tag specifies the preferred version of a web page if there are multiple pages with similar content. It helps prevent duplicate content issues in search engines.
You are now ready to pick an editor and start coding.