Loading

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.