Basic-HTML-Design-Guidelines

Basic HTML Design Guidelines

Start your HTML document with the appropriate DOCTYPE declaration to specify the HTML version you are using.

Example:

<!DOCTYPE html>   for HTML5

Always write your tags and elements in lowercase which makes it look good, easier and clean.

Example:

<html>
  <body>
    <p>.....</p>
  </body>
</html>

In HTML, there are no such rules to close all the tags, but we should close all the tags as it is easier to understand by other developers.

Example:

<p></p>
<h1></h1>
<head></head>

Utilize semantic elements like <header>, <nav>, <main>, <article>, <section>, and <footer> to provide clear structure to your content.
Use headings (<h1> to <h6>) to create a hierarchy of content. Reserve <h1> for the main page heading and use the others for subheadings.

Example:

<h1>Employee-Management</h1>
<h3>Employee List</h3>

Use the alt attribute for images to describe their content for screen readers and when images fail to load.

Example:

<img src="cat.jpg" alt="CAT">

Separate your styling from your HTML using external CSS files. Link to your CSS file using the <link> element within the <head> section.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <link rel="stylesheet" href="/web/styles.css">
</head>

<body>


</body>

</html>

Avoid adding inline styles directly within HTML elements.
Choose meaningful and consistent names for classes, IDs, and other attributes. Avoid using vague or non-descriptive names.

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <link rel="stylesheet" href="/web/styles.css">
</head>

<body>
   <div class="Feedback_Form">
      <form>
      </form>
   </div>


</body>

</html>

Test your HTML code across different browsers to ensure consistent rendering.