Websites

• 1: Introduction
• 2: Link: Connecting Content
• 3: Images and Media Items: Meta-data and SEO Settings
• 4: Pages: Meta-data and SEO Settings
• 5: Documentation site
• 5.1: Documentation Style Guide
• 5.2: Code Cheat Sheet

1 - Introduction

Publishing Content for the Web

The web relies on content being organised in a semantic structure that a machine can read. You’ll know this language as HTML (Hyper-Text Markup Language). Maintaining the standards of this markup helps machines—search engines, social media, apps and bots, and other websites—access and distribute content reliably. It also helps the different parts of a webpage, and its internal relations and functions, be interpreted and rendered properly—in a way that humans can usefully experience.

When we develop and organise information on the web, we need to keep this markup in mind. It also means that the information produced for this medium will be vastly different than if it were intended for another. The guidelines and documentation in this section, identify some of the simple (and best practice) ways you can make your communications shine in this medium. They will help you use the WordPress Content Management System (CMS), take advantage of integrated content drawn from other University systems, and draw on available analytics. Going forward, when new features are introduced, they will be introduced with relevant documentation.

Accessibility

Accessibility is a practice and guiding principle for developing a web that includes everyone, but especially people with disability. It ensures that the barriers to online participation are either removed entirely, or minimised. It doesn’t only benefit people with disabilities. It helps anyone facing obstacles, whether situational—like having broken glasses, or a mouse with a dead battery—or more systemic obstacles—like having limited bandwidth and speed. Accessibility is important, both as a business advantage and a legal obligation, but it’s also something we pursue in recognition of the diversity and dignity of the people we want to communicate with online.

The Four Principles of Accessibility

The Four Principles of Accessibility help define what is necessary for someone with a disability to access and use the web. While they typically reference user-interface components, such that we might use within Blocks, the principles can apply to *any *information on the web, including how we construct our page, or write text. The four principles of accessibility require that content is:

1. Perceivable: Information and user interface components must be presented to users in ways they can perceive.
2. Operable: User Interface components and navigation must be operable for users in ways they can perform.
3. Understandable: Information and the operation of the User Interface must be understandable.
4. Robust: Content must be robust, such that it can be reliably and consistently interpreted by a wide variety of technologies.

If any of these are not true for our sites, people with disabilities will not be able to use our sites. You can review the Accessibility Principles and encounter the people who rely on its implementation to better understand—and champion—accessibility.

Web Content Accessibility Guidelines

A working group of the World Wide Consortium provides guidelines to help implement the Four Principles of Accessibility, and make the web an accessible space—specifically for people with disability. These guidelines are called Web Content Accessibility Guidelines (WCAG), and they can be observed in three standards of compliance. Some can be met simply by keeping a few things in mind when creating content, most are automatic and already integrated within WordPress or can be programmed by developers, and some require considerable technical resourcing. Web Content Accessibility Guidelines are not necessary reading for Content Managers, but familiarity is essential for developers.

We aspire for compliance to the very achievable AA standard (of the most recent, stable version available: Version 2.1, at the time of writing) and still have considerable work left to do.

2 - Link: Connecting Content

Links let visitors (human and non-human) navigate across the web, and understand how content relates to other content. With linking best practices, you can give visitors the signs and confidence they need to navigate to important and helpful information.

Relevance is Key

Every link must have an obvious and valuable reason to exist. Links must meaningfully connect the link’s location with its target, and accurately communicate something of that relationship clearly and understandably within the link-text.

Quality linking is better than quantity. Too many links will overwhelm visitors with competing options and directives, and can signal to search engines that a site is “link spamming” to manipulate their metrics—rather than optimise its content. The relevance of a link is a key metric for determining rankings on search engines. So its best to avoid re-linking to the same target, or similar targets, even when there are opportunities to do so in the copy. Link the first time only, or wherever it seems most clear and useful on the page. This also ensures that links on each page remain unique, and avoids the appearance of “keyword stuffing”.

Link Parts

Links in the WordPress editor include three parts. The link-text, the link-target (what the link is linking to), and other link-attributes, typically the “Open in new tab” option.

Link-Text

The link-text helps define what the visitor can expect at the link-target. When nesting a link within copy, the link-text should include those relevant words in the surrounding text that helps make the target-link clear. Ideally, a link could be removed from everything in its immediate context, with the link-target still making perfect sense to the visitor—just from the link-text alone.

Link-text should succinctly describe the content you are recommending at the target-link. If that content is the whole page, your link-text may be as short and generic as a single keyword. It could be longer. But it should only be as long as needed to define and communicate the link-target clearly.

Open in New Tab

The “Open in new tab” option is best used sparingly. It is generally not considered accessible, and normally has security implications. New tabs can disrupt expected browser functions, and disorient visitors as to their location on the web. Use the “Open in new tab” option if your source page features long video content or audio files, or if the target-link features a form.

Linking to Sections of Content

Linking directly to a particular section helps visitors find information quickly.

Using Existing Links to Sections

Pages often include links to different sections in a page contents table, or with its headings. If this is the case, you can get that URL simply by visiting the link, and copying it from your browser. Use this URL as your target-link.

Creating Links to Sections

If there isn’t an existing link available, you will have to inspect the HTML. The specifics may differ according to your browser of choice, but the process will be like this:

• Identify the element you want to link to. A Heading is an appropriate and typical element to link directly to.
• Right-click on the element, and select “Inspect element”, “Inspect” or “Developer Tools > Inspect”. 
• A Browser Panel will open with the HTML as one of its sub-panels, and your selected element will be highlighted. In most browsers, you can hover over this element in the sub-panel, to also highlight it in the rendered version. This way you can confirm what element was selected. If the element is incorrect, you can try again, or select another element in the sub-panel. If the selected element is too specific, you can find the correct element by tracing its parent elements upwards. If the selected element is too vague, you can do the inverse to find its child elements. You may need to expand or contract individual elements with the available right/down carets. 

• Once you identify the correct element, identify and copy its ID attribute. Heading elements will typically have IDs. If your element does not have an ID attribute, you will have to locate a relevant element that does.
• Copy the page URL from your browser, add a hashtag, followed by the element ID attribute.  Use this URL as your target-link. Check the caption of the example above, for an example target-link.

Linking to External Sources

Linking to an external source connects our site in a reciprocal relationship, for better and worse. It helps establish our reputation as being trustworthy when we link to a trustworthy source, and it reinforces its trustworthy reputation. If the site is not trustworthy, it’s simpler to omit the link where you can, or find a better source. We can’t control the content or condition of external sites, and don’t want to risk our reputation on unnecessary links, nor inadvertently direct our visitors to sites that may be (or may become) harmful.

External links will be automatically appended with an icon to signify that they link to content outside of the site. Currently these are not visible to those using screen-readers.

Passive Linking

Passive links are links included in content without any further suggestion that visitors should use them. They don’t require any prefacing or commentary. When nested in text copy, they just exist on top of the text. If the link-target were to be removed, the copy would otherwise remain the same and its absence wouldn’t disrupt the reader. Passive links offer more (often clarifying) information if the visitor opts for a little detour. Use them when you think there is content elsewhere that helpfully expands on the information, or is communicated at a more authoritative or canonical source—almost like a reference.

Menu Links

When adding a link to navigation menus, where space is variously limited, include the shortest viable description or keyword of the link-target. Guidelines for adding and editing menu items will be covered more extensively elsewhere in the documentation (yet to be completed).

Passive Linking within the Text too Subtle? Try Blocks

If a passive link nested in your text doesn’t adequately represent the value of the link, and nor does it warrant a more directive link, you should use a feature-box or info-notice block instead. These blocks will be covered more extensively within the block documentation (yet to be completed).

Passive Linking not Relevant to the Copy Alone? Try Hotlinks

If a passive link doesn’t belong within your text because it reflects a relationship of the *whole *page to something else, you should add your link as a Hotlink. Hotlinks are displayed in footers and sidebars to represent broader, more thematic connections to other content. Hotlinks will be covered more extensively elsewhere in the documentation (yet to be completed).

Directive Linking

When actively directing a visitor, purposely empower and encourage them to use a link in the surrounding copy. You can empower your visitor to take action by leading with “you can”, but exclude these addresses from the link-text. Including a concrete and compelling impetus for the visitor, also helps visitors better understand why they should action a directive. These are generally excluded from the link-text, unless they’re essentially descriptive of the target-link.

Communicate confidently by omitting hedging or weasel-words that soften or qualify the ask (like “please” or “consider”). All directive links are confident because your content is carefully considered, trustworthy, and always beneficial to its visitors.

Accessible, Dynamic Language

Employ dynamic, active verbs, and include them within your link-text. Choose verbs that avoid specific mechanics. “See document” or “click here”, for example, refer to actions that might not be performable by people with visual or motor impairments. Emphasise more accessible verbs instead: a mental process or an experience behind the performed activity. Not only is this way of writing more engaging, and empowering generally, it adds meaning to the widest possible audience.

There may be instances where plainer verbs like “read” are preferable, but consider less common, creative alternatives too. Examples of some dynamic, active verbs you could use, include: Access, Browse, Check, Confirm, Consider, Consult, Discover, Encounter, Engage with, Experience, Explore, Find, Inspect, Investigate, Learn, Make sense of, Search, Seek.

“See document” and “click here” are generic links that offer little meaningful reference to the link-target, and relies on a context that might not be being experienced by every visitor. For someone using a screen-reader, on a feed of truncated posts where context has been removed, for example, these links may have no personal or practical meaning whatsoever.

Examples of accessible link-text that employ dynamic, active verbs and include more engaging descriptions of the target-link, include: “you can make sense of accessibility”, and “you can understand your responsibility to people with broken glasses”.

Directive Linking within the Text too Subtle? Try Blocks

Most of the time, if you are directing a visitor to take action—like enrolling on an enrolment page—nesting links in your text may misrepresent its importance. In this case, you should use a button, a document or a call-to-action block instead. The same guidelines here will generally apply to creating links with Blocks, even if they might require terser link-text. Blocks include some additional built-in provisions that mitigate some of the problems with short and less-descriptive link-text. These blocks will be covered more extensively within the block documentation (yet to be completed).

Canonical URL Linking 

Using unoriginal or duplicate content without attributing the original source is the SEO equivalent of plagiarism and will harm our rankings. So to properly recognise the author/creator and/or the origin of the original content, and to make it clearer for people using search engines, include an attribution to that content by assigning a special [canonical URL in page meta-data(/staff-docs/web-content/pages-meta-data-and-seo-settings/). A canonical URL does not suffice for permission—if you want to post content made by another author, you still need to ask.

3 - Images and Media Items: Meta-data and SEO Settings

Every media item has settings that you can use to optimise the page for accessibility, search engine results, and indexing on your website. Meta-data for media items can be assigned for each item through the Media Library (via the WordPress Dashboard sidebar).

Image Meta-data

Title

Titles are an advisory attribute, appropriate for a tooltip. Titles are populated automatically from the file name when uploading media items, but are best replaced with a caption in the caption field. If left blank, WordPress will attempt to construct one from other meta-data. This is preferred if you add a caption, and include an author/creator.

❗ Alternative Text (Alt-Text)

Alternative text, or alt-text, is an important tool to make our website accessible and non-discriminatory. Alt-text provides visitors unable to view images to have an experience that is analogous to those who can. This could include people who are unable or unwilling to download images, those who have a visual impairment, and bots that are scraping or indexing our content. It is also displayed if the image fails to load. 

Alt-text should be assigned in almost all cases where the image is not strictly decorative. If in doubt, add alt-text.

Alt-Text should be helpfully descriptive, yet concise. 125 characters or less is ideal. Include the item’s subjects or features, activities and setting; use adjectives to include interesting and relevant details.

Description

Descriptions are used on media attachment pages, and may also be displayed in image search engine results. Our websites do not use media attachment pages generally so descriptions have limited value presently. To add descriptions to media items, consult the suggestions for Meta Descriptions.

Caption

Captions provide additional information about the image and its subject, for people who can see the image and want to know more. Unlike the alt-text or description, the caption shouldn’t simply mirror what the image actually shows. When uploading paintings or other visual art, add its title in the caption field. 

Image Focus

In some applications, images are automatically cropped to respond to smaller device dimensions. To ensure an image’s subject is kept within an observable frame, select the focal point closest to the subject’s center—usually this is a person’s face/eyes. If there is no obvious subject matter, use the center focal point to crop equally from the image’s outermost edges. The center focal point is selected by default.

Video, Audio and Other File Meta-data

Most other media types will have the fields listed above, excepting the alt-text and image focus fields.

Copyright

All website content must strive to reflect the University’s commitment to academic integrity in its ethical, honest and responsible use and communication of information. An extensive array of licensing agreements exist to cover different types of image usage. If the content you are using is covered by a Creative Commons license make sure your use is covered by its license. A non-commercial Creative Commons license does not cover commercial uses, like marketing, even for non-commercial organisations.

Sourcing Images

• Unsplash is a collection of high-quality, free images with unrestricted use for University purposes, including marketing.
• Wikimedia Commons is a useful repository for images, especially art and historical artefacts. Images on Wikimedia Commons are not necessarily available for unrestricted use. You must confirm each image’s license before uploading it.

Citing Images

As a content manager, you’re responsible for ensuring that the University has the relevant license for the use of the images you upload. Do not use content, including images, without possessing the usage rights or permissions to do so. Citing the creator or copyright holder is not a substitute for usage rights or permission. Consult the canonical URL for re-publishing existing content under the Theme SEO Settings.

Copyright Meta-data

To properly cite an image, use the image meta-data fields below as needed.

Author/Creator

It is always nice and helpful to give attribution to an author/creator. So even if the license does not demand it, add the creator’s name. If there’s no known author, you can leave this field blank.

Publisher

The publisher is the organisation that originally hosted the image. If there is no known publisher, or it does not differ from the author, leave blank.

Source URL

Use a URL to direct a visitor to the source of the image from where it was downloaded, so that they can identify that image, its context and any additional information.

Copyright Year

The year that copyright was asserted. If the year is a date range, just include the latest year. If no copyright has been asserted, or it is not known, you can leave this field blank.

Year Created

The year that the object was created. If the year is a date range, include the date range. If no creation year is known, you can leave this field blank.

4 - Pages: Meta-data and SEO Settings

Every page has settings that you can use to optimise the page for accessibility, search engine results, and indexing on your website. These settings should be reviewed every time you update the page to make sure they remain properly configured. These optimisations are largely configured on a page-by-page basis. To optimise a page, visit the editor for that page in the WordPress dashboard.

Page Meta-Data

Excerpt

An excerpt is a summary of the page that is displayed in some blocks and some archives. Writing an excerpt is an opportunity to craft a useful summary of the page content. They should still be enticing, but it’s more important to cover as many of the main points as possible so that visitors feel informed about the content they are about to access.

A good excerpt is short, punchy and descriptive of the page. As with all writing for the internet: keep it concise and don’t bury your lede—say the most important and interesting information first. Less than 40 words is ideal and can be guaranteed to display properly. The excerpt maximum length is 55 words, so you can exceed forty words if necessary (but the full display of the excerpt cannot be guaranteed).

The excerpt field is accessed in the Settings panel to the right of the editor, under the page tab, within the Excerpt accordion.

If left empty the excerpt may be drawn automatically from the first few lines of the page.

Theme SEO Settings

All Theme SEO Settings fields are available in the Theme SEO Settings accordion in the bottom panel of the page editor.

Only the canonical URL is essential in some circumstances. All SEO (search engine optimisation) configurations should be sincere, specific and succinct.

Document title

A document title appears as the title of the page in search engine results, and in the tab in your browser. If left blank, the document title will automatically draw from your Page Title (at the top of the page). Add a document title only if your page title is too long (more than 65 characters long), not meaningful or appropriate for a search engine result, or in instances where the context of your page, among other pages, might be necessary to understand the page title.

Meta-Description

The meta-description is a short page description featured under its title in search engine results. They do not affect search engine rankings. But as they can entice people to visit, they can be a useful tool for marketing content. Meta-descriptions differ from excerpts in that they will not display within the website, and they are not summaries of content—they are inviting descriptions of the content. You may not need to cover all of the main points like a summary would, but it should be informative for potential visitors.

Meta-descriptions are best when brief, enticing and incorporate relevant, unique keywords. Less than 40 words is advised; less than 20 words preferable. Search engines do not guarantee the display of a particular length (Google will typically allocate about 20 words, but it varies widely). As with all writing for the internet: keep it concise and don’t bury your lede—say the most important and interesting information first.

Avoid double-quotation marks. These indicate truncated descriptions and will automatically remove any text that follows. If double-quotation marks are important to communicate meaning you can replace them with the HTML entity instead: "

Meta-descriptions are optional. If left blank, the meta description will automatically draw from the excerpt (if it exists) or the first few lines of the page.

Meta-Keywords

This field assigns meta-keywords to the page. Meta-keywords aren’t consistently used by search engines so are not of great value. That said, future website indexing on University sites may draw on these keywords to weigh internal search results and improve the filtering of our content. If you would like to add meta-keywords, make sure they are highly unique and relevant to the page, and accurately reflect the page’s content.

Canonical URL

A canonical URL tells search engines that the content on the page has been copied from another “canonical” page on the internet. Adding this URL lets the search engine know which is the original and that it should be preferenced in its rankings. You should add canonical URLs to your page whenever you are copying content from the Divinity.edu.au site.

A canonical URL does not suffice for permission—if you want to post content made by another author, you still need to ask.

5 - Documentation site

5.1 - Documentation Style Guide

This document provides a general overview of the style of the it.divinity.edu.au content and is in no ways exhaustive. If you are unsure and need further guidance, see the Google developer documentation style guide, the University of Divinity Style Guide or The Chicago Manual of Style Online (Library Hub login required).

Types of Documentation

University of Divinity documentation is categorised as either Training, Guides or Documentation. These are defined as:

Documentation

Documentation is specific to a particular application and task or concept such as resetting a password, adding a profile picture or how internet links should be used.

Documentation should be aim to be atomic (a singular part of a whole) with the intent that it would be referenced in response to a specific problem or inquiry. If an application sends someone to a support document, it should assist them with the task they were attempting in that application.

Documentation is by nature static, unidirectional in engagement and available at any time without a deadline or completion requirement. A user might access the same document multiple times to recall or diagnose different problems.

Guides

Guides can be thought of as sequenced documentation which connect a series of atomic tasks as part of a larger whole. For example, the ARK: Signalling with Text and Media Areas applies multimedia design theory to the technical processes of adding a series of different types of resources to a section on the Learning Management System. As such it is in multiple parts and regularly sends users to specific documentation on steps.

Guides are intended to help users navigate through a series of concepts or provided collated upskilling on a series of tasks. They might be produced as a result of in situ training such as a Teaching Conference presentation but they will not require completion or have an associated assessment.

Training

Training refers to skill or knowledge development that requires completion and includes assessment. Training might be used for orientation/induction to policies and expectations (e.g. Code of Conduct) or professional development to a specific role or function (e.g. course adviser).

Assessment might be automated (such as an ARK quiz) or be conducted separately by an examiner(s). The training might be entirely online or hybrid with an in-person or Zoom session.

Location of Documentation

Documentation and guides on University IT applications should be hosted on this site (it.divinity.edu.au). At this stage, this site is focussed on documentation in the domain of the University IT department.

Documentation taxonomy

This site has 5 top level documentation folder trees:

• Getting Started
• Cybersecurity
• Student Docs
• Staff Docs
• Projects

Getting Started is accessible from the home page while the other trees are accessible from the top navigation.

Staff Documentation Structure

Staff documentation is grouped by IT application, these are all listed on Getting Started - University Systems.

Outside of this structure is a Getting Started folder and a Guides folder.

Student Documentation Structure

As per Staff Documentation but mostly centred around ARK with a reference page to other University student guides on other websites.

Format of Documents

Page Info Scope notice

Documents should begin with a Page Information notice ( {{% pageinfo %}} ) that scopes the purpose and intended audience of the document. Provide direction to other pages if application might be confused or external references are needed. For example:

For assistance with inserting Page Info notices, see the Code Cheat Sheet

Heading and content structure

Write in a linear progression through a process. Follow the inverse pyramid structure of importance, placing important information at the top of the document and assuming readers will skim the document.

If users may understand the process and just need a quick primer on a key step, you can provide a summary or internal link. A key example of this is the prominent Reset your SSO Password button at the top of the Login Guide. During a stage of major process change, a prominent notice might be required. For example, after the December 2023 ARK upgrade, this notice was placed on the Login Guide:

The pages should follow a linear progression from <h1> (markdown: #) to <h6> (markdown: ######), beginning with <h2> (the page title is <h1>). This is explained in the Presenting Information document. If a section of a document might need direct referencing (either internally within the page or from another document), it should have its own heading. For example, the link to Presenting Information earlier in this paragraph, has a direct link to the heading Headings and paragraphs, achieved by appending #headings-and-paragraphs to the end of the link.

For information on formatting documents for this site, see the Markdown reference.

Process diagrams

For workflows or processes, a flowchart may help illustrate the sequence of events or decision making points. For example (from New Publications):

flowchart LR
    style id1 fill:#ffffff,stroke:#413e39,stroke-width:2px
    style id1b fill:#ffebec,stroke:#413e39,stroke-width:2px
    style id2 fill:#f7f3ec,stroke:#413e39,stroke-width:2px
    style id3 fill:#ece5d5,stroke:#413e39,stroke-width:2px
    style id3b fill:#b79754,stroke:#413e39,stroke-width:2px
    style id4 fill:#740005,stroke:#413e39,stroke-width:2px,color:#ffffff;
    style id5 fill:#a00021,stroke:#413e39,stroke-width:2px,color:#ffffff;

    id1>Item Details]
    id1b>Authorship]
    id2>Publication]
    id3>Classification]
    id3b>ANZSRC]
    id4>Upload]
    id5>Submit]
    
    id1 --- id1b --- id2 --- id3 --- id3b --- id4 --- id5

Diagrams should not be used as the only way to convey information and the information should be clearly indicated in other ways in the document.

See the Code Cheat Sheet for the code for an example Mermaid flowchart.

Working with Policy and Sources

Where a workflow or process is governed by policy, the policy should be clearly referenced and pointed to as the authoritative source. If policy is unclear, do not extend the policy in documentation.

As clearly as possible, refer users to the relevant policy or policy guidance on the University website. For example:

Note: This page documents how to use the extension request form. Students are advised to check their eligibility for an extension on the Grading and Assessment page and the Assessment Policy before completing the form.

If you are unclear about your eligibility for an extension, contact your lecturer or the Academic Dean at your college.

5.2 - Code Cheat Sheet

Alert shortcode

Alert shortcode is used for essential information or tips. Essential information should be in the primary colour and tips short be in the secondary colour.

Parameters

• title - free text title
• color - stylesheet defined colour name. primary is #b10024 and secondary is #a48545.
• alert text - free text placed inside the alert tags

{{% alert title="title goes here" color="colour goes here" %}}

Insert your alert text here

{{% /alert %}}

Example Shortcode

{{% alert title="Example alert shortcode" color="primary" %}}

This is an example alert shortcode. Colours defined in the site are ```"primary"``` (brand red #b10024) and ```"secondary"``` (brand gold #a48545).

{{% /alert %}}

Example Output

Imgproc shortcode

See Docsy Doc: imgproc shortcode

Add screenshots and other images using the imgproc shortcode. The shortcode will resize the image for you and place it inside a figure tag with a border to display neatly on the page.

The imgproc shortcode takes an image in the page bundle (basically the folder in which the document is located - see Docsy docs: Page bundles) and resizes it on page build based on the specified processing parameters. The Fit process is the only process in common use.

To add a screenshot using the imgproc shortcode:

1. Take a screenshot and place it in the same folder as the markdown page. The folder structure followed on this site is to create a folder with the name of the document and a single page index.md (see Hugo docs: Single page templates). This structure is followed for ease of site maintenance.
2. Name the screenshot a unique name. A semantic naming convention followed on most docs is: staff/student-docs + application + document name + interface element + action. A unique name is necessary to ensure that the shortcode processes the correct image.
3. Insert the imgproc shortcode, placing the filename in the first position.
4. Set the dimensions inside the third position.
5. As appropriate, add a caption between the open and close tags of the shortcode.

Parameters

• filename - unambiguous name of the image in the same page bundle as the document
• process - usually Fit. Could be Resize, Fill or Crop
• processing options - for fit width in pixels and height in pixels separated by “x” (e.g. 250x250)
• Image Caption - note: if annotating (see Annotate images), make sure this doesn’t move your annotations on different viewports

{{% imgproc “filename” Fit “processing options” %}}

image caption

{{% /imgproc %}}

Debug tip

Incorrect or ambiguous image names are a frequent cause of Hugo server errors. Following the staff/student-docs + application + document name + interface element naming convention strictly will help avoid these errors.

Example Shortcode

{{% imgproc "docs-site-code-cheat-sheet-example-imgproc" Fit "450x450" %}}

This is a sample code for an imgproc shortcode with caption. (Note that the pictured example shows syntax markup in VSCode).

{{% /imgproc %}}

Example Output

Page info shortcode

{{% pageinfo %}}

**Insert info text here**

{{% /pageinfo %}}

Example shortcode

{{% pageinfo %}}

This is a page info box.

{{% /pageinfo %}}

Example output

Youtube shortcode

{{< card header="$1" >}}

{{< youtube id="$2" title="$1" >}}

{{< /card >}}

Mermaid

The Mermaid diagramming and charting tool is installed on this site. For a guide to using Mermaid see the Mermaid Doc: Getting Started.

Mermaid flowchart

    ```mermaid
    flowchart LR
        style id1 fill:#ffffff,stroke:#413e39,stroke-width:2px
        style id1b fill:#ffebec,stroke:#413e39,stroke-width:2px
        style id2 fill:#f7f3ec,stroke:#413e39,stroke-width:2px
        style id3 fill:#ece5d5,stroke:#413e39,stroke-width:2px
        style id3b fill:#b79754,stroke:#413e39,stroke-width:2px
        style id4 fill:#740005,stroke:#413e39,stroke-width:2px,color:#ffffff;
        style id5 fill:#a00021,stroke:#413e39,stroke-width:2px,color:#ffffff;

        id1>$1]
        id2>$2]
        id3>$3]
        id4>$4]
        id5>$5]

        id1 --- id2 --- id3 --- id4 --- id5
    ```

HTML elements

Icon tables

Create table in excel with Y, o N. Upload CSV to Markdown Tables Generator. Find and replace with HTML below:

Field required

<i aria-hidden="true"  class="fa-regular fa-circle-check" title="Required field" style="color: #009400;"></i>  

Optional field

<i aria-hidden="true" class="fa-regular fa-circle" style="color: #898379;" title="Optional field"></i>

Field does not exist

<i aria-hidden="true" class="fa-regular fa-circle-xmark" style="color: #d10000" title="Field Does Not Exist"></i> 

Annotate images

Outer HTML

<div class="position-relative" style="max-width:1000px;">

</div>
<p>

Tippys

Change the following as required:

• href
• bg-primary or bg-secondary
• style left and top position
• data tippy content

<!-- Marker 1a: Section Description -->
<a href="#presentation-resources" class="screenshot-marker lh-1 fw-medium text-white position-absolute transform-center px-2 py-1 bg-primary rounded-circle" style="left: 26%; top: 1.5%" data-tippy-content="Section Description" aria-expanded="false">1</a>