Links

Notes:

Hyperlinks are essential to connect websites and your content. To create a link, just use the insert link option in word or google doc.

Links can be added across all the default content and the different formatting options.

In Word and Google Docs only absolute links are accepted, which is usually easier to copy paste from your browser. Links are automatically converted to be relative to your site, while external links are kept absolute.

Links are often used beyond text links and reference for example embedded media or referenced fragments that are inlined in the page.

Example:

See Live output

Content Structure:

See Content in Document

Code:

As links are considered Default Content they are styled in project or block CSS code. There is usually no JavaScript code used.
There is no link related styling code in the boilerplate project.

Special Mention: Microsoft Word Online does not allow links on images, so a workaround would be to let authors put a link directly below the image and then wrap it on the client side, e.g.

/**
 * 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);
    }
  });
}