I have an HTML website with many subpages, and when I want to update the navigation, I have to copy and paste the <nav> tag 50+ times to different documents. Is there a way I can create ONE html file that holds my nav, and whenever I update that document, it will update the nav on all my pages?
EDIT:
I tried some PHP and couldn't get it to work. What's wrong??
nav.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php echo "<img id="logo" src="logo.png" alt="logo" height="100" width="100">
<a href="index.html"><button class="navbutton">Home</button></a>
<a href="about.html"><button class="navbutton">About Me</button></a>
<button onclick="sixthGrade()" class="navbutton">6th Grade</button>
<div class="dropdown">
<button class="dropbtn">7th Grade</button>
<div class="dropdown-content">
<a href="english7.html">ELA</a>
<a href="geography.html">World Geography</a>
<a href="science7.html">Science</a>
<a href="multimedia.html">Multimedia</a>
<a href="woods.html">Woodshop</a>
<a href="algebra1.html">Algebra 1</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">8th Grade</button>
<div class="dropdown-content">
<a href="multimedia2.html">Multimedia</a>
<a href="woods2.html">Woodshop</a>
<a href="amerhistory.html">American History</a>
<a href="geometry.html">Geometry</a>
<a href="english8.html">ELA</a>
<a href="science8.html">Science</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">9th Grade</button>
<div class="dropdown-content">
<a href="algebra2.html">Honors Algebra 2</a>
<a href="english9.html">English 9</a>
<a href="vidprod.html">Video Production</a>
<a href="webdesign.html">Web Design</a>
<a href="biology.html">Biology</a>
<a href="worldhistory.html">World History</a>
<a href="pltwied.html">PLTW IED</a>
<a href="photography.html">Photography</a>
<a href="pe.html">PE</a>
<a href="hchem.html">Honors Chemistry</a>
<a href="covid.html">COVID-19 Blog</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Social</button>
<div class="dropdown-content">
<a onclick="instagram()"><img class="social" src="instagram.png" alt="Instagram logo"></a>
<a onclick="twitter()"><img class="social" src="twitter.png" alt="Twitter logo"></a>
<a onclick="youtube()"><img class="social" src="youtube.png" alt="YouTube logo"></a>
<a onclick="vimeo()"><img class="social" src="vimeo.png" alt="Vimeo logo"></a>
</div>
</div>";>
</body>
</html>
index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="alex.css">
<title>Alex's Website || Home</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta property="og:title" content="Alex's Website" />
<meta property="og:image" content="splash.jpg" />
<script>
if (screen.width <= 800) {
window.location = "http://m.amgutowski.com";
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<nav>
<?php include 'nav.php';?>
</nav>
<h2>Welcome To My Website!</h2>
<br>
<p>Welcome to my website. This took me about 3 days to create originally, and I'm still adding to it.
Feel free to look around, and have fun!</p>
<br>
<footer>
Copyright © 2020 Alex Gutowski <br>
<a href="mailto:alexgutowski@gmail.com">alexgutowski@gmail.com</a> <br>
All Rights Reserved
</footer>
</div>
</div>
</body>
</html>
If you do not want to use a server side solution like PHP I consider you try this: Load HTML File Contents to Div [without the use of iframes]
You could easily create a nav.html and use JavaScript to load it into your pages.
Kind regards, Jonas