HTML Learning Notes (from Video) - 4

 The video's link - https://youtu.be/HcOc7P5BMi4?si=eIuDDGoj-5D3r6pV 

  

Chapter 4: Professional HTML 

Best Practices

• Always write clean, indented code → makes debugging and teamwork easier.

• Use comments (<!-- -->) to explain sections of code (like header, footer, nav).

• Keep your HTML structured and readable → separate content, design, and scripts.

• Avoid unnecessary tags → keeps file lightweight.

• Follow semantic HTML for better SEO and meaning.

Accessibility

• Always add alt text for images → useful for screen readers and image loading errors.

• Use <label> with form inputs so users know the purpose of fields.

• Ensure keyboard navigation works (tab-friendly forms, buttons).

• Good accessibility → better SEO + user experience.

• Helps people with disabilities access your site easily.

Iframes Limitations

• Can cause security risks.

• Slower page loading.

• Not always mobile-friendly.

• Best for maps, videos, widgets.

Live Server

• VS Code extension for auto-refresh.

• Saves time, no manual reloading.

• Speeds up development.

Project Organization

• Use separate folders (CSS, JS, images).

• Name files properly (index.html, about.html).

• Link pages with <a href="about.html">.

• Keeps websites professional and easy to manage.

Extra Points 

• Use Semantic Tags (<header>, <footer>, <section>, <article>) → improves SEO and accessibility.

• Cross-browser Compatibility → Test pages on different browsers (Chrome, Firefox, Edge) to avoid layout issues.

• Responsive Design → Use <meta name="viewport"> for mobile-friendly websites.

• External CSS & JS → Always link CSS/JS instead of mixing them into HTML → makes code cleaner.

• File Naming Rules → Use lowercase names, avoid spaces (e.g., about-us.html).

• Validation → Check HTML with W3C Validator to catch errors and improve quality.