Building Blocks of HTML

HTML provides the structural foundation for web pages. Learn essential tags and document hierarchy.

Core Tags

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- Content here -->
  </body>
</html>
→
Browser renders blank page with "My Page" in tab
Key requirements:
  • <!DOCTYPE html> must be first
  • <html> is the root element
  • <head> contains metadata

Adding Content

<body>
  <h1>Welcome</h1>
  <p>First paragraph</p>
</body>
→
Welcome
First paragraph

<h1> creates headings, <p> wraps paragraphs.

Common Errors

<!-- Missing closing tags -->
<html>
<head>
<!-- Forgetting title -->
</head>

Practical Use: Personal Homepage

<!DOCTYPE html>
<html>
<head>
  <title>Adam H</title>
</head>
<body>
  <h1>Adam H</h1>
  <p>CS teacher from Earth</p>
</body>
</html>
→
Adam H
CS Teacher from Earth

Your Task: Build a Page

Create a complete HTML document that:

  1. Declares HTML5 doctype
  2. Has a <title> with your name
  3. Contains an <h1> saying "Hello World"

Press check to see if your code is correct.

Section 1/5Core Tags

Core Tags

Explore this concept

Building Blocks of HTML

HTML provides the structural foundation for web pages. Learn essential tags and document hierarchy.

Core Tags

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- Content here -->
  </body>
</html>
→
Browser renders blank page with "My Page" in tab
Key requirements:
  • <!DOCTYPE html> must be first
  • <html> is the root element
  • <head> contains metadata

HTML Editor

Preview