html - Importing a common structure of a webpage -

when creating webpage, include nav on pages:

<nav id="nav">     <ul>         <li><a href="about.html" class="active">about us</a></li>         <li><a href="services.html">services</a></li>         <li><a href="contact.html">contact</a></li>     </ul> </nav> 

we'll mark active page using active class:

<li><a href="contact.html" class="active">contact</a></li> 

copying-and-pasting whole navigation subpages not idea - if decide add 1 new page, have change nav on subpages.

can put navigation separate file , import it?

<!-- pseudocode --> <import file="nav.html" active="about us" /> 

or maybe there html-compliant preprocessor (i want reuse existing code, not rewrite scratch)

you have few options on how this, , always, each 1 has it's pros , cons ...

1 - use single html file. might sound crazy @ first, depending on how data site have, might , easy solution. don't scale , might end huge file.

2 - use <frame> or <iframe> tag. oldest way , it's easy implement, has problems sef, bookmarks , print.

3 - use ajax (xmlhttprequest) load external html javascript. relatively easy implement, has problems navigation ('back' button) , rely on javascript.

5 - use server side template engine. can require effort depending on server structure, it's not hard thing do. cons here might have work adjust files template engine.

you use sockets fetch data feels using screwdriver hammer nail.