Is there anyway to only define items in this class once? (html)

Question

Here is my code for adding a navigation bar. How can I simplify this? I want to be able to define it once and then reference that defined definition. Is that something that can be done?

<div class="navbar"> 
    <a href="./index.html">Home</a>
    <a href="./pastProjects.html">Past Projects</a>
    <a href="./requestQuote.html">Get A Quote</a>
    <a href="./contactInfo.html" class="right">Contact Me</a>
    <a href="./reviews.html">My Reviews</a>
</div>

I have to put this in each HTML file for a page on my site. Is there any way to make this simpler and only define it once?

Does this answer your question? [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — caramba, Feb 09 '21 at 17:42
Not without using something like webpack/parcel as a build system — Sxribe, Feb 09 '21 at 17:43
I am not experienced with JS and only know little about HTML — Jake Lowe, Feb 09 '21 at 17:45
Use web components https://developer.mozilla.org/en-US/docs/Web/Web_Components — Sandeep Ranjan, Feb 09 '21 at 17:46
Yes, there is away. it's called programming. Welcome to the road beyond HTML — Cedric Ipkiss, Feb 09 '21 at 17:47

maurogandulfo · Accepted Answer · 2021-02-10T10:25:14.880

Well, the answer to your question is variable and depends on if you are using only html or if you are using others complements.

In case that you are using only HTML (no Javascript and no server side language) you can't simplify your code, you need to put it in all your HTML files.

In case that you are using Javascript or any server side language there is alternatives for not having to insert that block of html in all your files, so if this is the case tell me and i will be happy to help you.

PD: Is recommended to use the <nav> tag for section that provides navigation links, so your code would look like:

<nav class="navbar"> 
   <a href="./index.html">Home</a>
   <a href="./pastProjects.html">Past Projects</a>
   <a href="./requestQuote.html">Get A Quote</a>
   <a href="./contactInfo.html" class="right">Contact Me</a>
   <a href="./reviews.html">My Reviews</a>
</nav>

Is there anyway to only define items in this class once? (html)

1 Answers1