Introduction to HTML - Building the Web's Foundation

Welcome to web development! If you've ever wondered how websites are built, you're in the right place.

In this session, we'll start from zero and build a solid foundation in HTML — the language that structures every web page you see.

What is HTML?

HTML stands for HyperText Markup Language.

Let's break that down:

HyperText = documents that link to other documents (the "web" part of the web)
Markup = tags that describe what content means (headings, paragraphs, etc.)
Language = a system browsers understand to display content

Think of HTML as the skeleton of a web page:

It defines structure (header, main content, footer)
It organizes information (headings, lists, paragraphs)
It doesn't handle design — that's CSS's job (we'll get there!)

Why Learn HTML?

Every website you visit — Facebook, YouTube, Wikipedia — is built with HTML.

Even if you use tools like WordPress or Wix, understanding HTML gives you:

Full control over your content
The ability to fix issues yourself
A foundation for learning JavaScript and backend languages
Better job opportunities (web dev is in demand!)

Your First HTML Page

Let's write the simplest HTML page possible.

Create a file called index.html and type this:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Save it, then open it in a browser (double-click the file).

You should see:

Hello, World!

This is my first web page.

Congratulations! You just created a web page. 🎉

Understanding the Structure

Let's break down what each part does:

`<!DOCTYPE html>`

This tells the browser: "Hey, this is an HTML5 document!"

Always put this at the very top. It's not an HTML tag — it's a declaration.

`<html>...</html>`

The root element. Everything goes inside here.

`<head>...</head>`

Contains metadata — information about the page that doesn't show up on screen:

Page title (shows in the browser tab)
Links to CSS files
Meta tags for SEO
Character encoding

`<title>My First Page</title>`

The text that appears in the browser tab. Important for SEO!

`<body>...</body>`

Everything visible on the page goes here:

Headings
Paragraphs
Images
Links
Forms
Everything users see

HTML Tags Explained

HTML uses tags to mark up content.

Most tags come in pairs:

<tagname>Content goes here</tagname>

Opening tag: <tagname>
Closing tag: </tagname> (notice the /)

Some tags are self-closing (no content inside):

<img src="photo.jpg">
<br>
<hr>

Essential HTML Elements

Headings

HTML has 6 levels of headings:

<h1>Main Title (Largest)</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest heading</h6>

Best practice:

Use <h1> once per page (your main title)
Use headings in order (don't skip from <h1> to <h3>)
Think of them as an outline for your content

Paragraphs

<p>This is a paragraph of text. Browsers automatically add space before and after paragraphs.</p>

<p>Each paragraph tag creates a new block of text.</p>

Line Breaks

<p>
  First line<br>
  Second line<br>
  Third line
</p>

The <br> tag creates a line break without starting a new paragraph.

Horizontal Rule

<hr>

Creates a horizontal line — useful for separating sections.

Text Formatting Tags

Make text bold, italic, or add other emphasis:

<p>This is <strong>important text</strong> (bold).</p>
<p>This is <em>emphasized text</em> (italic).</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <del>deleted text</del> (strikethrough).</p>
<p>This is <ins>inserted text</ins> (underline).</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup>.</p>

Note: <strong> vs <b> and <em> vs <i>

Use <strong> and <em> — they have semantic meaning (screen readers understand them)
Avoid <b> and <i> — they're just visual (no meaning)

Practice Exercise

Try creating this page:

<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>About Me</h1>
    
    <p>Hi! My name is <strong>[Your Name]</strong>.</p>
    
    <h2>What I'm Learning</h2>
    <p>
      I'm learning <em>web development</em> at CIT.<br>
      This is my first HTML page!
    </p>
    
    <h2>My Goals</h2>
    <p>By the end of this course, I want to:</p>
    <p>1. Build my own website</p>
    <p>2. Understand how the web works</p>
    <p>3. Learn JavaScript</p>
    
    <hr>
    
    <p><small>Created on November 26, 2025</small></p>
  </body>
</html>

Save it as about.html and open it in your browser!

Common Mistakes to Avoid

1. Forgetting closing tags

<!-- ❌ Wrong -->
<p>This is a paragraph
<p>Another paragraph

<!-- ✅ Correct -->
<p>This is a paragraph</p>
<p>Another paragraph</p>

2. Nesting tags incorrectly

<!-- ❌ Wrong -->
<p><strong>This is bold</p></strong>

<!-- ✅ Correct -->
<p><strong>This is bold</strong></p>

Tags must be closed in the reverse order they were opened.

3. Missing DOCTYPE

Always start with <!DOCTYPE html>!

What's Next?

Now that you understand basic HTML structure, in Part 2 we'll explore:

Links (connecting pages)
Images (adding visuals)
Lists (organized content)
Semantic HTML (better structure)

You're off to a great start! Keep practicing and experimenting. 🚀

Quick Reference

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Headings -->
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    
    <!-- Paragraph -->
    <p>A paragraph of text.</p>
    
    <!-- Formatting -->
    <strong>Bold</strong>
    <em>Italic</em>
    <br> <!-- Line break -->
    <hr> <!-- Horizontal line -->
  </body>
</html>

HTML Elements - Links, Images, Lists & More