Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clean HTML Code Organization</title>
</head>
<body>
<div class="container">
<h1>📁 Clean Code Organization</h1>
<!-- Example 1: Indentation -->
<div class="code-examples">
<div class="example-box bad">
<h3>❌ Poor Indentation</h3>
<pre><header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Title</h1>
<p>Content</p>
</article>
</main></pre>
<p style="color: #991b1b; margin-top: 10px; font-size: 0.9rem;">
Hard to read hierarchy
</p>
</div>
<div class="example-box good">
<h3>✅ Proper Indentation</h3>
<pre><header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Title</h1>
<p>Content</p>
</article>
</main></pre>
<p style="color: #065f46; margin-top: 10px; font-size: 0.9rem;">
Clear structure, easy to read
</p>
</div>
</div>
<!-- Example 2: Comments -->
<div class="code-examples">
<div class="example-box bad">
<h3>❌ No Comments</h3>
<pre><section>
<div class="widget-1">...</div>
<div class="widget-2">...</div>
<div class="widget-3">...</div>
</section>
<section>
<div class="module-a">...</div>
<div class="module-b">...</div>
</section></pre>
<p style="color: #991b1b; margin-top: 10px; font-size: 0.9rem;">
What are these sections for?
</p>
</div>
<div class="example-box good">
<h3>✅ Helpful Comments</h3>
<pre><span class="comment"><!-- Dashboard Widgets --></span>
<section>
<div class="widget-1">...</div>
<div class="widget-2">...</div>
<div class="widget-3">...</div>
</section>
<span class="comment"><!-- User Profile Modules --></span>
<section>
<div class="module-a">...</div>
<div class="module-b">...</div>
</section></pre>
<p style="color: #065f46; margin-top: 10px; font-size: 0.9rem;">
Clear purpose, easier to navigate
</p>
</div>
</div>
<!-- Example 3: Line Length -->
<div class="code-examples">
<div class="example-box bad">
<h3>❌ Long Lines</h3>
<pre><button onclick="handleSubmit(event)" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#submitModal" aria-label="Submit form">Submit</button></pre>
<p style="color: #991b1b; margin-top: 10px; font-size: 0.9rem;">
Hard to read, scrolling needed
</p>
</div>
<div class="example-box good">
<h3>✅ Wrapped Attributes</h3>
<pre><button
onclick="handleSubmit(event)"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#submitModal"
aria-label="Submit form">
Submit
</button></pre>
<p style="color: #065f46; margin-top: 10px; font-size: 0.9rem;">
Each attribute visible, easy to edit
</p>
</div>
</div>
<div style="background: #eff6ff; padding: 25px; border-radius: 12px; border-left: 4px solid #3b82f6; margin-top: 30px;">
<h3 style="color: #1e40af; margin-bottom: 15px;">📋 Organization Checklist</h3>
<ul style="list-style: none; line-height: 2; color: #475569;">
<li>✓ Consistent 2-space or 4-space indentation</li>
<li>✓ One declaration per line for multiple attributes</li>
<li>✓ Comments for major sections</li>
<li>✓ Blank lines between major blocks</li>
<li>✓ Lowercase tag and attribute names</li>
<li>✓ Quotes around all attribute values</li>
<li>✓ Logical ordering (header → main → footer)</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
Use 2 or 4 spaces (never tabs and spaces mixed). Each nested level adds one indent.
<div>
<p>Text</p>
</div>When element has 3+ attributes, put each on its own line
<input
type="text"
id="name"
required>Comment major sections, but don't over-comment obvious things
<!-- Navigation -->
<nav>...</nav>Add blank line between major sections for visual separation
</header>
<main>
</main>Tag names and attributes should be lowercase for consistency
<div class="container"> not <DIV CLASS="container">Always use quotes (double quotes preferred) around attribute values
type="text" not type=text