HTML Intermediate: Structure & Semantics
"If part 1 was the house foundation, part 2 is about arranging the rooms to be cozy and well-structured."
🖼️ What is <iframe>?
<iframe> is like a small window in your page that can display another web page from the internet.
🔍 Functions:
- Display YouTube videos
- Show Google Maps
- Embed external documents
🔧 Example:
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" allowfullscreen></iframe>
⚠️ Tips:
- Don't use too many iframes, they make pages heavy
- Use
width,height, andallowfullscreenattributes to control appearance
📦 What is <div>?
<div> stands for division, and is used to wrap/group larger HTML elements.
🔍 Its functions:
- Divide content into sections
- Used with CSS for layout styling
🧠 Think of it like: div = big container (like a cardboard box holding many items)
🔧 Example:
<div class="card">
<h2>Article Title</h2>
<p>Article content goes here...</p>
</div>
🧬 What is <span>?
<span> is an inline element used to wrap small text you want to format or style.
🔍 Its functions:
- Highlight specific text
- Add style to words/sentences without disrupting paragraphs
🧠 Think of it like: span = text highlighter, not a box
🔧 Example:
<p>My name is <span class="highlight">Syifa Arizal</span> and I love coding!</p>
⚔️ Difference Between div vs span
| Comparison | <div> |
<span> |
|---|---|---|
Type |
Block-level | Inline |
| Size | Full line width | Only small text selection |
| Commonly used for | Layout & large containers | Styling specific words/sentences |
| Creates new line? | Yes | No |
🧠 If div is a container box, span is a text highlighter.
🧠 What is Semantic HTML?
Semantic HTML are HTML elements whose names already indicate their meaning. So not just neat coding, but also makes websites easier to understand by browsers, SEO, and screen readers.
🎯 Purpose:
- Clearer structure
- More accessible (for disabilities)
- SEO-friendly
🧱 Semantic Tag Examples:
| Tag | Meaning |
|---|---|
<header> |
Page header (usually contains logo, nav) |
<nav> |
Navigation/menu |
<main> |
Main content |
<article> |
Standalone article |
<section> |
Specific section in page |
<footer> |
Page footer |
<aside> |
Sidebar or additional info |
🚫 Non-Semantic HTML
Non-semantic HTML are tags that don't provide context about their content.
🎯 Examples:
<div><span>
These don't say "hey I'm navigation" or "this is an article." They're just empty boxes without identity.
🔀 Semantic & Non-Semantic Combination Example
<header>
<div class="logo">🌟 Website Logo</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Learning HTML is fun!</h1>
<p><span class="highlight">HTML</span> is the foundation of modern web.</p>
</article>
</main>
<footer>
<p>© 2025 - Syifa SICODER.</p>
</footer>
➡️ This is an example combo: semantic HTML for big structure, non-semantic for small styling.
🧩 Ideal HTML5 Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Syifa's Website</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>
<section>...</section>
<article>...</article>
</main>
<footer>...</footer>
</body>
</html>
🧠 Complete structure: clear, easy to read, and ready for responsive + SEO!
