HTML Style Guide
Every developer loves to write neat and clean code, so that everyone can read and understand it easily.
Here are some tips for writing good HTML code.
Declare Document Type
Whenever you create new HTML document always declare the Document type in your first line. It tells the browser version of HTML the page is written in.
Here is the correct way to declare Document type:
Always Use Lowercase Element Names
We can also use uppercase element names. However most of the developers prefer to use lowercase element names, as it is easy to read and write.
<BODY> <p> your text here </p> </BODY>
<body> <p> your text here </p> </body>
Close All HTML Elements
If we don’t close some html elements like
<p> element, our code will still run as usual. However, we should always close all html elements, which makes our code easily to read and understand.
Use Lowercase Attribute Names
Just like element names, we can also write html attributes in uppercase. However, by using uppercase attribute names our code looks unprofessional. That makes it difficult for other developers to read our code.
Always define alt, width and height for images
Whenever we use images in HTML, it’s mandatory for us to specify the alt attribute for an image. If the image did not displayed for some reason the text written in the alt attribute will be displayed.
height of images reduces flickering, because the browser can reserve space for the image before loading.
Here is the correct and wrong way to add an image in html:
<img src= "demo.jpg">
<img src="demo.jpg" alt="text" style="width:240px; height:220px;">
Spaces After Attributes
It’s totally upto us to put spaces after attributes or not. But less spaces is equal good and rediable code.
Here is the correct and wrong way to put space after attributes:
<img src = "demo.jpg">
Always Add <title> Element
<title> element is mandatory to add in HTML. The
<title> is very important for SEO. The
<title> is used by search engine algorithms to decide whether the content is related to user’s search or not. Try to add the title short and meaningful.
Always Add the lang Attribute
We should always add the lang attribute to declare the web page language. The lang attribute is placed inside the
Here is how you can add lang attribute in the web page:
<!DOCTYPE html> <html lang="en-us"> <head> <title>Title</title> </head>
- Avoid long lines of Code.
- Always add attribute values inside the quotation marks (” “).
- Always add the
- Always add
<head>element: Our code will run with or without the
<head>element. But still we should always add the
<head>element to make our web page attractive.
- Setting the Viewport: Viewport is the user’s visible area of a page. It is small on mobile phone and large on desktop. You can check out HTML Responsive Tutorial for more info.
- Add CSS to your code to make it more stylish. (How to Add CSS to HTML)
So this these are some tips of HTML Style Guide. I hope you guys find it helpful, share this post with other developers.