Good Practices
Whether you are a beginner or an experienced developer, following HTML best practices helps keep documents readable, maintainable, accessible, and consistent across projects. A well-structured HTML document improves collaboration, scalability, and long-term maintenance.
Document Structure
Section titled “Document Structure”Use a proper HTML structure
Section titled “Use a proper HTML structure”Always include the standard document structure elements: doctype, html, head, and body. While browsers may still render pages without them, missing structure can cause inconsistent behavior across browsers and tools.
Declare the correct doctype
Section titled “Declare the correct doctype”Every HTML document must start with a doctype declaration. This tells the browser which standards to use when rendering the page and ensures consistent behavior.
Define the document language
Section titled “Define the document language”Always specify the language of the document using the lang attribute on the html tag. This improves accessibility, SEO, and helps screen readers and search engines correctly interpret the content.
Check our accessibility section
Section titled “Check our accessibility section”Make websites usable by as many people as possible, regardless of their abilities or disabilities. This includes people with visual, auditory, motor, or cognitive impairments.
Links & Navigation
Section titled “Links & Navigation”Anchor vs Button
Section titled “Anchor vs Button”- Use anchor (
a) elements for navigation, linking to other pages, downloading files, or scrolling to sections. - Use button (
button) elements for actions that trigger interactions such as opening menus, submitting forms, or triggering JavaScript behavior.
Internal vs External links
Section titled “Internal vs External links”- Internal links should generally open in the same tab.
- External links should open in a new tab. When a link opens in a new tab, always include
rel=”noopener noreferrer”attributes to prevent security and performance issues.
Styling & Scripts
Section titled “Styling & Scripts”Avoid inline styles
Section titled “Avoid inline styles”Inline styles make code harder to maintain and scale. Keep styling in external stylesheets and separate presentation from structure.
Keep styles and scripts organized
Section titled “Keep styles and scripts organized”Group styles and scripts by purpose and maintain a consistent order. Avoid mixing CSS and JavaScript imports unnecessarily.
Markup Quality
Section titled “Markup Quality”Write clean and consistent code
Section titled “Write clean and consistent code”- Use double quotes consistently.
- Avoid unnecessary spaces inside attributes or tags.
- Group related attributes together and avoid mixing custom attributes with native ones.
Use lowercase markup
Section titled “Use lowercase markup”Always write HTML tags and attributes in lowercase. This improves readability and consistency across the codebase.
Maintain proper indentation
Section titled “Maintain proper indentation”Indentation is not required for browsers, but it is essential for human readability. Proper indentation makes the document hierarchy easier to understand and maintain.
Element Usage
Section titled “Element Usage”Avoid unnecessary elements
Section titled “Avoid unnecessary elements”- Use
spanelements only when no semantic alternative exists. - Avoid using
brelements for layout or spacing; use CSS instead.
Knowledge Check
Test your understanding of this section
Loading questions...