Use meaningful or generic names for ID and Class to show the purpose of the element.
<div id="#codeSyntax"></div>
Use Capitalized word for two or more words naming for ID and Class elements.
<div class="lowercase"></div>
<div class="twoWordsNaming"></div>
Use lowercase only: HTML element names, attributes, attribute values, CSS selectors (exception of multi-words name for ID and Class), properties, and property values.
<img src="img/imageLocation" alt="description of the image">
.navButton {
color: white;
}
Use a new line for every block, section, div, list, and indent every child elements that follows. Every open tag should have a closing tag.
<div>
<div>
<p>New line for every block, section, div, and list, but exception for paragraph</p>
</div>
</div>
Indent by one tab at a time. Do not use spaces for indention in code or sample code.
*Tips* use 2 to get space for displaying sample codes indention.
indented
Have necessary comments when needed to explain the purpose of the code. Add opening and closing comment for every sectionand block.
<!-- Short comment for a section -->
<...>
<!-- Short comment for a section end here -->
<!--
This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment.
This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment.
-->
.inTextLink
<a href="#" class="in_text">in-text Link</a>
I am an in-text Link.
.navButton
<a href="#" class="navButton">Navigation Button</a>
.submitButton / .resetButton
<button type="submit" name="submit" class="submitButton">Submit Button</button>
<button type="reset" name="reset" class="resetButton">Reset Button</button>
form[method=login]
input[type=text]
input[type=password]
<form method="login" action="#login">
<label for="formUsername">Username:</label>
<input type="text" id="formUsername" placeholder="Username">
<label for="formPassword">Password:</label>
<input type="password" id="formPassword" placeholder="Password">
</form>
h1
h2
h3
<h1>Heading level 1</h1>
p
<p>This is an example of a paragraph.</p>
This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph.
ul.bullettedList
<ul class="bullettedList">
<li>bulletted list</li>
<li>bulletted list</li>
<li>bulletted list</li>
</ul>
ol.numberedList
<ol class="numberedList">
<li>numbered list</li>
<li>numbered list</li>
<li>numbered list</li>
</ol>
.box, navButton, navBoxItem
<nav class="navBox">
<a href="#link" class="navButton navBoxItem">Home</a>
<a href="#link" class="navButton navBoxItem">Creatures</a>
<a href="#link" class="navButton navBoxItem">Products</a>
<a href="#link" class="navButton navBoxItem">Track</a>
<a href="#link" class="navButton navBoxItem">About Us</a>
</nav>
.productBox
.productItem
.productName
.productDetail
.productButtonsBox
.productButton
<div class="productBox">
<div class="productBox">
<h2 class="productName">Product Name</h2>
<figure>
<img src="img/image location" alt="image description">
</figure>
<p class="productDetail>Sed a mauris sit amet dui malesuada tempor a vitae diam...<a href="">Read More</a></p>
<div class="productButtonsBox">
<a class="productButton>CART</a>
<a class="productButton>SIMILAR</a>
<a class="productButton>BUY</a>
</div>
</div>
</div>
Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more
Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more
Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more
.colGrid
.colItem
.colItemName
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
colorSwatchItem, cw1
<ul>
<li class="color-swatch-item cw1"> #99CCCC </li>
<li class="color-swatch-item cw2"> #C0DFD9 </li>
<li class="color-swatch-item cw3"> #C5D5CD </li>
<li class="color-swatch-item cw4"> #9FA8A3 </li>
<li class="color-swatch-item cw5"> #484848 </li>
<li class="color-swatch-item cw6"> #333333 </li>
</ul>