Following the rules of the code style can improve the quality of your code and facilitate teamwork. In this topic, we are going to take a look at a pretty long list of rules, all of them equally important. So let's dive right in!
Note that these rules are not actually 'the rules'. They are recommendations from Google. There exist other code style guides.
General rules
Use
UTF-8. Specify it with<meta charset="utf-8">in<head></head>. CSS files useUTF-8by default, so don't bother specifying it for your style sheets.
Here's an example of the correct way:
<head>
<meta charset="utf-8">
<title>Code style</title>
</head>And an example of incorrect usage:
<head>
<meta charset="windows-1251">
<title>Code style</title>
</head>Provide explanations for your code if necessary. For example, if your web page contains a lot of sections, your colleagues will thank you for adding comments so they don't have to scroll up and down to find a certain section.
Correct way:
<!-- About section -->
<div id="about">
...
</div>
<!-- End of about -->
<!-- Catalog section -->
<div id="catalog">
...
</div>
<!-- End of catalog -->
<!-- Portfolio section -->
<div id="portfolio">
...
</div>
<!-- End of portfolio -->
<!-- Contacts section -->
<div id="contacts">
...
</div>
<!-- End of contacts -->Incorrect way:
<div id="about">
...
</div>
<div id="catalog">
...
</div>
<div id="portfolio">
...
</div>
<div id="contacts">
...
</div>Don't forget to use
alt=". . ."attribute. It might contain short but meaningful text for images and some information for videos.
Correct way:
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">Incorrect way:
<img src="spreadsheet.png">Formatting rules
Don't use tabulation and don't mix it with spaces. Two spaces are always enough.
Сorrect way:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>Incorrect way:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>For every block element start a new line and don't forget about indents for every child element.
Сorrect way:
<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>$5.00</td>
<td>$4.50</td>
</tr>
</tbody>
</table>Incorrect way:
<table>
<thead><tr><th scope="col">Income</th><th scope="col">Taxes</th></tr></thead>
<tbody>
<tr>
<td>$5.00</td>
<td>$4.50</td>
</tr>
</tbody>
</table>Always use lower case. Always. There's no reasonable explanation for using uppercase or all caps.
Сorrect way:
<img src="assets/images/01.jpg" alt="Image">Incorrect way:
<IMG SRC="assets/images/01.jpg" ALT="Image">Avoid spaces at the end of the lines. It's a very simple rule.
Сorrect way:
<p>Text.</p>Incorrect way:
<p>Text </p>Use double quotes instead of single quotes in attribute values.
Сorrect way:
<div class="example">
...
</div>Incorrect way:
<div class='example'>
...
</div>Validity
Check your code several times to avoid mistakes such as opening/closing tags mismatch, extra characters, etc. Every browser fixes these mistakes before showing a page to a user, but different browsers have different solutions. This might increase page loading time, make the page look different on different devices, or hide some content from the user. That's why validity is so important.
You can use validators for this.
Сorrect way:
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML</title>
<article>HTML rules the world.</article>Incorrect way:
<title>HTML</title>
<article>HTML rules the world.Summary
Code style is important in any programming language. Yes, there are rules of syntax, but it's not enough to make the code easily understandable for whoever is reading it. That's why you should consider all the tips above even though they are optional.
The list is long but quite easy to remember. Just don't forget to specify the encoding, leave comments, add alt="" attribute, and use only lower case in tags. And don't mess around with spaces and indents. Simple, right?