Basic HTML page
HTML page skeleton 101
The way of kata
Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.
The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.
All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).
To make the best of katas, observe the following rules.
- Don't rush.
- When stuck, take a break and do something unrelated.
- Do not copy/paste code. Always retype everything.
- Do not use AI tools to generate code.
- Try to do something that wasn't in the instructions, experiment.
- Repeat the kata from time to time, even if you think you've got it.
- You have mastered the kata once you are able to complete it without thinking too much.
Remember, the goal is not to get it done, but to get some practice.
Introduction
In this exercise you will practice the basic setup of an empty HTML page. You will learn how to do this manually as well as how to do this using editor shortcuts such as live templates and snippets to make the process easy to repeat.
Skills you will acquire
- Basic HTML page setup
- Editor shortcuts
- Markup organization within the
<head>section
Objective
Create a blank HTML page.
- First create a blank HTML page by manually typing the HTML
- Exploit an editor feature such as live templates or snippets to automatically generate the same blank HTML page with a few keystrokes
Check your solution
- When the page is loaded, the tab title matches the contents of the
<title>tag - There is no visible content on the page
- The code passes the W3C markup validator
- If add some text in the
<body>tag and you enable device mode in developer tools, the text should not scale when you reduce the viewport size
Tools
Keep in mind
Every HTML document starts with a doctype:
<!doctype html>The words doctype and html can be spelled either uppercase or lowercase.
It does not matter.
The entire page is enclosed in the <html> tag following the doctype.
Within the <html> tags, we will have two tags: <head> and <body>. The
<head> tag will contain some metadata about the page, and the <body> will
contain the content of the page. For this kata, we'll leave the body empty.
<html lang="en">
<head>
</head>
<body>
</body>
</html>The <html> tag must have a lang attribute. The value of the attribute is
a locale code of the main language of the page. Every page must have at
least one main language. For English-language pages this is en. You can
find a list of locale codes on Wikipedia.
The <head> tag must contain the following:
- Charset
<meta>tag to that matches the file encoding - Viewport
<meta>tag set to device width and initial scale of 1.0 - Document title enclosed in the
<title>tag
The recommended order of tags within the <head> section is as follows:
- The charset
<meta>tag comes first so that the browser will be able to determine the encoding scheme of the page as soon as possible. - Since the first tag is a
<meta>tags, put any other meta tags after it. - Any
<link>tags should come after the<meta>tags so that the browser can determine the related content (e.g., CSS) and download it as soon as possible. - The
<script>tags, if any, should come right after the<link>tags for the same reason. - The
<title>tag comes last as it is most closely related to the page content.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>My page template</title>
</head>