Your First HTML Document

After this lesson, you can write an HTML document skeleton with doctype, html, head, and body in their appropriate places.

BEGIN WITH A QUESTION

Understanding begins with a question.

Two lines of HTML can appear in the preview. A page file also needs a ‘cover’: information about its language, name, and how the browser should read it.

Write an HTML document skeleton with doctype, html, head, and body in their appropriate places.

UNDERSTAND THE CONCEPT

One document, two spaces

The html element wraps the document. Inside it, head contains information about the page, followed by body for page content. Think of head as a book's label and body as its readable pages.

Begin with a doctype and language

<!DOCTYPE html> is a declaration requesting modern standards mode, not a wrapping element. The lang="en" attribute on html declares English as the main document language. This information helps translation tools and screen readers.

Write the skeleton explicitly

Browsers can insert some missing elements when reading HTML. To develop clear habits, write the html, head, and body tags and their closing tags explicitly in this exercise. Put the page name in title and visible content in body.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sky Notes</title>
</head>
<body>
  <h1>Hello, sky!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

BROWSER RESULT

Read from the outside in: html → head and body. Metadata in head is covered in the next lesson.

COMMON MISTAKES

<head>
  <h1>Welcome</h1>
</head>

h1 is page content, so it belongs in body. Head contains metadata such as title, rather than the main content visitors read.

TRY TOGETHER

Practice clarifies understanding.

Enter the element name that wraps visible content.

<>
  <h1>Hello!</h1>
</body>

Show a hint

Answer with only the tag name, without angle brackets.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Arrange the library page

Rearrange these pieces into a complete English-language document. Keep the metadata, the tab title ‘Mini Library’, h1, and paragraph; place each in the appropriate part.

<h1>Mini Library</h1>
<title>Mini Library</title>
<p>One book, one discovery.</p>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

index.htmlHTMLLn 1, Col 15 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Doctype enables standards mode.
Html wraps head and body; lang declares the main language.
Head is for metadata; body is for page content.

Document structure

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

HTML °Head °HTML element °HTML attribute °

Library: Three languages behind one page ↗

Next lesson →