</>
Skip to content
HTML lessons (4/60)

HTML — Basic

The skeleton every page needs

Every HTML page — from a homework project to Amazon's homepage — starts with the same structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page title shown in the browser tab</title>
</head>
<body>

  <!-- Everything visible goes here -->

</body>
</html>

Memorize this shape. You will type it thousands of times (or let your editor generate it with ! + Tab in VS Code).

Line-by-line breakdown

PartWhat it does
<!DOCTYPE html>Declares "this is modern HTML5". Always the very first line.
<html>Root element — wraps the entire page
<head>Invisible information about the page
<meta charset="UTF-8">Character encoding — allows é, ñ, 中, emoji, etc.
viewport metaMakes the page scale properly on phones
<title>Text on the browser tab + Google search results
<body>Everything visible to visitors

What goes where

<head> → information ABOUT the page   (not shown)
<body> → the page ITSELF              (shown)

A common beginner mistake is putting content in <head>. If your text isn't showing up, check that it's inside <body>.

Why each piece exists

<!DOCTYPE html>

Old web had many HTML versions, and browsers needed to know which rules to apply. This single line says "use modern standards". Without it, browsers switch to "quirks mode" and layout behaves strangely.

lang="en"

Tells browsers and screen readers what language the page uses:

<html lang="en">    <!-- English -->
<html lang="es">    <!-- Spanish -->
<html lang="hi">    <!-- Hindi -->

Screen readers pronounce words differently per language — this small attribute makes your site accessible to blind users.

charset="UTF-8"

Computers store text as numbers; a charset defines how numbers map to characters. UTF-8 covers virtually every character in human writing. Without it, you get classic bugs like café instead of café.

The viewport meta

Without it, phones render your page as a zoomed-out desktop version. With it, your page adapts to small screens — essential for anything responsive later.

Full example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Dogs</title>
</head>
<body>
  <h1>All About Dogs</h1>
  <p>Dogs are domesticated mammals, not natural wolves.</p>
</body>
</html>

The browser shows a tab reading "About Dogs", and on the page:

All About Dogs

Dogs are domesticated mammals, not natural wolves.

(A large heading followed by one paragraph.)

Good to know: you don't need to understand why all of this works yet. Copy the skeleton into every new project now; understanding deepens as you go.

Mini Practice

  1. Create skeleton.html using the template above
  2. Change the <title> and watch the browser tab update
  3. Move your <h1> up into <head> — see what happens (nothing visible!). Move it back.

You've just proven where visible content must live.

Next: elements in depth →

Related Topics

EditorsElementsAttributesHeadings

Frequently Asked Questions about Basic

What is Basic in HTML?

Basic is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Basic?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Basic.

Why is Basic important in HTML?

Basic is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.