🎯 Learning Objectives: Understand HTML tags and elements, explore void elements, and see how HTML, CSS, and JavaScript work together
🌐 The Web Development Trinity
Three Languages Working Together
HTML (HyperText Markup Language) provides _________________ and _________________
CSS (Cascading Style Sheets) adds _________________ to HTML elements
JavaScript adds _________________ and makes pages interactive
💡 Remember: HTML and CSS are technically NOT _________________ languages because they don't contain logic - they only handle presentation!
Quick Check - Which Language Would You Use?
- To add a paragraph of text: _________________
- To change the color of a button: _________________
- To make a button do something when clicked: _________________
🏗️ HTML Tags - The Building Blocks
What are HTML Tags?
HTML tags are _________________ wrapped in _________________ brackets
Two Types of Tags:
- Opening tags: Look like: _________________
- Closing tags: Look like: _________________
The main difference between opening and closing tags is the _________________
Practice: Write the opening and closing tags for a paragraph:
Opening: _________________________
Closing: _________________________
📦 HTML Elements - Content + Tags
Anatomy of an HTML Element
An HTML element consists of THREE parts:
- _________________ tag
- _________________
- _________________ tag
Complete this Element:
_______This is my first paragraph!_______
Elements are like _________________ for content - they tell the browser what type of content they contain.
Common HTML Elements
| Element |
Purpose |
Example |
| <h1> to <h6> |
_________________ |
<h1>Main Title</h1> |
| <p> |
_________________ |
<p>Text content</p> |
| <a> |
_________________ |
<a>Click here</a> |
| <div> |
_________________ |
<div>Content</div> |
| <span> |
_________________ |
<span>Inline text</span> |
| <ul> |
_________________ |
<ul><li>Item</li></ul> |
🚫 Void Elements - The Exceptions
What are Void Elements?
Void elements are special because they _________________ have a closing tag
They are called "void" because they are _________________ of content
Common Void Elements - List 4:
- _________________ - Line break
- _________________ - Image
- _________________ - Horizontal rule
- _________________ - Form input field
⚠️ Note on Self-Closing Tags:
You might see <br /> or <img /> in older code.
Modern HTML discourages this! Just use
_________________ instead.
🎯 Semantic HTML - Why the Right Tag Matters
Benefits of Using Correct Tags:
- SEO (Search Engine Optimization):
_________________________________________
- Accessibility:
_________________________________________
- Code Maintainability:
_________________________________________
Think About It: Why is using <h1> better than <p style="font-size:2em"> for a main heading?
_________________________________________
_________________________________________
⚠️ Common Beginner Mistakes to Avoid
1. Forgetting Closing Tags
❌ Wrong: <p>This won't work properly
✅ Correct: _________________________________________
2. Incorrect Nesting
❌ Wrong: <p><strong>Text</p></strong>
✅ Correct: _________________________________________
3. Using Wrong Elements
List one example of using the wrong element for content:
_________________________________________
💻 Practice Activities
Activity 1: Create These Elements
Write the complete HTML for:
- A main heading with the text "Welcome to My Site"
_________________________________________
- A paragraph with any text you choose
_________________________________________
- A line break (void element)
_________________________________________
Activity 2: Identify the Parts
For this element: <h2>About Me</h2>
- Opening tag: _________________
- Content: _________________
- Closing tag: _________________
📚 Homework Assignment
Due: Before Next Class (Thursday)
Add to your one-page website:
- One void tag: _________________
- Three new tags you haven't used before:
1. _________________
2. _________________
3. _________________
Submission Steps:
- Make your changes in _________________ (which editor?)
- Use git command: _________________ to stage changes
- Use git command: _________________ to commit with message
- Use git command: _________________ to upload to GitHub
- Submit the commit link on _________________
✅ Quick Review Questions
- What does HTML stand for?
_________________________________________
- What are the three parts of an HTML element?
_________________________________________
- What makes void elements different from regular elements?
_________________________________________
- Why is semantic HTML important? Give two reasons:
1. _________________________________________
2. _________________________________________
- What symbol indicates a closing tag?
_________________
📝 Additional Notes
Use this space for any additional notes, questions, or code examples from class:
🎯 Key Takeaways
- HTML provides structure, CSS provides style, JavaScript provides behavior
- HTML elements = opening tag + content + closing tag
- Void elements have no closing tag because they don't contain content
- Using semantic HTML improves SEO, accessibility, and code maintainability
- Always close your tags and nest them properly!