HTML Course 19.2 Layout of a modern and accessible landing page

In this module we explore the key building blocks and best practices for structuring a modern, responsive and accessible landing page. We focus on:

• Semantic HTML5 elements (header, nav, main, section, footer)
• Accessible landmarks and ARIA attributes
• Skip links for keyboard users
• Logical document order and headings hierarchy
• Grid or flex layouts via utility classes

1. Top-Level Structure and Skip Link

Begin by providing a skip link and semantic wrapper elements. This ensures screen reader and keyboard users can jump straight to the main content.

Skip to main content


  

    MyBrand
    
  

  

Notes:

• role='banner' labels the header landmark.
• The skip link is visually hidden by default and shown on focus via CSS.
• Use aria-label on the logo link if no text is present.

2. Hero Section with Call to Action

The hero introduces the product or service with a clear heading, supporting text and a prominent call-to-action button.

  

    

      
Supercharge Your Workflow
      
Our platform automates your tasks so you can focus on what matters most.
      Get Started
    
  

  

Accessibility tips:

• Associate the section with its heading via aria-labelledby.
• Use role='button' on non-<button> elements if they trigger actions.
• Ensure buttons and links have discernible text.

3. Features Grid

Present core features in a grid layout. Each feature item should be an article with a heading and description.

  

    
Key Features

    

      
      
Lightning Fast
      
Experience near-instant load times and data processing.
    

    

      
      
Top-notch Security
      
Protect your data with enterprise-grade encryption.
    

    

      
      
24/7 Support
      
Our experts are here to help you around the clock.
    
  

  

Details:

• Use a visually hidden <h2> if the title is decorative.
• Empty alt='' and aria-hidden='true' for decorative icons.
• Grid classes (e.g. grid-3) are implemented in CSS or a utility framework.

4. Testimonials Carousel

Testimonials build trust. Use a list of blockquotes or slides, each wrapped in an accessible container.

  

    
What Our Customers Say
    

      

        

          
'This service doubled our productivity within a week.'
          
        
      
      

        

          
'The support team is outstanding and always responsive.'
          
        
      
    
  

  

Accessibility considerations:

• Use role='region' with aria-live for dynamic updates.
• Ensure keyboard controls to navigate slides.

5. Signup Form Section

Include a simple signup or contact form with labels, fieldsets and error messaging.

  

    
Start Your Free Trial
    

      

        
Sign up details
        

          Email address
          
          
        
        

          Create password
          
          
        
      
      Sign Up
    
  

  

Key points:

• Use <label> correctly bound to inputs for screen readers.
• Provide live error messages with aria-live='assertive'.
• Group related fields in a <fieldset> and <legend>.

6. Footer with Legal and Secondary Navigation

The footer contains legal links, social media and contact details, marked with role='contentinfo'.

Footer best practices:

• Use <address> for contact information.
• Mark secondary navigation lists clearly.
• Maintain logical reading order for screen readers.

Summary of Best Practices

A modern, accessible landing page relies on:

• Semantic HTML5 landmarks for predictable navigation
• Proper heading hierarchy (h2–h3 etc.)
• Clear, descriptive link texts and button labels
• Accessible forms with labels, fieldsets and error announcements
• Keyboard operability and focus management (skip links, visible focus outline)
• Responsive layout via utility classes or CSS grid/flex

By applying these principles, you’ll provide an inclusive experience for all users while maintaining a crisp, modern design.