Lesson 1 of 8

Your First Web Page

You'll create a .html file, learn the basic structure every page shares, and open it in a browser. No server is needed.

An document has a specific structure. The DOCTYPE declaration tells browsers this is HTML5. The html element is the root. head contains metadata (not shown on page). body contains the visible content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>
Sandboxed page

HTML uses tags to mark up content. Tags come in pairs: an opening tag <p> and a closing tag </p>. The content goes between them. Some tags are -closing (like <br> and <img>). Every tag has a meaning — use the right tag for the right content.

<!-- This is an HTML comment — browsers ignore it -->

<!-- Headings h1-h6 (h1 is most important, h6 least) -->
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>

<!-- Paragraph -->
<p>This is a paragraph. HTML ignores extra
   whitespace in source code.</p>

<!-- Line break (self-closing) -->
<p>First line<br>Second line</p>

<!-- Horizontal rule -->
<hr>

<!-- Bold and italic -->
<p>This is <strong>important</strong> and this is <em>emphasized</em>.</p>

<!-- Code inline -->
<p>Run the <code>git status</code> command.</p>

<!-- Preformatted text (preserves whitespace) -->
<pre>
    This    preserves
    spaces and newlines.
</pre>
Sandboxed page
Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.