zie ook https://chatgpt.com/public#settings 

HTML Link Safety & Embedded Navigation Standard

Doel

Deze richtlijn voorkomt dat interne HTML-navigatie in Google Sites, iframes of andere embeds verandert in onbruikbare of verwarrende URLs zoals:

https://...googleusercontent.com/.../inner-frame-minified.html#start

De regel geldt voortaan voor HTML-tools, dashboards, webapps, uitlegpagina's en andere code die bedoeld kan zijn voor Google Sites of een ingesloten webview.

Hoofdregels

1. Gebruik geen href="#..." voor hoofd- of tabnavigatie in een embedded HTML-app.

2. Gebruik voor interne navigatie buttons met JavaScript:

   • button

   • data-scrollto

   • scrollIntoView()

   • of een echte tab-/panel-switcher.

3. Interne navigatie mag de browser-URL niet wijzigen.

4. Gebruik voor externe websites alleen volledige absolute HTTPS-links:

   • goed: https://help.openai.com/...

   • fout: relatieve links als /help/... als de host niet vaststaat.

5. Open externe links in een nieuw tabblad met:

   • target="_blank"

   • rel="noopener noreferrer"

6. Gebruik geen javascript:-links.

7. Sla geen tijdelijke Google Sites- of googleusercontent.com-embed-URL op als vaste link.

8. Een link naar een externe dienst moet naar de originele bestemming wijzen, niet naar de URL van het iframe waarin onze pagina toevallig draait.

9. Voor tabs, stappen, accordion-secties en wizard-navigatie gebruiken we UI-state, geen URL-fragment.

10. Controleer vóór oplevering alle links en navigatie in:

    • normale browserweergave;

    • Google Sites embed;

    • mobiel formaat;

    • nieuw tabblad.

Aanbevolen patroon voor interne navigatie

<button type="button" data-scrollto="credits">Credits</button>

<section id="credits">

  ...

</section>

<script>

document.querySelectorAll('[data-scrollto]').forEach(button => {

  button.addEventListener('click', () => {

    const target = document.getElementById(button.dataset.scrollto);

    if (target) {

      target.scrollIntoView({ behavior: 'smooth', block: 'start' });

    }

  });

});

</script>

Dit verandert de URL niet en werkt ook wanneer de pagina binnen een iframe staat.

Aanbevolen patroon voor externe links

<a

  href="https://help.openai.com/"

  target="_blank"

  rel="noopener noreferrer"

>

  OpenAI Help Center

</a>

Tabnavigatie zonder URL-hash

Gebruik voor apps met meerdere schermen bij voorkeur:

<button type="button" data-tab="home">Home</button>

<button type="button" data-tab="credits">Credits</button>

<section data-panel="home">...</section>

<section data-panel="credits" hidden>...</section>

JavaScript toont vervolgens precies één paneel. De embed-URL blijft ongewijzigd.

Link guard

Een HTML-app mag een extra controle bevatten:

document.querySelectorAll('a[href]').forEach(link => {

  const href = link.getAttribute('href') || '';

  if (/^https:\/\//i.test(href)) {

    link.target = '_blank';

    link.rel = 'noopener noreferrer';

  }

});

Verboden patronen

Vermijd:

<a href="#start">Start</a>

<a href="#credits">Credits</a>

<a href="javascript:openTab()">Open</a>

<a href="/help/article">Help</a>

voor embedded apps wanneer die constructies de host- of iframe-URL kunnen overnemen.

Ook vermijden:

https://34277988-atari-embeds.googleusercontent.com/embeds/.../inner-frame-minified.html#start

als permanente, gedeelde of zichtbare link.

Externe versus interne navigatie

Intern

• knop;

• tab;

• accordion;

• scroll;

• modal;

• wizard;

• panel;

• geen URL-wijziging.

Extern

• absolute https:// URL;

• nieuw tabblad;

• noopener noreferrer;

• oorspronkelijke website als bestemming.

Oplevercontrole voor iedere HTML-tool

• Geen hoofdmenu-items met href="#...".

• Geen javascript: hyperlinks.

• Alle externe links beginnen met https://.

• Alle externe links openen met target="_blank".

• Alle externe links gebruiken rel="noopener noreferrer".

• Geen tijdelijke Google Sites embed-URL als vaste navigatie.

• Navigatie getest binnen iframe/Google Sites.

• Navigatie getest op mobiel.

• Terug- en vooruitknoppen van de browser worden niet onnodig gevuld door interne UI-stappen.

• De gebruiker kan altijd duidelijk zien of een knop intern navigeert of een externe pagina opent.

Ontwerpprincipe

UI-navigatie hoort in de applicatie. Externe navigatie hoort in normale HTTPS-links. De embed-URL is nooit onze navigatiestructuur.

Toepassing

Deze standaard moet standaard worden meegenomen bij:

• nieuwe HTML-bestanden;

• aanpassingen aan bestaande HTML-tools;

• Google Sites embeds;

• dashboards;

• mobiele webapps;

• CRUD-tools;

• educatietools;

• import/export-apps;

• adminportalen;

• interne Business-tools.

Wanneer een bestaande app nog href="#..." gebruikt, vervangen we dit bij voorkeur tijdens de eerstvolgende wijziging door button-/tabnavigatie zonder URL-fragment.