Every HTML page follows the same basic skeleton. Once you know it, you can start any new page in seconds. In this lesson you will write and run your first page.
By the end you will be able to:
- Write the standard skeleton of an HTML page
- Explain the difference between the head and the body
- Save an HTML file and open it in a browser
- Add comments to your code
The basic skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>
What each part does
- <!DOCTYPE html> tells the browser this is a modern HTML5 page
- <html lang="en"> wraps the whole page and states its language
- <head> holds information about the page that is not shown on screen
- <meta charset="UTF-8"> makes sure letters and symbols display correctly
- <title> sets the text shown on the browser tab
- <body> holds everything the visitor actually sees
Head versus body
A simple rule: if people should see it on the page, it goes in the body. If it is background information for the browser or search engines, it goes in the head.
Save and open your page
- Open your text editor and type the skeleton above
- Save the file as index.html inside your html-course folder
- Double-click the file, or drag it into a browser window
- After each change, save the file and refresh the browser to see the result
Indentation and comments
Indenting nested elements by two or four spaces makes your code much easier to read. You can also leave notes for yourself that the browser will ignore. These are called comments.
<!-- This is a comment. It does not appear on the page. -->
Practice
Change the title and the text of your page to your own name and a sentence about yourself. Save, refresh, and check that the browser tab and the page both changed.