To main heading

Smallsite Design

Online editing help

10. Inline element

Inline elements contain the text for rich text elements, and provide formatting or other functionality.

Styling of inline elements may not be the same across all scripts due to cultural preferences or the nature of the scripts themselves. Conversely, some elements will be similarly styled, with the context providing an indication of how they are to be interpreted. However, the HTML generated will clearly indicate the semantic purpose of the elements, which will help with search engine analysis of the content.


  1. a.Inline insert for how to use special character sequences to create another inline element out of text in another
  2. b.Embedded characters for the special character sequences to set reading direction or provide hyphenation hints.


Formatting inline elements provide simple visual styling of text.

A text element can have anywhere from 1 to 600 characters, which should be enough for plain paragraphs. If really wanting more text in a rich text element, just append one or more text elements as required.

The basic formatting inline elements are:

Plain unformatted text. The only element that can start or end with a space, or just be all spaces.
Force a new line. As before
Indicates text that has been, or is to be, removed. Example.
Element that forces a rendering direction on its text on a character-by-character basis. Example: Example.
Text needing to stand out slightly from the rest to indicate that it is something to be noted. Example.
Indicates text that has been, or is to be, inserted. Example.
Key on a keyboard. Example.
Highlighted text, with a choice of background colours. Example.
Passive reference to a label, heading or control on a page, such as a button. Example.
Indicates the current selection. Example.
Indicates an error. Example.
Text to be properly noticed as being important. A stronger version of emphasis. Example.
Text that qualifies its preceding text in a subordinate way, as defined by the context. Typically used in base number notations, as in 2578 as the base-8 (octal) representation of 175.
Text that qualifies its preceding text in a superior way, as defined by the context. Typically used as power notation in numeric statements, as in 23.


Code inline elements render as monospaced as coding examples.

These inline elements are only allowed in code and program line elements. Any elements, including links, after a commentary element within its parent will use the same font as it, except for any code elements in a program line.

The code formatting inline elements are:

Non-code commentary within its parent for annotating the code. Appears as proportionally-spaced text, as distinct from the monospaced text of any other elements on the line.
Text typed by a user. Example.
Non-literal placeholder text. Example.

Inline rich textβ–³

Inline rich text elements behave like inline elements, but contain other inline elements.

The inline rich text elements are:

For code snippets. Example: .Prog{margin-top:.7rem;width:auto}.
Solitary or outer quotes, as defined by the Quotes pattern defined for the current Locale. Example.
Useful for sample text or labels. Example.
Inner quotes, as defined by the Quotes pattern defined for the current locale. An Example of one.


Functional inline elements, while styled, provide additional functionality, such as with links.

The link, file, email and telephone elements allow styling to make them look like fancy buttons, with differing font and background colours for their passive and active states, making them good for calls to action.

The functional inline elements are:

Name of a work, optionally with a URL or Locale. For a detailed citation, mark as a citation, but use a footnote for the link and details. Example.
Special link to open the default email client with a email ready to edit and send. Email, Subject and Body are required. The Body may have blank lines and any paragraph without ending punctuation will have a full stop added. Example:
File for download. The file must be Embeddable to download. Example.
Show an icon. Example: Smallsite Design icon.
Hypertext link – the fundamental enabler for navigating between pages on the worldwide web. Example link back to this entry's heading. See Links for details. Also see Pop-in.
media icon
Media control icon for documentation, especially for sequence element's controls. It can show the control's normal and disabled states, as well as the pointer. Direction follows the page direction, but can be set for the icon itself. Example: for play.
When clicked on, attempts to dial its telephone number. Example: +1-234-567-890.
Formatted date or time, with a choice of calendars, timezones and formats, including military. Its Time entry format is yyyy-mm-dd-hh-mm-ss, as per Etc/UTC, which is the universal time standard. It is displayed according to its other attributes. Example: .
Shows one of the Values of the Settings page, including the password for the gu guest account, if any. Direction is available, but embedded characters may be used for more complex directional formatting for the registration details. Example: ABN.

Links make the web work, and enhances the integration of a site. Smallsite Design keeps track of internal links to make selection easier.

Internal link targets are selectable from:

  1. a.All articles and categories.
  2. b.Sections and subsections.
  3. c.Glossary entries.
  4. d.Step and substep numbers.
  5. e.Question numbers.
  6. f.Other pages, like Categories or Latest articles.
  7. g.Common links, like Related articles or Subsite links.

Usually fragments are only those available in released articles, but all those in the article currently being edited are also available, bypassing the need to release it then re-edit it just to put in link targets to new elements. If any internal link targets get a new ID, internal links are updated immediately, and when saved the last release of any article with links to the article will also be updated.

External links must have a URL, but the Text is optional, defaulting to the URL. If the text cannot fit in the width available, it will break at every 20 characters. For links to other Smallsite Design sites, /-/ at the end of the URL's path will be replaced with the locale and the current effective accessibility setting, allowing visitor experience continuity between the sites. Must be before any query or fragment. The /-/ will not be displayed in a link's text URL on a page.

For example, a link's Target entered as:

will be rendered in the link's URL, on a page with the en-001 locale and accessibility off, as:

but if no Text is specified, the link will be displayed as:
(Hover over the link to see the full URL at the bottom of the browser page).

If there is no text specified for internal links, they will use the text of their target's heading. To avoid having to use text in links, make heading text use sentence case, where only the first letter of the heading is capitalised, other than where the language usually uses capitals in body text, such as proper nouns in English and all nouns in German. Links have a First letter attribute which allows changing the case of the first letter so that the heading can be used for the link's text with a case that suits its context.

For example, if the headline of a link's target is Category but when wanting to use it as a generic term in a particular context, setting its First letter to Lowercase renders it as category. If the current locale's script does not use case, the setting is ignored.

This means that to really take advantage of using links in this way, make headlines and headings use the singular form which in many cases in English can be used for plural by simply adding an s after the link. If the plural is more complex, reword to use the singular form. Because the layout of inline elements for each locale can be different, this usage can be tailored for each locale using the headline/heading translation as rendered.

If there is no target for a link, it will show a red ʘ?ʘ. If there is a target, but it is for an internal link that no longer exists or is to a target of lower showing visibility, a plain ʘ?ʘ is displayed.

In general, the best use of inline links is to:

  1. a.Minimise in long-form articles to reduce opportunities to leave the article.
  2. b.Preferably use the related links at the end of articles.
  3. c.Use where their target is providing direct support for the particular aspect of the narrative at that point, such as showing data or statistics.
  4. d.Use where their target is providing context for those not familiar with it at that point in the narrative, such as the description of a section of a page used to perform a procedure.

Inline inks can interrupt a narrative, and so need to be really useful for many to be worthy of inserting. Not everyone will want to look at the target pages, but it is better than including that information on the page where most may find it clutter. An alternative is to use a footnote where there is no more than a paragraph is required, but only if it is not needed for other articles.

However, in reference sites like this, extensive inline cross-references are expected, so visitors can get to any ancillary information they may need quickly.


Some elements allow their text to be coloured.

The elements that can be coloured are:

  1. a.Formatting: text, direction, emphasis, reference, selection, strike, strong, subscript, superscript.
  2. b.Code: keyboard, variable.
  3. c.Functional: citation.

While the citation is the only functional inline element that can be coloured by this simple means, the file, link, email and telephone elements can have their colours customised by styling for impact as calls for action.

  • β€’Table element
  • β€’Sequence element
  • β€’Procedure article element
  • β€’Contact   Glossary   Policies
  • β€’Categories   Feed   Site map

  • This site doesn't store cookies or other files on your device when visiting public pages.
    External sites: Open in a new tab or window, and might store cookies or other files on your device. Visit them at your own risk.
    Powered by: Smallsite Design ©Patanjali Sokaris