Can I create a shared html file to hold my navigation?

Question

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 &copy; 2020 Alex Gutowski <br>
                    <a href="mailto:alexgutowski@gmail.com">alexgutowski@gmail.com</a> <br>
                    All Rights Reserved
                </footer>
            </div>
        </div>
    </body>
</html>

You can always create a PHP main webpage, and send the nav data into each html file depending on the URL. Thats a longshot though, and there is probably an easier method with javascript. — Mister SirCode, May 01 '20 at 23:29

Jitin · Answer 1 · 2020-05-01T23:50:35.510

If you consider adding server side scripting to your HTML, It could get easier.

Django and Flask got ways to dynamically link pages in your website no matter how you rename them later on.
in PHP I believe you could create an include file containing variable mappings to the links of your. You could then import this include file so all you would have to do is change the link in the include file and all your dependant pages would use the updated values.

links.php --
<?php 
page1 = "https://link";
page2 = "https://link2";
?> 

anyotherpage --
<?php require 'links.php';
?><!DOCTYPE html>
<html>
<head></head>
<body>
        Click here : <?php echo page1; ?>
</body>
</html>```

score 0 · Answer 2 · answered May 01 '20 at 23:33

0

Welcome to the community. Going forward, try and share some code so others can use it to learn :).

It is absolutely possible to reduce your duplication issue. The easy language for this is PHP. Just create the tags in a PHP file and then use an include to display it wherever it is needed. That way you only ever update one file.

More reading here W3Schools - PHP includes

Hope this helps!

<html>
<body>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>

answered May 01 '20 at 23:33

E Wilson

125
2
10

I added some code to my question. Can you tell me why this PHP is not working? – Alex Gutowski May 02 '20 at 00:14
I was writing the PHP for you but you've marked a ridiculous answer as the best one. – E Wilson May 02 '20 at 14:00
It will save you so much more time in the future as you develop your site if you stick with PHP, can't stress that enough. Using a seemingly straightforward solution now for this task can add much more time to your projects down the line. PHP will allow you to create templates and mix and match bits of code saving you an enormous amount of time. – E Wilson May 02 '20 at 18:01

score 0 · Accepted Answer · answered May 02 '20 at 00:05

0

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

answered May 02 '20 at 00:05

Jonas

305
2
16

Can I create a shared html file to hold my navigation?

3 Answers3