Writing Accessible HTML
Essential Accessibility Practices
- Semantic HTML:
<nav>, <main>, <article>, <section>, <aside>, <footer> - Alt Text for Images:
<img src="logo.png" alt="Company Logo"> - ARIA Attributes:
<button aria-label="Close menu">X</button> - Keyboard Navigation:
Ensure all interactive elements are focusable and usable with keyboard
WCAG 2.1 Compliance: Follow Web Content Accessibility Guidelines for Level AA compliance
HTML Style Guide – Writing Clean Code
Best Practices for Clean HTML
- Consistent Indentation:
Use 2 spaces or 4 spaces (but be consistent)
- Lowercase Elements:
<div></div> <!-- Good --> <DIV></DIV> <!-- Avoid -->
- Quote Attributes:
<a href="about.html"> <!-- Good --> <a href=about.html> <!-- Avoid --> - Close All Tags:
<p>Paragraph</p> <!-- Good --> <p>Paragraph <!-- Avoid -->
Validation: Always validate your HTML using W3C Validator
Optimizing HTML for SEO and Speed
Performance and SEO Techniques
SEO Best Practices
- Use proper heading hierarchy (h1-h6)
- Include meta tags (title, description)
- Use semantic HTML structure
- Optimize images with alt text
Performance Optimization
- Minify HTML/CSS/JS
- Defer non-critical JavaScript
- Use lazy loading for images
- Reduce DOM complexity
<!-- Example of optimized head section -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description for SEO">
<title>Optimized Page Title</title>
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>Common Mistakes to Avoid
Frequent HTML Pitfalls
| Mistake | Solution |
|---|---|
| Using <div> for everything | Use semantic HTML5 elements |
| Missing alt attributes on images | Always include descriptive alt text |
| Nested interactive elements | Avoid putting buttons inside buttons |
| Inline styles | Use external CSS stylesheets |
| Deprecated tags like <center> | Use CSS for styling instead |
Critical Error: Avoid using tables for layout - use CSS Grid or Flexbox instead