Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Like words in a sentence, tags are the building blocks of HTML.
<p>, <h1>, <div>Attributes describe tags, like adjectives describe nouns.
class="blue" id="main"The content between tags is what users see.
Hello World!Have both opening and closing tags. Content goes between them.
<p>Text</p><h1>Title</h1><div>Box</div>Don't need closing tags because they don't contain content.
<img src="pic.jpg"><br><input type="text">See how different tag types work together
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag Types</title>
</head>
<body>
<h1>🏷️ HTML Tag Types</h1>
<h2>Paired Tags Example</h2>
<p>This paragraph uses <strong>paired tags</strong>. It has an opening <p> and closing </p> tag. Content goes between them!</p>
<h2>Self-Closing Image Tag</h2>
<div class="media-container">
<img src="https://images.pexels.com/photos/1666021/pexels-photo-1666021.jpeg" alt="Self-closing tag demonstration - Beautiful landscape photo">
<div class="tag-label"><img src="..." alt="..."> ← No closing tag!</div>
</div>
<h2>Self-Closing Video Tag</h2>
<div class="media-container">
<video controls width="100%">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" type="video/mp4">
Your browser doesn't support HTML5 video. Please upgrade to a modern browser.
</video>
<div class="tag-label"><video> with paired tags for controls</div>
</div>
<h2>Form Input - Self-Closing</h2>
<input type="text" placeholder="Type here... This is a self-closing <input> tag!">
<div class="tip">
<strong>💡 Remember:</strong><br>
Paired tags need closing. Self-closing tags don't!
</div>
</body>
</html>Loading preview...
<p>Hello World
<div>ContentAlways close your paired tags!
<p>Hello World</p>
<div>Content</div>Every opening tag needs closing.
<a href=page.html>Link</a>Attribute values need quotes!
<a href="page.html">Link</a>Always use quotes around values.
<strong><em>Bad</strong></em>Tags overlap incorrectly!
<strong><em>Good</em></strong>Close inner tags before outer.
Practice writing clean, error-free HTML!