Lesson 3 • Beginner
HTML Elements & Attributes
Read this carefully. This is non-negotiable knowledge.
What You'll Learn
- ✓ What HTML elements are and how they work
- ✓ Void (self-closing) elements
- ✓ Divs vs Spans (block vs inline)
- ✓ Links, images, buttons, and forms
- ✓ HTML attributes (id, class, href, src)
- ✓ Building a complete product card
1) What Is an HTML Element?
An HTML element is the basic building block of every website. If you don't understand elements, you do not understand web development.
HTML Element Anatomy
See how elements are structured with tags and content
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Element Anatomy</title>
<style>
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
padding: 20px;
}
.example {
background: #1e293b;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
border-left: 4px solid #3b82f6;
}
code {
background: #334155;
padding: 2px 8px;
border-radius: 4px;
color: #22c55e;
}
</style>
</head>
<body>
...2) Void Elements (Self-Closing)
Some elements do not have closing tags. These are called void elements.
Void Elements
Elements that don't need closing tags
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Void Elements</title>
<style>
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
padding: 20px;
}
.demo {
background: #1e293b;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
}
input {
padding: 10px;
border-radius: 6px;
border: none;
margin: 5px 0;
}
hr {
border: none;
height: 2px;
background: #3b82f6;
...Common void elements:
- •
<img>- Images - •
<br>- Line breaks - •
<hr>- Horizontal rules - •
<input>- Form inputs
3) Divs and Spans (Containers)
Divs vs Spans
Block containers vs inline containers
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Divs vs Spans</title>
<style>
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
padding: 20px;
}
.card {
background: #1e293b;
padding: 20px;
border-radius: 12px;
margin: 15px 0;
border: 2px solid #3b82f6;
}
.highlight {
background: #22c55e;
color: #0f172a;
padding: 2px 8px;
border-radius: 4px;
}
.warning {
color: #e
...<div> means nothing by itself. It exists only to group other elements. If your page is 90% divs, you're doing it wrong.
4) Links (Navigation)
Different Link Types
External, internal, and anchor links
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Links Demo</title>
<style>
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
padding: 20px;
}
a {
color: #3b82f6;
text-decoration: none;
padding: 8px 16px;
display: inline-block;
border-radius: 6px;
transition: all 0.2s;
}
a:hover {
background: #3b82f6;
color: white;
}
.section {
background: #1e293b;
padding: 20px;
...5) Images (Accessibility Is Mandatory)
Image Best Practices
Always include alt text for accessibility
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
<style>
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
padding: 20px;
}
.image-card {
background: #1e293b;
padding: 20px;
border-radius: 12px;
margin: 20px 0;
}
img {
border-radius: 8px;
max-width: 100%;
}
.caption {
color: #94a3b8;
font-style: italic;
margin-top: 10px;
}
.bad { border: 3px solid
...Rules:
- ✅
src= file path or URL - ✅
alt= description for accessibility - If you skip alt, you break accessibility and hurt SEO
6) Buttons (User Actions)
Button Styles
Create clickable, accessible buttons
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<style>
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
padding: 20px;
}
.button-group {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin: 20px 0;
}
button {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.primary {
background:
...7) HTML Attributes (Extra Information)
Attributes give extra information to elements.
Common HTML Attributes
id, class, href, src, type, and more
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Attributes</title>
<style>
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
padding: 20px;
}
.attr-demo {
background: #1e293b;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
}
#unique-element {
color: #ef4444;
font-weight: bold;
}
.styled-class {
background: #22c55e;
color: #0f172a;
padding: 8px 16px;
border-ra
...8) Forms (User Input)
Complete Form Example
Build forms with various input types
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<style>
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e5e7eb;
padding: 20px;
}
form {
background: #1e293b;
padding: 30px;
border-radius: 12px;
max-width: 400px;
}
label {
display: block;
margin-bottom: 5px;
color: #94a3b8;
}
input, select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #334155;
...Practice Challenge
Build a product card with:
- An image with alt text
- A heading and description
- A price with a span for styling
- A "Add to Cart" button
Product Card Challenge
Create a complete product card component
Code Preview
<!DOCTYPE html>
<html>
<head>
<title>Product Card</title>
<style>
body {
font-family: system-ui, sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #e5e7eb;
padding: 40px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.product-card {
background: #1e293b;
border-radius: 16px;
overflow: hidden;
max-width: 320px;
box-shadow: 0 20px 40px rgba(0,0,0,
...Key Takeaways
- ✓Elements have opening tags, content, and closing tags
- ✓Void elements (img, br, hr, input) don't need closing tags
- ✓Use div for block containers, span for inline
- ✓Always include alt text on images
- ✓Attributes provide extra information (id, class, href, src)
Sign up for free to track which lessons you've completed and get learning reminders.