Clean and neat code makes it easier for other developers to understand and read your code. There are some conventional techniques followed by every HTML developer when they write the HTML code.
Major Convention for writing HTML code
- Use Document Type
- Use lowercase for Elements.
- Always close the pair elements.
- Use lowercase for attributes.
- Use quotation for attribute values
- Always specify the additional information.
- Use a single space between two attributes.
- Try to avoid Long code.
- Use blank lines and indentation
- Always provide the title
- Set the viewport.
- Use comments
- Use External style and script document.
- use lowercase for file names
Use Document Type
Always mention the document type at the top of the HTML document. The document type for HTML5 is.
<!DOCTYPE html>
Use Lowercase for Element
Always write the element name in lowercase. However, HTML is case insensitive, which mean it does not matter for HTML whether the element name is in lowercase or upper case, but it always a good practice to use lowercase.
Example:
| Good Code | Bad Code |
|
|
Always Close the pair Elements
If the element is a paired element, then close it using the close tag.
| Good Code | Bad Code |
|
|
Use lowercase for attribute
HTML is case insensitive, so it allows us to use any case for its attributes and elements. But it always suggested to use lowercase for element and attribute names. Even mixing the case would work fine, but it reflects lousy coding.
Example
| Good Code | Bad Code |
|
|
Use the double quotation for attribute values.
We can specify the attribute values without using any quotation, and it would work fine. But mostly all the developers use the double quote for the attribute values. It separates the attribute and its value and gives a neat look to the code. Example
| Good Code | Bad Code |
|
|
Always provide additional information
However, additional data or attributes are optional but providing them give a strong meaning to the element. For example, by specifying the
alt
attribute to <img> element, we get a piece of textual information about the image when the browser fails to load the image.
Example
| Good Code | Bad Code |
|
|
Use a single space between two attributes
There should always be a single space between two attributes. Spacing between the attribute increases the readability of the HTML element. Example
| Good Code | Bad Code |
|
|
Try to avoid long code
Never write an extended code on a single line divide it into multiple lines.
Example
<img src="https://secureservercdn.net/160.153.137.163/84g.4be.
myftpupload.com/wp-content/uploads/2019/03/Techgeekbuzz.png"
alt ="techgeekbuzz Logo">
Use blank lines and indentation
Always add a blank line when it is required. And use indentation for the nested elements. Indentation increases the code readability and signifies the nested elements.
Example
| Good Code | Bad Code |
|
|
Always Provide the Title
Never skip the title name; it helps the search engine to find the right page for the user query. The appropriate title name helps your web page to rank.
Example
<head>
<title> HTML Tutorial </title>
</head>
Set the Viewport
By setting the correct viewport makes your webpage more responsive and adaptable to every device.
Example
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
The value
width=device-width, initial-scale=1.0
will adjust the page and set the zoom level according to the user browser viewport.
Use HTML comments
In the development phase comments often use to provide additional information about the code itself. Comments give a brief idea about the piece of code, so the other developers could understand what this code is supposed to do.
Example
<body>
<!-- This image size should resized -->
<img src="image.jpg" class="pic">
</body>
Never write long comments; it makes document code lengthy.
Use External style and Script document
It's a good practice to make a separate document for style and javascript. It increases the code reusability and gives an elegant look to the document.
Example
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js">
</head>
Use Lowercase for Filename
At last, the HTML documents and other files need to be saved at some server so everyone could access them. And there the naming of the file becomes essential. There are some servers that are case sensitive, so it's a good practice to use lowercase for every file name.
File Extension
- We can either use .html or htm for HTML document.
- For CSS file use .css extension.
- For JavaScript file, we can use .js extension.
HTML coding Convention Quick Summary
- Conventions are optional, but for good code, we need to use them.
- Browser treats .html and .htm extension as HTML documents.
- HTML is case insensitive, so it's a good practice to write element and attribute name in lowercase.
- Always use indentation for nested elements.
- Create separate files for JavaScript and CSS
People are also reading:
Leave a Comment on this Post