HTML Course 19.3 Creation of a multi-page site with full navigation

19.3 Creation of a Multi-Page Site with Full Navigation

1. Structure and Planning

Before writing any code, plan the site’s structure. Decide which pages you need, how they relate, and what common navigation they share. Typical pages:

• Home (index.html)
• About (about.html)
• Services (services.html)
• Blog (blog.html)
• Contact (contact.html)

Also consider subfolders for sections or assets (images, scripts).

2. Folder Layout

A clear folder layout helps maintainability:

/site-root/
  index.html
  about.html
  services/
    index.html
    service1.html
    service2.html
  blog/
    index.html
    post1.html
  contact.html
  assets/
    images/
    scripts/
    styles/
  

3. Building the HTML Files

Each page shares the same navigation markup. Use a <nav> containing an unordered list.

Example: index.html

  



  
Welcome to Our Site
  
This is the homepage. Use the navigation above to browse through the site.

  

Example: about.html

  



  
About Us
  
Information about company, mission, and team.

  

Example: services/index.html

  



  
Our Services
  

    
Service One
    
Service Two
  

  

4. Advantages of a Shared Navigation Snippet

• Consistency: All pages use the same menu structure.
• Maintainability: Update navigation in one place (if using server includes or templating).
• Accessibility: Uniform aria-label and roles across pages.

5. Breadcrumb Navigation (Optional)

Breadcrumbs show the user’s location within the site hierarchy:

6. Best Practices

• Use relative URLs for internal links (../ to move up).
• Add title attributes or visually hidden text for extra clarity.
• Keep navigation markup minimal and semantic (<nav>, <ul>, <li>, <a>).
• For larger sites, consider server‐side includes (SSI), templating engines or frameworks to avoid duplication.
• Verify links after moving files or restructuring directories.

7. Handling Active States without CSS

You can mark the current page by adding a class (e.g., class='active') on the <a>. Later, CSS can target .active.

8. Summary

Creating a multi-page site involves:

1. Planning pages and folder layout.
2. Writing consistent navigation in each HTML file.
3. Using relative links properly.
4. Maintaining DRY code via includes or templating where possible.
5. Ensuring accessibility with ARIA roles and clear markup.

With these practices, your multi-page site will be well‐structured, easy to navigate, and simple to maintain.