HTML Style Guide and Coding Conventions

Posted in /  

HTML Style Guide and Coding Conventions
vinaykhatri

Vinay Khatri
Last updated on March 28, 2024

    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
    <body>
    <p> Welcome to TechGeekbuzz </p>
    </body>
    <BODY>
    <P> Welcome to TechGeekbuzz </P>
    </BoDY>

    Always Close the pair Elements

    If the element is a paired element, then close it using the close tag.

    Good Code Bad Code
    <body>
    <p> Welcome to TechGeekbuzz </p>
    </body>
    <body>
    <p> Welcome to TechGeekbuzz
    </body>

    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
    <body>
    <a href="https://www.techgeekbuzz.com/"> TechGeekbuzz </a>
    </body>
    <body>
    <A HREF="https://www.techgeekbuzz.com/"> TechGeekbuzz </a>
    </body>

    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
    <body>
    <p id ="first"> Welcome to TechGeekbuzz </p>
    </body>
    <body>
    <p id = first> Welcome to TechGeekbuzz </p>
    </body>

    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
    <body>
    <img src="image.jpg" alt="cat image">
    </body>
    <body>
    <img src="image.jpg">
    </body>

    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
    <body>
    <p id ="first" style="color:red"> Welcome to TechGeekbuzz </p>
    </body>
    <body>
    <p id ="first"style="color:red"> Welcome to TechGeekbuzz </p>
    </body>

    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
    <body>
    <ul>
    <li>  CSS </li>
    <li>  Java </li>
    <li>  Python </li>
    </ul>
    </body>

    <body>
    <ul>
    <li>  CSS </li>
    <li>  Java </li>
    <li>  Python </li>
    </ul>
    </body>

    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

    0 Comments