HTML good practices

Since I started the master I noticed some patterns when I am involved with HTML, now I will ilustrate with some tips I took during this semester.

• Use Semantic HTML:
  • Utilize semantic HTML elements to provide meaning to the content. For example, use <header>, <nav>, <section>, <article>, <footer>, etc., to convey the structure of your content to both browsers and developers.
• Responsive Design:
  • Design your HTML to be responsive, ensuring a seamless and consistent user experience across various devices and screen sizes. Employ media queries and flexible layouts to adapt to different viewport sizes.
• Separation of Concerns:
  • Follow the principle of separation of concerns by keeping HTML, CSS, and JavaScript in separate files. This enhances code maintainability and makes it easier to update or modify each layer independently.
• Clean and Indented Code:
  • Write clean and well-indented HTML code for better readability. Consistent indentation helps developers understand the structure and hierarchy of elements.
• Descriptive Comments:
  • Use comments in your HTML to provide context and explanations for sections of code. This is particularly helpful for collaboration and future maintenance.

<!-- Header Section -->

<header>

    <h1>Website Title</h1>

    <!-- Navigation Bar -->

    <nav>

        <!-- Navigation Links -->

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">About</a></li>

            <!-- More Links... -->

        </ul>

    </nav>

</header>

• Accessible Design:
  • Ensure that your HTML is accessible to users with disabilities. Use ARIA (Accessible Rich Internet Applications) attributes, provide alternative text for multimedia elements, and follow other accessibility best practices.
• Valid HTML:
  • Validate your HTML code using tools like the W3C Markup Validation Service. Valid HTML ensures cross-browser compatibility and reduces the likelihood of unexpected rendering issues.
• Consistent Naming Conventions:
  • Adopt consistent and meaningful naming conventions for classes and IDs. This enhances the maintainability of your CSS and JavaScript, as well as making your code more understandable.

<div class="main-content">

    <article class="blog-post">

        <!-- Content Goes Here -->

    </article>

</div>

• Keep External Resources Efficient:
  – Optimize the loading of external resources such as stylesheets and scripts. Minimize the use of unnecessary dependencies and consider lazy loading for non-essential assets.

This are all the best practices I found relevant while I was studying the book “Selenium Design Drive data Development CookBook” where all the tips are done by QA perspective.