Html
HTML
Syntax & Basics
Basic Structure
<!-- 🏠 HTML skeleton structure -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 📝 Main content goes here -->
</body>
</html>Semantic Elements
<!-- 🏛️ Meaningful structure -->
<header>Site header</header>
<nav>Main navigation</nav>
<main>
<article>Independent content</article>
<section>Thematic grouping</section>
<aside>Related content</aside>
</main>
<footer>Site footer</footer>Element Tags
Text & Structure
Paragraphs & Headings
<!-- 📄 Text elements --> <p>Paragraph text</p> <h1>Main Heading</h1> <!-- h1-h6 --> <span>Inline text container</span>
Links & Media
<!-- 🔗 Links & media elements --> <a href="https://example.com">Anchor link</a> <img src="image.jpg" alt="Description"> <video controls><source src="video.mp4"></video>
Containers
<!-- 📦 Container elements --> <div>Block container</div> <section>Document section</section> <article>Independent content</article> <nav>Navigation links</nav>
Lists
<!-- 📋 List structures -->
<ul> <!-- Unordered list -->
<li>Item</li> <!-- List item -->
</ul>
<ol> <!-- Ordered list -->
<li>First</li>
<li>Second</li>
</ol>Forms
<!-- 📝 User input elements -->
<input type="text" placeholder="Enter text">
<input type="checkbox" id="check">
<textarea rows="4"></textarea>
<!-- 🔘 Selection elements -->
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<button type="submit">Submit</button>
<label for="check">Checkbox Label</label>Tables
<!-- 🗂️ Table structure -->
<table>
<thead> <!-- Table header -->
<tr> <!-- Table row -->
<th>Header</th> <!-- Header cell -->
</tr>
</thead>
<tbody> <!-- Table body -->
<tr>
<td>Data</td> <!-- Table data -->
</tr>
</tbody>
</table>Semantic Elements
<!-- 🏷️ Semantic markup --> <header>Site header</header> <main>Primary content</main> <aside>Side content</aside> <footer>Site footer</footer> <time datetime="2024-03-15">March 15</time>
Common Operations
Forms
<!-- 📨 Form submission example -->
<form action="/submit" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="pass">Password:</label>
<input type="password" id="pass" name="password" minlength="8">
<button type="submit">Login</button>
</form>Tables
<!-- 📊 Data table example -->
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>28</td>
</tr>
</tbody>
</table>Accessibility Essentials
ARIA Landmarks
<!-- ♿ Accessibility markup -->
<div role="navigation" aria-label="Main menu">
<!-- Nav links -->
</div>
<main role="main">
<!-- Primary content -->
</main>Alt Texts
<!-- ❌🖼️ Empty alt text --> <img src="logo.jpg" alt=""> <!-- ✅📝 Descriptive alt text --> <img src="logo.jpg" alt="Company logo - red square with ABC text">
SEO Fundamentals
Meta Tags
<!-- 🔍 Search engine optimization --> <meta name="description" content="Page description for SERPs"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta property="og:title" content="Social Media Title">
Structured Data
<!-- 🧱 Structured markup -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Company Name",
"url": "https://example.com"
}
</script>Common Mistakes
Unclosed Tags/Mismatched Nesting
Issue: Browser rendering inconsistencies
Fix: Always close tags and maintain hierarchy
Fix: Always close tags and maintain hierarchy
<!-- ❌🚫 Wrong: Tag mismatch chaos --> <div><p>Text</div></p> <!-- ✅✨ Correct: Proper hierarchy --> <div><p>Text</p></div>
Missing DOCTYPE
<!-- ❌👻 Triggers quirks mode --> <html> ... </html> <!-- ✅📜 HTML5 document declaration --> <!DOCTYPE html>
Why Solo Dev?
This reference website is not for beginners
Solo Dev is strictly for devs who already know the game and need a beautiful cheat sheet on their second monitor which looks better than GeeksforGeeks
this portion goes away when you shrink the screen ;)