The Page Skeleton
Every web page has the same basic skeleton, and in this chapter you build it for your personal page.
The Skeleton
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayesha Khan</title>
</head>
<body>
<h1>Ayesha Khan</h1>
</body>
</html>Each Line Explained
| Code | What it means |
|---|---|
<!DOCTYPE html> | "This is a modern HTML page." Always the first line |
<html lang="en"> | Wraps the whole page; the page is in English |
<head> | Information about the page, not shown on it |
<meta charset="UTF-8"> | Shows all letters and symbols correctly |
<meta name="viewport" ...> | Makes the page fit on phone screens |
<title> | The text in the browser tab |
<body> | Everything visible on the page goes here |
Head vs Body
A simple way to remember:
- The head is like the label on a file folder: the name and details.
- The body is what is inside the folder: the actual pages people read.
Browser tab: Ayesha Khan Page: Ayesha Khan (as a big heading)
Indenting (adding spaces at the start of lines) does not change how the page looks, but it makes your code much easier to read. Indent everything that sits inside another element.
Nesting: Boxes Inside Boxes
HTML elements sit inside each other, like boxes inside boxes. <head> and <body> are inside <html>. <title> is inside <head>. <h1> is inside <body>.
Always close the inner box before the outer one:
Example
<!-- Correct -->
<body>
<h1>Ayesha Khan</h1>
</body>
<!-- Wrong: the h1 is never closed -->
<body>
<h1>Ayesha Khan
</body>Your Project File
Replace the contents of your index.html with the skeleton above, using your own name in <title> and <h1>. This file is the start of your personal page. Each following chapter adds to it.
Adding a Short Line Under the Name
Let us add one line of text under the heading with a <p> (paragraph) tag:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayesha Khan</title>
</head>
<body>
<h1>Ayesha Khan</h1>
<p>Student and future web developer from Karachi.</p>
</body>
</html>Exercise
Exercise
Where does the text for the browser tab go?