Lesson 2 — Fundamentals

Document Structure

Every HTML document has two main parts: the head, which holds metadata the browser and search engines use, and the body, which holds everything visible on the page.

The head Element

Nothing inside <head> is displayed directly on the page. Instead it configures the document: its title (shown in the browser tab), character encoding, linked stylesheets, and metadata used by search engines and social media previews.

HTML — A typical head 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Us | My Site</title>
  <meta name="description" content="Learn about our company and mission.">
  <link rel="stylesheet" href="styles.css">
</head>

The body Element

Everything a visitor sees or interacts with lives inside <body> — text, images, buttons, forms. There is only ever one <body> per page.

Common Mistakes

  • Placing visible content like a heading or image inside <head> by mistake — it will not display.
  • Omitting the <meta charset="UTF-8"> tag, which can cause special characters to render incorrectly.
  • Forgetting the viewport meta tag, which causes mobile browsers to render the page as a shrunken desktop layout.
  • Nesting a second <body> or <html> tag anywhere in the document.

Professional Tip

The <title> tag is one of the most important elements for SEO and usability — it's what shows in browser tabs, bookmarks, and search engine results, so make it specific and descriptive for every page.

Your Turn

Build a page with a properly filled-out head section (charset, viewport, title, description) and a body containing a heading and two paragraphs about a topic you enjoy.

Mini Quiz

Which part of an HTML document contains the content visitors actually see?