Introduction to HTML - Complete Lesson by Patrick Porcuna

📚 Learning Objectives

By the end of this lesson, you will be able to:

✅ Understand the structure of an HTML Document
✅ Create a basic web page using HTML
✅ Use common HTML elements such as headings, paragraphs, links, images, and lists
✅ Structure content using semantic HTML tags
✅ Apply best practices for writing clean, accessible HTML code
✅ Create your first "About Me" HTML Page

🤔 What is HTML?

HTML = HyperText Markup Language

HTML is like the skeleton of a website, giving it structure and form. It sets up everything you see online, from text and images to forms and buttons.

Without HTML, websites would just be plain text without any organization or structure.

🎨 HTML vs CSS vs JavaScript

These three technologies work together to create modern websites:

Technology	Purpose	Metaphor	Example
HTML	Structure & Content	🏗️ The skeleton/frame of a house	Headings, paragraphs, images, links
CSS	Style & Design	🎨 Paint, decoration, furniture	Colors, fonts, layouts, animations
JavaScript	Interactivity & Behavior	⚡ Electricity, plumbing, smart features	Button clicks, form validation, animations

💡 Remember:

HTML defines WHAT content appears on the page.

CSS defines HOW that content looks.

JavaScript defines HOW that content behaves.

🌐 The Birth and Evolution of HTML

🧑‍💻 Sir Tim Berners-Lee at CERN (1989)

HTML was invented in 1989 by Sir Tim Berners-Lee at CERN to facilitate information sharing across computers. The first web page, created in 1991, was a simple text document with hyperlinks that laid the foundation for the internet as we know it today.

The Problem: Scientists at CERN needed a way to share research documents across different computer systems.

The Solution: HTML - A simple markup language that could link documents together using hyperlinks.

📅 HTML Evolution Timeline

HTML 1.0 (1993)

The Foundation: Laid the groundwork with basic elements like headings, paragraphs, lists, and hyperlinks. It was simple but revolutionary, allowing documents to be interconnected across the internet.

HTML 2.0 (1995)

Getting Visual: Introduced tables for data organization and the ability to embed images directly into web pages, making content more structured and visually appealing.

HTML 3.2 & 4.01 (1997-1999)

Major Expansion: Brought frames for page layouts, style sheets (CSS), JavaScript support for interactivity, and multimedia capabilities. HTML 4.01 became the standard for over a decade.

HTML5 (2014) 🎉

The Game-Changer: Introduced semantic elements (<header>, <nav>, <article>), native video and audio support, canvas for graphics, improved form controls, and better accessibility features.

HTML5.1, 5.2, 5.3 & Beyond (2016+)

Continuous Improvement: Focus on performance optimization, security enhancements, better mobile support, and features for modern progressive web applications. HTML is now a "living standard" that evolves continuously.

🚀 The Future of HTML

📱 Mobile-First Design

Responsive websites that adapt seamlessly to smartphones, tablets, and desktops with better touch support and mobile optimizations.

🥽 VR & AR Integration

WebXR APIs enabling immersive virtual and augmented reality experiences directly in browsers without plugins.

♿ Enhanced Accessibility

Improved ARIA attributes and semantic elements ensuring websites work for all users, including those with disabilities.

🌐 IoT Integration

HTML interfaces for controlling smart home devices, wearables, and connected appliances through web technologies.

⚡ Performance Focus

Faster loading times, better resource management, and improved rendering for smoother user experiences.

🔒 Security & Privacy

Enhanced security features, better privacy controls, and safer methods for handling user data.

🔧 HTML Syntax: Elements, Tags, & Comments

📖 What is HTML Syntax?

HTML syntax defines the correct way to write HTML code so that web browsers can understand and display it properly. Understanding syntax is essential for creating valid, functional HTML documents.

Key Components of HTML Syntax:

Tags: Markers that define where elements begin and end
Elements: Complete units consisting of tags and content
Attributes: Additional information about elements
Values: Data assigned to attributes
Comments: Notes in code that browsers ignore

📄 DOCTYPE Declaration

The DOCTYPE declaration tells the browser which version of HTML you're using. It must be the very first line of every HTML document.

<!DOCTYPE html>

⚠️ Important: Always include the DOCTYPE declaration! Without it, browsers may render your page in "quirks mode," causing inconsistent behavior.

🏗️ Complete HTML Document Structure

Every HTML page follows this basic structure:

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

Breaking it down:

<!DOCTYPE html> - Declares HTML5
<html lang="en"> - Root element, specifies English language
<head> - Contains metadata (not visible on page)
<meta charset="UTF-8"> - Character encoding for proper text display
<meta name="viewport"...> - Makes page responsive on mobile devices
<title> - Text shown in browser tab
<body> - Contains all visible content

🏷️ HTML Tags

Tags define where elements begin and end. They are enclosed in angle brackets < >.

✅ Opening Tag

<p>

Marks the beginning of an element

✅ Closing Tag

</p>

Marks the end of an element (note the forward slash)

Complete Element Example:

<p>This is a paragraph.</p>

<h1>This is a heading</h1>

<a href="https://example.com">This is a link</a>

🔚 Self-Closing Tags

Some elements don't contain content and therefore don't need a closing tag. These are called self-closing or void elements.

Common Self-Closing Tags:

Examples:

<!-- Image -->
<img src="photo.jpg" alt="A beautiful sunset">

<!-- Line Break -->
<p>First line<br>Second line</p>

<!-- Horizontal Rule -->
<hr>

<!-- Form Input -->
<input type="text" placeholder="Enter your name">

📦 Block-Level vs Inline Elements

HTML elements are categorized into two main types based on their display behavior:

📦 Block-Level Elements

Characteristics:

Start on a new line
Take up the full width available
Can contain other block and inline elements
Create "blocks" of content

Common Examples:

<h1> to <h6> - Headings
<p> - Paragraphs
<div> - Generic container
<section> - Section
<ul>, <ol> - Lists
<header>, <footer> - Semantic containers

📝 Inline Elements

Characteristics:

Don't start on a new line
Only take up necessary space
Can only contain other inline elements
Flow within text

Common Examples:

<a> - Links
<span> - Inline container
<strong> - Bold text
<em> - Italic text
<img> - Images
<code> - Code snippets

Visual Example:

<!-- Block elements stack vertically -->
<h1>Main Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<!-- Inline elements flow horizontally -->
<p>This text has <strong>bold</strong> and <em>italic</em> words.</p>

💬 HTML Comments

Comments allow you to add notes in your code that won't be displayed to users. They're essential for documentation and collaboration.

<!-- This is a comment -->
<p>This text will display.</p>
<!-- This comment won't display -->

<!-- 
    Multi-line comments
    are also possible
-->

<!-- TODO: Add image here -->
<!-- NOTE: This section needs review -->

💡 When to Use Comments:

Explain complex or confusing code
Temporarily disable code during development
Leave notes for other developers (or your future self!)
Mark sections of your HTML
Add TODO reminders

Keyboard Shortcut: Most code editors use Ctrl + / (Windows) or Cmd + / (Mac) to toggle comments.

🎯 Attributes and Values

Attributes provide additional information about HTML elements. They're written as name-value pairs inside the opening tag.

Syntax:

<element attribute="value">Content</element>

Real Examples:

<!-- Image with source and alt text -->
<img src="photo.jpg" alt="My photo" width="300" height="200">

<!-- Link with URL and target -->
<a href="https://example.com" target="_blank" title="Visit Example">Click here</a>

<!-- Input with type and placeholder -->
<input type="email" placeholder="Enter your email" required>

<!-- Div with class and id -->
<div id="header" class="container">Content</div>

🌍 Global vs Element-Specific Attributes

🌍 Global Attributes (work on ANY element)

id - Unique identifier for an element
class - Classifies elements into groups
style - Inline CSS styling
title - Tooltip text on hover
lang - Language of element content
hidden - Hides the element

<p id="intro" class="highlight" title="Introduction">
    Hello World
</p>

🎯 Element-Specific Attributes

href - For <a> links
src - For <img>, <script>
alt - For <img> images
type - For <input>, <button>
action - For <form>
placeholder - For <input>

<a href="page.html">Link</a>
<img src="pic.jpg" alt="Photo">
<input type="text" placeholder="Name">

🏗️ Common HTML Elements

📰 Headings (h1-h6)

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). They create a hierarchy that helps organize your content.

<h1>Main Page Title (32px)</h1>
<h2>Major Section (24px)</h2>
<h3>Subsection (18px)</h3>
<h4>Minor Heading (16px)</h4>
<h5>Small Heading (14px)</h5>
<h6>Smallest Heading (12px)</h6>

⚠️ Heading Best Practices:

Use only ONE <h1> per page - This should be your main page title
Don't skip levels - Go from h1 → h2 → h3, not h1 → h3
Use headings for structure, not styling - Don't use h3 just because you like the size
Make headings descriptive - They help users and search engines understand your content

🎯 Why Headings Matter

👥 For Users

Easier to scan content and find information quickly

♿ For Accessibility

Screen readers use headings to navigate pages

🔍 For SEO

Search engines use headings to understand content structure

📄 Paragraphs

The <p> tag defines a paragraph of text. Browsers automatically add space above and below paragraphs for better readability.

<p>This is a paragraph of text. It can contain multiple sentences.</p>

<p>This is another paragraph. Each paragraph is separated by space.</p>

<p>You can have as many paragraphs as you need to organize your content.</p>

✨ Text Formatting

HTML provides several inline elements to format text within paragraphs:

Tag	Purpose	Example	Result
`<strong>`	Important text (bold)	`<strong>Bold</strong>`	Bold
`<em>`	Emphasized text (italic)	`<em>Italic</em>`	Italic
`<u>`	Underlined text	`<u>Underlined</u>`	Underlined
`<mark>`	Highlighted text	`<mark>Marked</mark>`	Marked
`<small>`	Smaller text	`<small>Small</small>`	Small
`<code>`	Code snippet	`<code>code</code>`	`code`

Example Usage:

<p>This is <strong>very important</strong> information.</p>

<p>The word <em>emphasis</em> is italicized for emphasis.</p>

<p>You can <u>underline</u> text when needed.</p>

<p>Use <mark>highlighting</mark> to draw attention.</p>

📋 Lists

HTML provides two main types of lists for organizing information:

🔢 Ordered Lists (Numbered)

Use when the order of items matters (steps, rankings, sequences)

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Displays as:

First item
Second item
Third item

🔵 Unordered Lists (Bullets)

Use when order doesn't matter (features, items, collections)

<ul>
  <li>Bullet point</li>
  <li>Another point</li>
  <li>Final point</li>
</ul>

Displays as:

Bullet point
Another point
Final point

Real-World Examples:

<h2>How to Make a Sandwich</h2>
<ol>
  <li>Get two slices of bread</li>
  <li>Add your favorite filling</li>
  <li>Put the slices together</li>
  <li>Enjoy!</li>
</ol>

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
  <li>Butter</li>
</ul>

🔗 Links (Anchor Tags)

The <a> (anchor) tag creates clickable links that navigate to other pages or resources.

<!-- Basic link -->
<a href="https://www.google.com">Go to Google</a>

<!-- Link that opens in new tab -->
<a href="https://www.example.com" target="_blank">Open in New Tab</a>

<!-- Email link -->
<a href="mailto:email@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>

<!-- Link to section on same page -->
<a href="#section-id">Jump to Section</a>

📝 Link Attributes:

href - The URL or destination (required)
target="_blank" - Opens link in a new tab/window
title - Tooltip text that appears on hover
rel="noopener" - Security best practice for external links

🖼️ Images

The <img> tag embeds images into your webpage. It's a self-closing tag.

<!-- Basic image -->
<img src="photo.jpg" alt="Description of photo">

<!-- Image with dimensions -->
<img src="logo.png" alt="Company Logo" width="200" height="100">

<!-- Image with title tooltip -->
<img src="sunset.jpg" alt="Beautiful sunset" title="Sunset at the beach">

⚠️ ALWAYS Include Alt Text!

The alt attribute is crucial for:

Accessibility: Screen readers describe images to visually impaired users
SEO: Search engines understand what your images show
Fallback: Text displays if the image fails to load
Context: Helps users understand the image's purpose

📸 Image File Formats

Format	Best For	Features	When to Use
JPG/JPEG	Photographs	Small file size, no transparency	Photos, complex images with many colors
PNG	Graphics, logos	Transparency support, lossless	Logos, icons, images needing transparency
GIF	Simple animations	Limited colors, animations	Simple animations, small graphics
SVG	Icons, logos	Scalable, stays sharp at any size	Icons, logos, illustrations
WebP	Modern web	Smaller files, better quality	Modern websites (with fallbacks)

🏛️ Semantic HTML5

🤔 What is Semantic HTML?

Semantic = Meaningful

Semantic HTML uses tags that describe the meaning and purpose of content, not just how it looks. Instead of generic <div> elements everywhere, you use specific tags that tell browsers, search engines, and developers what each section of content represents.

❌ Non-Semantic HTML

<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

Doesn't convey meaning - just generic containers

✅ Semantic HTML

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Clear, meaningful structure everyone understands

✨ Why Use Semantic HTML?

🔍 Better SEO

Search engines understand your content structure and can rank it more effectively

♿ Improved Accessibility

Screen readers navigate pages more easily, helping users with disabilities

📖 Easier Maintenance

Other developers (and future you!) understand code faster

🎯 Better Semantics

Code clearly communicates the purpose of each section

🌐 Browser Support

Browsers apply appropriate default styling automatically

🤖 Machine Readable

AI and automated tools can better parse your content

🏛️ Key Semantic Elements

<header> - The Page/Section Introduction

Contains introductory content or navigational aids. Can be used for the whole page or individual sections.

<header>
  <img src="logo.png" alt="Company Logo">
  <h1>My Website</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

Typically contains: Logo, site title, main navigation, search bar

<nav> - Navigation Links

Contains navigation links for the site or page sections.

<nav>
  <ul>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Use for: Main site navigation, breadcrumbs, table of contents, pagination

<main> - The Primary Content

Contains the main content of the page. Only ONE <main> per page!

<main>
  <h1>Welcome to My Website</h1>
  <p>This is the primary content area...</p>
  
  <section>
    <h2>Our Services</h2>
    <p>We offer...</p>
  </section>
</main>

⚠️ Important Rules:

Only ONE <main> element per page
Should NOT be inside <header>, <footer>, <aside>, <nav>, or <article>
Content should be unique to the page

<section> - Thematic Grouping

Groups related content together with a common theme. Should typically have a heading.

<section>
  <h2>About Us</h2>
  <p>We are a company that...</p>
</section>

<section>
  <h2>Our Mission</h2>
  <p>Our mission is to...</p>
</section>

Use for: Chapters, tabs, numbered sections, different topics on a page

<article> - Self-Contained Content

Represents a complete, independent piece of content that could stand alone.

<article>
  <h2>10 Tips for Learning HTML</h2>
  <p>Published on <time datetime="2025-01-15">January 15, 2025</time></p>
  <p>Learning HTML can be fun and rewarding...</p>
  <footer>
    <p>By John Doe</p>
  </footer>
</article>

Use for: Blog posts, news articles, forum posts, user comments, product cards

Test: Could this content be distributed independently (RSS feed, social media)? If yes, use <article>!

<aside> - Supplementary Content

Contains content that's tangentially related to the main content.

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">Introduction to CSS</a></li>
    <li><a href="#">JavaScript Basics</a></li>
  </ul>
</aside>

Use for: Sidebars, pull quotes, related links, advertisements, author bios

<footer> - The Page/Section Conclusion

Contains footer information for the page or a section. Can be used multiple times.

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <nav>
    <a href="#privacy">Privacy Policy</a>
    <a href="#terms">Terms of Service</a>
  </nav>
  <p>Contact: <a href="mailto:info@example.com">info@example.com</a></p>
</footer>

Typically contains: Copyright info, contact details, social media links, secondary navigation, legal links

🏗️ Complete Semantic Structure Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Semantic Website</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#blog">Blog</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>About Us</h2>
            <p>We are a company dedicated to...</p>
        </section>
        
        <section id="blog">
            <h2>Latest Blog Posts</h2>
            
            <article>
                <h3>First Blog Post</h3>
                <p>Published on January 15, 2025</p>
                <p>Content of the blog post...</p>
            </article>
            
            <article>
                <h3>Second Blog Post</h3>
                <p>Published on January 10, 2025</p>
                <p>Content of the blog post...</p>
            </article>
        </section>
    </main>
    
    <aside>
        <h3>Popular Posts</h3>
        <ul>
            <li><a href="#">Top 10 HTML Tips</a></li>
            <li><a href="#">CSS for Beginners</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>&copy; 2025 My Website</p>
        <p>Contact: info@example.com</p>
    </footer>
</body>
</html>

✅ Best Practices for Writing HTML

1. Use Consistent Indentation

Proper indentation makes code readable and easier to debug.

❌ Bad - No Indentation

<div>
<h1>Title</h1>
<p>Text</p>
<ul>
<li>Item</li>
</ul>
</div>

✅ Good - Clear Indentation

<div>
  <h1>Title</h1>
  <p>Text</p>
  <ul>
    <li>Item</li>
  </ul>
</div>

2. Use Semantic HTML

❌ Bad - Generic Divs

<div class="navigation">
  <div class="link">Home</div>
  <div class="link">About</div>
</div>

✅ Good - Semantic Tags

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

3. Always Include Alt Text

❌ Bad - No Alt Text

<img src="photo.jpg">

Screen readers can't describe the image

✅ Good - Descriptive Alt Text

<img src="photo.jpg" 
     alt="Sunset over mountains 
     with orange and pink sky">

Accessible and descriptive

4. Use Lowercase Tags and Attributes

❌ Bad - Mixed Case

<DIV Class="Container">
  <H1>TITLE</H1>
</DIV>

✅ Good - Lowercase

<div class="container">
  <h1>Title</h1>
</div>

5. Close All Tags Properly

❌ Bad - Unclosed Tags

<p>First paragraph
<p>Second paragraph
<ul>
  <li>Item 1
  <li>Item 2

✅ Good - All Tags Closed

<p>First paragraph</p>
<p>Second paragraph</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

6. Add Meaningful Comments

❌ Bad - No Comments

<section>
  <h2>Products</h2>
  ...
</section>
<section>
  <h2>Reviews</h2>
  ...

✅ Good - Clear Comments

<!-- Products Section -->
<section>
  <h2>Products</h2>
  ...
</section>

<!-- Customer Reviews -->
<section>
  <h2>Reviews</h2>
  ...

📋 Complete Best Practices Checklist

✅ Use consistent indentation (2 or 4 spaces)
✅ Use semantic HTML tags where appropriate
✅ Always include alt text for images
✅ Use lowercase for tags and attributes
✅ Quote all attribute values
✅ Add comments to explain complex code
✅ Validate your HTML regularly
✅ Keep one <h1> per page
✅ Follow proper heading hierarchy (h1 → h2 → h3)
✅ Close all tags properly
✅ Use meaningful class and id names
✅ Keep your code organized and clean

🔍 Validate Your HTML

Use the W3C Markup Validator

URL: https://validator.w3.org/

Benefits of Validation:

✅ Catches syntax errors and typos
✅ Ensures browser compatibility
✅ Follows web standards
✅ Improves accessibility
✅ Better SEO performance
✅ Prevents future bugs

🌲 The Document Object Model (DOM)

What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML documents. When a web page loads, the browser creates a tree-like representation of the page in memory. This allows JavaScript to access and manipulate the content, structure, and styles dynamically.

🌳 DOM Tree Structure

document
  └── html
      ├── head
      │   ├── title
      │   │   └── "Page Title"
      │   ├── meta
      │   └── link
      └── body
          ├── header
          │   ├── h1
          │   │   └── "Welcome"
          │   └── nav
          │       └── ul
          │           ├── li → a
          │           └── li → a
          ├── main
          │   ├── section
          │   │   ├── h2
          │   │   └── p
          │   └── article
          │       ├── h3
          │       └── p
          └── footer
              └── p

🔍 Types of DOM Nodes

Node Type	Description	Example
Document Node	The root of the entire HTML document	`document`
Element Nodes	HTML elements/tags	`<div>`, `<p>`, `<h1>`
Attribute Nodes	Element attributes	`href="..."`, `class="..."`
Text Nodes	Text content within elements	The actual text inside tags
Comment Nodes	HTML comments	`<!-- comment -->`

🔍 Try It Yourself!

Exploring the DOM with Browser DevTools:

Right-click anywhere on this webpage
Select "Inspect" or "Inspect Element"
Explore the HTML structure in the Elements/Inspector panel
Click on different elements to see them highlighted on the page
Try double-clicking text in the inspector to edit it (changes are temporary!)

This is the DOM in action! You're seeing the live tree structure of the webpage.

⚡ What Can You Do with the DOM?

🔄 Change content dynamically (update text, images, etc.)
➕ Add new HTML elements to the page
🗑️ Remove existing elements
🎨 Modify styles and CSS classes
🎯 Respond to user interactions (clicks, typing, etc.)
📊 Create animations and visual effects
✔️ Validate forms before submission
🔄 Load content without refreshing the page

🎯 Class Activities & Assignments

🎵 Activity 1: Song Lyric Page

⏱️ Time: 15 minutes

Task: Create an HTML page for your favorite song (school-appropriate lyrics only!)

📋 Requirements:

✅ Use <!DOCTYPE html> declaration
✅ Proper HTML structure (html, head, body)
✅ <title> tag with song title
✅ Use <h1> for the song title
✅ Use <h2> for the artist name
✅ Use <p> tags for each verse
✅ Use <strong> to emphasize important words
✅ Use <em> for lyrics you want to highlight
✅ Add comments to organize your sections

💡 Tips:

Organize verses with comments like 
Use <br> tags for line breaks within verses
Keep it school-appropriate!

👤 Activity 2: About Me Page

⏱️ Time: 20-30 minutes during class

Task: Create a personal webpage about yourself

📋 Required Elements:

✅ <!DOCTYPE html> declaration
✅ Proper <html>, <head>, <body> structure
✅ Page <title> in the head section
✅ ONE <h1> with your name
✅ At least THREE <h2> section headings
✅ Multiple paragraphs with text formatting (<strong>, <em>)
✅ At least ONE image with proper alt text
✅ ONE ordered list (favorites, steps, goals, etc.)
✅ ONE unordered list (hobbies, skills, interests, etc.)
✅ At least TWO working links (social media, portfolio, etc.)
✅ Semantic HTML tags (<header>, <main>, <section>, <footer>)

💡 Suggested Sections:

About Me: Brief introduction, where you're from, what you're studying
My Interests: Hobbies, favorite activities, sports or clubs
My Favorites: Favorite books, movies, music, foods
Goals: What you want to learn or achieve
Contact/Connect: Social media links, email

🏆 Grading Rubric (100 points total):

Category	Points	Description
HTML Structure	20	DOCTYPE, proper nesting, indentation
Required Elements	30	All elements present and used correctly
Semantic HTML	20	Use of header, main, section, footer
Code Quality	15	Clean code, comments, validated HTML
Creativity & Content	15	Interesting content, good organization

🐱 Homework: Build a Cat Photo App

📅 Due: Next class session

Task: Create a fun, multi-section webpage all about cats!

📋 Requirements:

✅ Multiple themed sections about cats
✅ At least FIVE cat images with descriptive alt text
✅ A photo gallery organized using lists
✅ Links to cat-related websites (shelters, cat facts, etc.)
✅ Proper semantic HTML structure throughout
✅ Headings, paragraphs, and formatted text
✅ Both ordered and unordered lists
✅ Comments explaining different sections of your code
✅ Validated HTML (use W3C Validator)

💡 Suggested Sections:

Cat Facts: Interesting information about cats
Photo Gallery: Collection of cat images
Cat Breeds: Different types of cats
Cat Care Tips: How to care for cats
Resources: Links to cat shelters and organizations

🌟 Stretch Goals (Optional - Extra Credit):

🎯 Create multiple pages and link them together (index.html, gallery.html, facts.html)
🎯 Add a navigation menu for easy page access
🎯 Include a table with cat breed information
🎯 Add more interesting cat facts with citations
🎯 Create a "contact" or "adoption" section
🎯 Use more advanced semantic tags

📸 Where to Find Cat Images:

Free Stock Photo Sites:

Unsplash: unsplash.com
Pexels: pexels.com
Pixabay: pixabay.com

⚠️ Remember: Use royalty-free images, include proper alt text, keep file sizes reasonable!

⚠️ Common Mistakes to Watch For

🐛 Top 10 Student Mistakes:

Forgetting closing tags - Every opening tag needs a closing tag (except self-closing tags like <img>)
Mixing up tag syntax - Closing tags have a forward slash: </tag>, not <tag/>
Not indenting code - Makes code hard to read, debug, and maintain
Skipping DOCTYPE - Always start with <!DOCTYPE html> at the very top
Using multiple <main> elements - Only ONE per page!
Missing alt text - Essential for accessibility and SEO
Incorrect heading hierarchy - Don't skip from h1 to h3; go in order
Forgetting quotes - Attribute values must be in quotes: src="image.jpg"
Confusing block vs inline - Understanding element types prevents layout issues
Not validating HTML - Always use W3C Validator before submitting!

🔧 Debugging Tips

🔍 Check for missing or mismatched closing tags
🔍 Look for typos in tag names and attribute names
🔍 Verify all quotes are properly closed
🔍 Ensure proper nesting (tags should close in reverse order of opening)
🔍 Use W3C Validator to find syntax errors
🔍 Check browser console for error messages
🔍 Use browser DevTools to inspect the DOM
🔍 Comment out sections to isolate problems
🔍 Use a code editor with syntax highlighting

📚 Additional Resources

🌐 Online Learning Platforms

W3Schools

w3schools.com/html

Interactive tutorials, examples, and comprehensive reference materials.

MDN Web Docs

developer.mozilla.org

Professional documentation from Mozilla, detailed and accurate.

freeCodeCamp

freecodecamp.org

Free coding courses with hands-on projects and certifications.

Codecademy

codecademy.com

Interactive lessons with immediate feedback and practice.

HTML Dog

htmldog.com

Straightforward tutorials for beginners through advanced.

Khan Academy

khanacademy.org

Video lessons and interactive coding challenges.

🔧 Tools & Validators

Tool	Purpose	URL
W3C Markup Validator	Validate HTML syntax	validator.w3.org
Browser DevTools	Inspect and debug HTML	Press F12 in most browsers
Can I Use	Check browser compatibility	caniuse.com
HTML Color Picker	Choose colors for styling	htmlcolorcodes.com
CodePen	Online code editor	codepen.io

📖 Practice & Challenge Sites

Frontend Mentor: frontendmentor.io - Real-world design challenges
Exercism: exercism.org - Coding exercises with mentorship
The Odin Project: theodinproject.com - Full curriculum for web development
100 Days CSS: 100dayscss.com - Daily coding challenges

📋 Quick Reference Guide

Essential HTML Tags

Tag	Purpose	Example
`<h1>` - `<h6>`	Headings (1 is largest/most important)	`<h1>Page Title</h1>`
`<p>`	Paragraph of text	`<p>Text here</p>`
`<a>`	Hyperlink	`<a href="url">Link Text</a>`
`<img>`	Image	`<img src="pic.jpg" alt="description">`
`<ul>`	Unordered (bullet) list	`<ul><li>Item</li></ul>`
`<ol>`	Ordered (numbered) list	`<ol><li>Item</li></ol>`
`<div>`	Generic block container	`<div>Content</div>`
`<span>`	Generic inline container	`<span>Text</span>`
`<strong>`	Important text (bold)	`<strong>Bold</strong>`
`<em>`	Emphasized text (italic)	`<em>Italic</em>`
`<br>`	Line break	`Line 1<br>Line 2`
`<hr>`	Horizontal rule/separator	`<hr>`

Semantic HTML5 Tags

Tag	Purpose	Best Used For
`<header>`	Page or section header	Logo, navigation, page title
`<nav>`	Navigation links	Main menu, breadcrumbs, pagination
`<main>`	Primary page content	Main content area (only one per page)
`<section>`	Thematic grouping of content	Chapters, tabbed content, themed sections
`<article>`	Self-contained content	Blog posts, news articles, forum posts
`<aside>`	Supplementary content	Sidebars, related links, pull quotes
`<footer>`	Page or section footer	Copyright, contact info, legal links

💡 Tips for Success

✨ Start Simple

Don't try to build a complex site right away. Master the basics first, then gradually add more features.

📝 Type It Yourself

Don't just copy and paste code. Type it out yourself to build muscle memory and understanding.

🔍 Use DevTools

Browser developer tools (F12) are your best friend for learning and debugging.

❓ Ask Questions

There are no dumb questions in coding. Every expert was once a beginner!

🐛 Debug Patiently

Every developer makes mistakes. Debugging is a skill that improves with practice.

💾 Save Often

Save your work frequently! Use version control (like Git) when you're ready.

🎨 Be Creative

Make projects that interest you. You'll learn more when you're engaged.

📚 Read Documentation

W3Schools and MDN are excellent resources. Get comfortable reading docs.

🔄 Practice Daily

Consistency beats intensity. Code a little bit every day for best results.

🚀 What's Next in Your Web Development Journey?

✅ Step 1: Master HTML (You Are Here!)

Learn structure, semantic tags, forms, and best practices. Complete projects and get comfortable with HTML syntax.

🎨 Step 2: Learn CSS (Cascading Style Sheets)

Style your pages with colors, fonts, layouts, and animations. Learn about flexbox, grid, and responsive design.

⚡ Step 3: Add JavaScript

Make your pages interactive with dynamic behavior, user input handling, and DOM manipulation.

📱 Step 4: Responsive Design

Create websites that work perfectly on all devices - desktops, tablets, and mobile phones.

🔧 Step 5: Advanced Topics

Frameworks (React, Vue), build tools, version control (Git), and modern web development practices.

📚 Review Objectives 🎯 Start Activities ✔️ Validate HTML

🎉 Congratulations!

You've Completed the Introduction to HTML Lesson!

You now know how to structure web pages using HTML, use semantic elements for better accessibility and SEO, add various content types with proper elements, and follow industry best practices. This is the foundation of all web development!

Remember: Every expert web developer was once exactly where you are now. Keep practicing, stay curious, experiment fearlessly, and don't be afraid to make mistakes - that's how you learn!

✅ Before You Go - Action Items:

✅ Complete your Song Lyric Page activity
✅ Work on your About Me Page (due today)
✅ Start the Cat Photo App homework (due next class)
✅ Bookmark useful resources for future reference
✅ Validate your HTML using W3C Validator
✅ Practice with browser DevTools (Inspect Element)
✅ Join online coding communities for support

Keep Coding! 💻✨

The web is waiting for your amazing creations!

Every line of code you write is a step toward becoming a skilled developer.

📚 Continue Your Learning Journey