HTMLHTML · Lesson 1 of 8

Your First Web Page

HTML is what web browsers read. Create a .html file, open it in a browser, and you've made a web page. No server required.

An HTML 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.

HTML

<!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>

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

HTML

<!-- 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>

◆ Note
Use semantic tags: means "important" (usually bold), means "emphasized" (usually italic). Don't use and — they only describe appearance, not meaning. Meaning-based markup is better for accessibility and SEO.