Introduction to HTML

Why HTML Matters

Think of HTML as the skeleton of a website:

HTML = Structure (the bones)
CSS = Presentation (the skin and clothes)
JavaScript = Behavior (the muscles and movement)

Every website you visit—from Google to Facebook—is built with HTML at its core. Without HTML, there would be no web pages!

Learning Objectives

Understand what HTML is and where it fits in the web stack
Know common code editors and quick setup tips
Write a basic, valid HTML document with proper doctype, head, and body
Learn about HTML tags, elements, and attributes

Recommended Code Editors

You can write HTML in any text editor, but these make it easier:

VS Code — Most popular, free, with tons of extensions
Sublime Text — Fast and lightweight
Atom — Open-source and customizable
Notepad++ — Simple Windows editor

Pro tip: Install the "Live Server" extension in VS Code to see your changes instantly in the browser!

Basic Syntax — Your First HTML File

The minimal structure of an HTML document looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a simple HTML document.</p>
  </body>
</html>

Breaking It Down:

<!DOCTYPE html> — Tells the browser this is HTML5
<html lang="en"> — Root element; "en" specifies English language
<head> — Contains metadata (not visible on page)
<meta charset="utf-8"> — Defines character encoding
<meta name="viewport"...> — Makes page responsive on mobile
<title> — Text shown in browser tab
<body> — Contains visible content

Understanding HTML Tags

HTML uses tags to mark up content. Most tags come in pairs:

<tagname>Content goes here</tagname>

Common Examples:

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<strong>This is bold text</strong>
<em>This is italic text</em>

Self-closing tags don't need a closing tag:

<img src="photo.jpg" alt="A photo" />
<br />
<hr />

HTML Attributes

Attributes provide additional information about elements. They're written inside the opening tag:

<a href="https://google.com" target="_blank">Visit Google</a>
<img src="logo.png" alt="Company Logo" width="200" />
<p class="highlight" id="intro">Important text</p>

Common Attributes:

href — Link destination (for <a> tags)
src — Source file (for <img>, <script> tags)
alt — Alternative text (for images)
class — CSS class name
id — Unique identifier
style — Inline CSS styling

Practical Example: A Simple Webpage

Here's a more complete example combining what we've learned:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Portfolio</title>
  </head>
  <body>
    <h1>Welcome to My Portfolio</h1>
    <p>Hi! I'm learning HTML and this is my first webpage.</p>
    
    <h2>About Me</h2>
    <p>I'm a <strong>web developer</strong> in training.</p>
    
    <h2>My Photo</h2>
    <img src="profile.jpg" alt="My profile photo" width="300" />
    
    <h2>Contact</h2>
    <p>Email me at: <a href="mailto:hello@example.com">hello@example.com</a></p>
  </body>
</html>

Semantics & Accessibility

Use semantic tags to make documents easier to read for humans and assistive technologies:

<header>...</header>  <!-- Top of page -->
<nav>...</nav>        <!-- Navigation links -->
<main>...</main>      <!-- Main content -->
<article>...</article> <!-- Independent content -->
<aside>...</aside>    <!-- Sidebar content -->
<footer>...</footer>  <!-- Bottom of page -->

Accessibility Best Practices:

Always add alt text for images
Use headings in logical order (h1 → h2 → h3)
Use semantic HTML instead of generic divs
Provide meaningful link text (avoid "click here")

Quick Exercises

Create an HTML file with a page title and a short paragraph about yourself
Add an image using the <img> tag and include an alt attribute
Try adding a link to an external site using the <a> tag
Create a heading hierarchy: h1 for main title, h2 for sections, h3 for subsections
Add a list of your favorite hobbies using <ul> and <li> tags

Mini Quiz — Check Your Understanding

1. Which tag defines the most important heading on a page?

2. Which attribute provides alternate text for images?

3. Which tag is used to create a link?

4. What does DOCTYPE tell the browser?

5. Which section contains metadata not visible on the page?

Lesson Summary

This lesson introduced HTML as the structure layer of the web. You learned about:

The minimal HTML document skeleton and its components
HTML tags, elements, and attributes
Semantic elements and accessibility best practices
Common code editors for web development
How to create your first simple webpage

Remember: Structure with HTML, style with CSS, and add behavior with JavaScript.