Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html> - Tells the browser what type of document this is
<head> - Contains info about the page (like a building's blueprints)
<body> - Contains all visible content (the actual rooms and furniture)
The smallest valid HTML document you can create
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first properly structured HTML page.</p>
</body>
</html>Loading preview...
<!DOCTYPE html>Declares this is an HTML5 document. Always the first line!
<html lang="en">Root element that wraps everything. lang tells browsers and screen readers what language your content is in.
<head>Contains metadata—info ABOUT the page, not visible content. Like the settings menu.
<body>Contains ALL visible content—everything users actually see on the page.
<meta charset="UTF-8">Tells the browser how to read characters. UTF-8 supports all languages and emojis 🌍
<meta name="viewport" content="width=device-width, initial-scale=1.0">Makes your site work on mobile devices. Without this, your site looks tiny on phones!
<title>My Page</title>Shows in browser tabs and search results. Keep it short and descriptive!
<meta name="description" content="...">Appears in search results. Write a compelling summary (150-160 characters).
A well-structured head section with all essential elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn HTML Structure - Complete Guide</title>
<meta name="description" content="Master HTML document structure with easy-to-follow examples and interactive tutorials.">
<meta name="author" content="Your Name">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📚</text></svg>">
</head>
<body>
<main>
<h1>✨ Perfect Document Structure</h1>
<p>This page has a complete and proper head section!</p>
<ul>
<li>✅ Character encoding for universal text support</li>
<li>✅ Viewport meta for mobile responsiveness</li>
<li>✅ Descriptive title for SEO</li>
<li>✅ Meta description for search results</li>
<li>✅ Favicon icon in the tab</li>
</ul>
</main>
</body>
</html>Loading preview...
<header>, <main>, <footer> instead of generic <div>
One <h1> per page, then <h2>, <h3> in order
Use <article> for standalone content, <section> for groups
Indent properly, use comments for sections
Modern HTML5 semantic structure for better accessibility and SEO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<article>
<h1>Understanding HTML Structure</h1>
<p>This article shows proper semantic HTML5 structure.</p>
<section>
<h2>What is Semantic HTML?</h2>
<p>Semantic HTML uses tags that describe their content.</p>
</section>
<section>
<h2>Why It Matters</h2>
<ul>
<li>Better accessibility for screen readers</li>
<li>Improved SEO rankings</li>
<li>Easier to maintain code</li>
</ul>
</section>
</article>
</main>
<footer>
<p>© 2024 Your Website. All rights reserved.</p>
</footer>
</body>
</html>Loading preview...
<div data-user-id="123">Store custom data directly in HTML elements for JavaScript access.
<dialog></dialog>Create accessible modals without JavaScript libraries.
<picture><source>Serve different images for different screen sizes and formats.
<template></template>Define reusable HTML chunks that won't render until activated.
<html>
<head>...
Always start with <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>...DOCTYPE tells browsers to use standards mode.
<html>
Screen readers need to know the language.
<html lang="en">Improves accessibility and SEO.
<head>
<title>...
Site won't work properly on mobile devices.
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">Essential for responsive design.
Practice creating properly structured HTML documents with all the essential elements!