Collegamenti

Note:

I collegamenti ipertestuali sono essenziali per collegare i siti Web e i contenuti. Per creare un collegamento, è sufficiente utilizzare l'opzione Inserisci collegamento in Word o nel documento Google.

È possibile aggiungere collegamenti a tutto il contenuto predefinito e alle diverse opzioni di formattazione.

In Word e Google Docs sono accettati solo collegamenti assoluti, che in genere è più facile da copiare e incollare dal browser. I collegamenti vengono automaticamente convertiti in relativi al sito, mentre i collegamenti esterni vengono mantenuti assoluti.

I collegamenti vengono spesso utilizzati oltre i collegamenti di testo e i riferimenti, ad esempio elementi multimediali incorporati o frammenti di riferimento allineati nella pagina.

Esempio:

Visualizza output live

Struttura contenuto:

Visualizza contenuto nel documento

Codice:

Poiché i collegamenti sono considerati Contenuto predefinito, hanno uno stile nel codice CSS del progetto o del blocco. In genere non viene utilizzato alcun codice JavaScript.
Nel progetto boilerplate non è presente alcun codice di stile relativo al collegamento.

Menzione speciale: Microsoft Word Online non consente collegamenti sulle immagini. Una soluzione consiste nel consentire agli autori di inserire un collegamento direttamente sotto l'immagine e quindi di racchiuderlo sul lato client, ad esempio

/**
 * Wraps images followed by links within a matching <a> tag.
 * @param {Element} container The container element
 */
function wrapImgsInLinks(container) {
  const pictures = container.querySelectorAll('picture');
  pictures.forEach((pic) => {
    const link = pic.nextElementSibling;
    if (link && link.tagName === 'A' && link.href) {
      link.innerHTML = pic.outerHTML;
      pic.replaceWith(link);
    }
  });
}

Menzione speciale: si consiglia di gestire alcuni collegamenti che devono essere aperti in una nuova finestra a seconda che si tratti di collegamenti esterni o di PDF (ad esempio) sul lato client, ad esempio

/**
 * Handles external links and PDFs to be opened in a new tab/window
 * @param {Element} main The main element
 */
export function decorateExternalLinks(main) {
  main.querySelectorAll('a').forEach((a) => {
    const href = a.getAttribute('href');
    if (href) {
      const extension = href.split('.').pop().trim();
      if (!href.startsWith('/')
        && !href.startsWith('#')) {
        if (!href.includes('xyz.com') || (extension === 'pdf')) {
          a.setAttribute('target', '_blank');
        }
      }
    }
  });
}