Start: the web and your first page
Your first HTML page
The skeleton of every HTML page line by line — DOCTYPE, html, head and body — and the first page you build yourself.
- Write the complete skeleton of an HTML document
- Know what goes in the head and what goes in the body
- Set the page’s language and direction correctly (right-to-left for Persian)
An HTML page is a plain text file ending in .html. Any text editor will do, but a free code editor such as VS Code adds colours and completion and makes the work easier.
The 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 the first page I have built.</p>
</body>
</html>- <!DOCTYPE html> tells the browser the page is written in modern HTML. Always the first line.
- <html> is the root of the whole page. lang="en" states the language (for search engines and screen readers); a Persian page also gets dir="rtl".
- <head> holds information about the page that is not shown on it: the encoding, the title, the description for search engines, the link to the CSS.
- <meta charset="utf-8"> sets the text encoding; without it, non-Latin letters turn into garbage.
- <title> is the text on the browser tab and in search results.
- <body> is everything you see on the page.
Your turn
Change the heading to your own name and write a second paragraph about something you would like to build. The result shows live beside the editor.
- The page has a language (lang)
- It has one main heading (h1)
- The heading has changed
- It has at least two paragraphs
Save the same code in a file named index.html and double-click it to open it in your browser: your first web page is ready.
Lesson quiz
3 questions — marked by Mashaal’s server, every answer explained.
1Which part is shown on the page itself?
2Where does the text on the browser tab come from?
3What should the html tag of a Persian page carry?