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>HTML Naming Conventions</title>
</head>
<body>
<div class="container">
<h1>🏷️ HTML Naming Conventions</h1>
<!-- Class Names -->
<div class="comparison">
<div class="example-box bad">
<h3>❌ Bad Class Names</h3>
<pre><span class="tag-bad"><div class="RedBox"></span>
<span class="tag-bad"><div class="box1"></span>
<span class="tag-bad"><div class="bluebutton"></span>
<span class="tag-bad"><div class="div-container"></span>
<span class="tag-bad"><div class="myButton"></span></pre>
<div class="notes">
<p style="color: #991b1b;">
✗ Mixed case (RedBox)<br>
✗ Non-descriptive (box1)<br>
✗ No separator (bluebutton)<br>
✗ Redundant (div-container)<br>
✗ camelCase (myButton)
</p>
</div>
</div>
<div class="example-box good">
<h3>✅ Good Class Names</h3>
<pre><span class="tag-good"><div class="alert-box"></span>
<span class="tag-good"><div class="product-card"></span>
<span class="tag-good"><div class="primary-button"></span>
<span class="tag-good"><div class="main-container"></span>
<span class="tag-good"><div class="user-profile"></span></pre>
<div class="notes">
<p style="color: #065f46;">
✓ Lowercase with hyphens<br>
✓ Descriptive names<br>
✓ Clear separators<br>
✓ Meaningful purpose<br>
✓ Consistent style
</p>
</div>
</div>
</div>
<!-- ID Names -->
<div class="comparison">
<div class="example-box bad">
<h3>❌ Bad ID Names</h3>
<pre><span class="tag-bad"><div id="1stSection"></span>
<span class="tag-bad"><div id="my header"></span>
<span class="tag-bad"><div id="MainContent"></span>
<span class="tag-bad"><div id="section#1"></span></pre>
<div class="notes">
<p style="color: #991b1b;">
✗ Starts with number<br>
✗ Contains spaces<br>
✗ Mixed case<br>
✗ Special characters
</p>
</div>
</div>
<div class="example-box good">
<h3>✅ Good ID Names</h3>
<pre><span class="tag-good"><div id="first-section"></span>
<span class="tag-good"><div id="site-header"></span>
<span class="tag-good"><div id="main-content"></span>
<span class="tag-good"><div id="section-one"></span></pre>
<div class="notes">
<p style="color: #065f46;">
✓ Starts with letter<br>
✓ No spaces (use hyphens)<br>
✓ All lowercase<br>
✓ No special characters
</p>
</div>
</div>
</div>
<!-- File Names -->
<div class="section-card">
<h2>📁 File Naming Conventions</h2>
<div class="convention-item">
<strong>❌ Bad File Names:</strong>
<code style="color: #ef4444;">
About Us.html, Contact_Form.HTML, Product Page.html, myPage.html
</code>
</div>
<div class="convention-item">
<strong>✅ Good File Names:</strong>
<code style="color: #10b981;">
about-us.html, contact-form.html, product-page.html, my-page.html
</code>
</div>
<div style="margin-top: 20px; padding: 15px; background: #fef3c7; border-radius: 8px;">
<p style="color: #78350f; line-height: 1.6;">
<strong>Rules:</strong><br>
• All lowercase letters<br>
• Use hyphens (-) not underscores or spaces<br>
• Descriptive names (contact-form not cf.html)<br>
• Keep extensions lowercase (.html not .HTML)
</p>
</div>
</div>
<!-- Data Attributes -->
<div class="comparison">
<div class="example-box bad">
<h3>❌ Bad Data Attributes</h3>
<pre><span class="tag-bad"><div data-UserId="123"></span>
<span class="tag-bad"><div data-product_name="Laptop"></span>
<span class="tag-bad"><div datatype="button"></span></pre>
<div class="notes">
<p style="color: #991b1b;">
✗ Mixed case<br>
✗ Underscore separator<br>
✗ Missing 'data-' prefix
</p>
</div>
</div>
<div class="example-box good">
<h3>✅ Good Data Attributes</h3>
<pre><span class="tag-good"><div data-user-id="123"></span>
<span class="tag-good"><div data-product-name="Laptop"></span>
<span class="tag-good"><div data-type="button"></span></pre>
<div class="notes">
<p style="color: #065f46;">
✓ Lowercase with hyphens<br>
✓ Consistent separator<br>
✓ Proper 'data-' prefix
</p>
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
Lowercase with hyphens - most common in HTML/CSS
class="user-profile" id="main-header" data-product-id="123"Structured naming for components and their variations
class="card" class="card__title" class="card--featured"Lowercase with underscores - common in Python, but avoid in HTML/CSS
class="user_profile" ← Avoid this in HTMLFirst word lowercase, rest capitalized - good for JavaScript, not HTML
class="userProfile" ← Avoid this in HTMLStandalone component (e.g., card, button, menu)
<div class="card">Part of a block (e.g., card title, card body)
<h2 class="card__title">Variation of block or element (e.g., card--featured, button--large)
<div class="card card--featured"><article class="card card--featured">
<h2 class="card__title">Title</h2>
<p class="card__description">Text</p>
<button class="card__button card__button--primary">
Read More
</button>
</article>user-profile, nav-menu, product-cardmain-header, footer-section, contact-formabout-us.html, contact-form.html, product-page.htmldata-user-id, data-product-namecard, card__title, card--featured