HTML — Lesson 7
HTML Best Practices
Writing clean, maintainable, and accessible HTML.
HTML Best Practices
Writing clean HTML is about more than just making it work. These practices will help you write code that's maintainable, accessible, and performant.
1. Use Proper Doctype
Always start with <!DOCTYPE html> to trigger standards mode in browsers.
2. Specify Character Encoding
Add <meta charset="UTF-8"> in the <head> to support all characters properly.
3. Use Lowercase Tags and Attributes
HTML is case-insensitive, but lowercase is the convention and improves readability.
<!-- Avoid -->
<DIV CLASS="box">
<!-- Better -->
<div class="box">
4. Always Close Tags
Close all tags properly, even optional ones like <li>, <p>, and <td>.
5. Use Meaningful Attribute Values
Class and ID names should describe purpose, not appearance.
<!-- Avoid -->
<div class="red-bold-text">
<!-- Better -->
<div class="error-message">
6. Optimize Images
- Use appropriate formats (JPEG for photos, PNG for graphics, SVG for icons)
- Always include
alttext - Specify dimensions to avoid layout shifts
7. Accessibility First
- Use semantic elements
- Label all form inputs
- Ensure sufficient color contrast
- Use ARIA attributes when needed
8. Validate Your HTML
Use the W3C Validator to check your HTML for errors and compliance with web standards.
Remember: HTML is the foundation of the web. Solid HTML leads to better accessibility, SEO, and maintainability.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →