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.