HTML Basic

In the earlier sessions you met HTML and chose an editor. Now you will build a complete basic page: the standard skeleton every modern HTML file should start from, plus a small amount of visible content.

What is a basic HTML document?

A basic HTML document is a text file with a fixed outer structure. Inside that structure you place the content visitors see. Almost every page in this course will reuse the same outer skeleton and change what goes in the body.

Direct answer: the required skeleton

A modern basic page includes these parts in order:

<!DOCTYPE html> — declares an HTML5 document
<html> — the root element that wraps the whole page
<head> — information about the page (not the main visible article)
<title> inside the head — text for the browser tab and bookmarks
<body> — the content people see on the page

Basic HTML document

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Reading the example line by line

The doctype must be first so the browser uses modern HTML rules
Everything else sits inside <html> ... </html>
<head> holds the title; visitors mainly notice it in the tab name
<body> holds the heading and paragraph you see in the page area
Most elements need a matching closing tag, written with a slash, such as </p>

Head vs body

Think of <head> as the page’s backstage notes and <body> as the stage. Search engines and browsers use the title and other head data. People reading the page look at the body. Putting your main article text only in the head is a common beginner mistake.

Nesting and order

HTML elements nest: an element can sit inside another element. Keep tags in a clear tree. Close inner tags before outer tags. For the basic skeleton, keep this order: doctype, then html, then head (with title), then body.

Try it yourself

Create a file named basic.html in your editor
Paste the example above
Change the title text and the heading text
Save the file and open it in your browser
Confirm the tab title and the on-page heading both updated after you save and refresh

Small tips that save time later

Prefer lowercase tag names (<p>, not <P>) for consistent modern HTML style
Indent nested lines so you can see which tags belong together
Keep one clear <h1> as the main page heading in early examples
You will add charset, links, images, and more in later sessions; master this skeleton first

Common mistakes

Forgetting <!DOCTYPE html> at the top
Closing tags in the wrong order (for example closing html before body)
Putting the visible heading only inside <head>
Saving without the .html extension and then wondering why the browser behaves oddly
Typing an opening tag without its closing partner when the element needs both

Summary

A basic HTML page uses doctype, html, head, title, and body
The title appears mainly in the browser tab
Visible content belongs in the body
Elements nest; close inner tags first
Practice by editing a small file and refreshing the browser
Later sessions add more elements on top of this same skeleton

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language