```
Anticipating questions or doubts:
- **What’s the point of the permanent elements?**
These parts of HTML set up very important DIVs across the card. There’s an HTML scaffolding I need to establish before I enter the actual content into the code and then close this DIV scaffolding in the footer.
- **Can’t you just paste that code over to all the cards?**
At the moment yes, I **am** doing that, but it’s been insanely exhausting. I’ve around 10 note types, some have as many as 10 card types inside them, and each card type has two sides, so imagine pasting code into all that stuff.
> 10 \* (avg.) 5 \* 2 = **100 code fields!!!**
- **If you’ve already pasted that code into some of the cards and it works, why ask the question? Just continue pasting.**
Because I like to tinker with my code and upgrade it systematically. Without the import functionality I won’t ever be motivated enough to change my cards, even if I discover some faults. If I ever, **ever** want to change something in the layout, it will have to entail changing the same code over and over, a hundred times.
- **Merge note types into a bigger note type to cut down on the number of code fields.**
Tried it to some extent, but I managed to whittle the number of notes down only so much. Creating even more versatile note type would be a huge undertaking and probably result in a more cluttered code than now.
---
**Author:**  [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [August 8, 2020, 12:37pm UTC](https://forums.ankiweb.net/t/any-way-to-repeat-the-same-html-over-many-cards-similarly-as-you-import-css-so-i-can-more-easily-change-it-later/1947/2 "2020-08-08T12:37:32Z")
You may be able to achieve what you want (or something similar) with javascript. If you know a little javascript, try the following example:
> **Template:**
>
> ```html
>
>
>
>
> ```
> **CSS:**
>
> ```css
> .card {
> margin: 0;
> font-family: arial;
> font-size: 20px;
> color: black;
> background-color: white;
> }
> .container {
> margin: 0 auto;
> height: 100vh;
> width: 80vw;
> display: grid;
> grid-template-rows: 1fr 3fr 1fr;
> justify-content: center;
> align-content: center;
> }
> header {
> background-color: #FFCDD2;
> }
> footer {
> background-color: #C5CAE9;
> }
> main {
> background-color: #DCEDC8;
> }
>
> ```
> **\_load\_header\_footer.js:**
>
> ```javascript
> var scriptTag = document.querySelector('#script-front');
> var headerHTML = `
> Header
> `;
> var footerHTML = `
> Footer
> Tags: ${scriptTag.dataset.tags}
> Note Type: ${scriptTag.dataset.noteType}
> Deck: ${scriptTag.dataset.deck}
> Sub Deck: ${scriptTag.dataset.subDeck}
> `;
>
> var headerElement = document.createElement('header');
> headerElement.innerHTML = headerHTML;
> var footerElement = document.createElement('footer');
> footerElement.innerHTML = footerHTML;
> var container = document.querySelector('.container');
> container.insertAdjacentElement('afterbegin', headerElement);
> container.insertAdjacentElement('beforeend', footerElement);
>
> ```
Screenshot (on Anki2.1.30beta / AnkiDroid2.12.1):
If you want to change the header or footer, just modify the javascript file. I highly recommend you use [Refresh Media References](https://ankiweb.net/shared/info/162278717) add-on to ensure that modifications to the javascript file are reflected in ankiweb when syncing. Out of the box the add-on is not compatible with Anki 2.1, but as someone wrote in “Reviews” section in the add-on’s page, if you download source files from github, and comment out a single line, it should work on 2.1.
> on 3/17/2019
> The addon is pretty good.
> You can make it work on 2.1 by downloading from github and commenting out the line with “clearMemoryCaches()”, it only loses part of it’s functionality
---
**Author:**  [@DeutscheGabanna](https://forums.ankiweb.net/u/DeutscheGabanna)\
**Post date:** [August 8, 2020, 6:57pm UTC](https://forums.ankiweb.net/t/any-way-to-repeat-the-same-html-over-many-cards-similarly-as-you-import-css-so-i-can-more-easily-change-it-later/1947/3 "2020-08-08T18:57:34Z")
For anyone stumbling on this topic, I just learned a different, less robust, but definitely simpler solution.
Here it is:
> There’s a batch editor add on which doesn’t do this explicitly but would achieve the aim: ie enter the HTML for each card, then if you need to tweak it later you could use the batch editor to do it simply.
>
> Even with making the card you could use it to simplify that process. Enter some placeholder text at the top and bottom of the card, then use batch editor to replace it with the desired HTML once you’re done.
>
> See: [https://ankiweb.net/shared/info/291119185](https://ankiweb.net/shared/info/291119185)
source: [jakepat13 comments on Any way to repeat the same HTML over many cards similarly as you import CSS, so I can more easily change it later?](https://old.reddit.com/r/Anki/comments/i4p6pq/any_way_to_repeat_the_same_html_over_many_cards/g0ncmkm/)
---
**Author:**  [@Liliumanki](https://forums.ankiweb.net/u/Liliumanki)\
**Post date:** [September 18, 2020, 7:26am UTC](https://forums.ankiweb.net/t/any-way-to-repeat-the-same-html-over-many-cards-similarly-as-you-import-css-so-i-can-more-easily-change-it-later/1947/4 "2020-09-18T07:26:45Z")
> [@hkr](#):
>
> If you want to change the header or footer
Could I use this to basically load the entire HTML of the front Card from an external file?
I’m trying to find a way to have external front and back HTML + external css, so that I can edit them with an external editor and manage changes with git.
At the moment changing a note template involves copying/ pasting between the front/back/styling of the card template and a text editor, then commit, etc.
I would like to manage the process from the editor and have Anki load the code from the external files
---
**Author:**  [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:43am UTC](https://forums.ankiweb.net/t/any-way-to-repeat-the-same-html-over-many-cards-similarly-as-you-import-css-so-i-can-more-easily-change-it-later/1947/5 "2023-05-01T07:43:35Z")