Other HyperCode elements

Lines, indexes and other objects

HyperCode has other objects to insert, decorate, and format publications. See what they are and how to use them.

Tag [line]

The line Tag inserts a horizontal line on the page. It is useful for separating sections of the post. But it should be used with caution because it can give the post an old-fashioned appearance. It may be more recommended to separate the sections of the post using headings.

The line tag is self-contained, meaning it DOES NOT NEED and MUST NOT be used in "open/close" pairs. It should be used simply as a single tag.

Syntax:

Optional properties

Like almost all HyperCode tags, line can take as optional properties id, class, and style. They are exactly the same as the HTML id, class, and style properties; they are compiled/rendered as such and can be accessed and manipulated by javascript.

Tag [blank]

If you are using the default page settings in the post you are writing, HyperCode automatically inserts lines and paragraphs. See Automatic Line Breaks in HTML and Avoiding Automatic Line Breaks.

In this default configuration, if you have multiple consecutive blank lines in the text, only one of them is considered, ignoring the others.

But it may be that for some reason you want to force the post to have more than one line of spacing in certain places. This can be done using the blank tag.

Another use for the blank tag is to force line breaks in places where the normal HyperFluxCMS compilation process suppressed them. For example, between two img tags.

The blank Tag inserts one or more blank lines on the page.

The blank tag is self-contained, meaning it DOES NOT NEED and MUST NOT be used in "open/close" pairs. It should be used simply as a single tag.

Syntax:

Anonymous property

The "lines" property can be omitted and the number of lines can be provided directly after the tag name.

[blank="3"]

Optional properties

lines is an optional property. It indicates how many blank lines should be inserted. If not provided, only one line is inserted.

The blank tag DOES NOT ACCEPT the id, class, and style properties. If they are provided, they are simply ignored.

Anchor

Anchors are markings invisible to the page visitor, but they are inserted into the page's HTML code and serve to insert "bookmarks" or markings that make it easier for a specific part of the post to be quickly located and focused, if provided in the post's URL.

For example, if you are writing an article about Germany, and this page is long, it has a section called "History" and another called "Geography". You can insert anchors at the beginning of these sections, one called "history" and another called "geography". Then, you can reference this anchor using the character # followed by the anchor name in the link.

In the example, if someone accesses the post through the link "yoursite.com/germany#history" or "yoursite.com/germany#geography"

If this section is referenced to the anchor in a link within the post itself, you don't even need to include the full URL; just use # and the anchor name.

For example, using [link="#history"]History[/] creates a link that, when clicked, scrolls the page to focus directly on the beginning of that section.

Syntax:

At least one of the id or name properties must be provided. Name is kept for HTML compatibility, but it is preferable to use id.

For practical purposes, there is not much difference between providing id or name. The name and id do not need to be the same. Both can be used to focus the page. For example, if you use [anchor name="history" id="hystory"], the location will be focused by both the #history and #history links.

Anonymous property

The "id" property can be omitted and the anchor ID can be provided directly after the tag name.

Tag [index]

The index tag inserts an Index or Table-of-Contents of the sections present in the post.

The index is formed from information collected from the processing of the Headings found in the post. See more at Headings in HyperLite and at Links in HyperCode.

The index is a list of links. Each line contains the text of one of the Headings found on the page and a link to the beginning of the section it marks.

The index is displayed hierarchically.

• Level 1 Headings are displayed normally aligned to the left and with a larger font size.
• Level 2 Headings are displayed slightly to the right and with a less prominent font.
• Level 3 Headings are displayed even slightly more to the right and with an even less prominent font.
• And so on.

The current version of HyperFluxCMS can only collect information from headings processed in HyperCode or HyperLite. Headings inserted directly in HTML may not be correctly processed with regard to index generation.

The index tag is self-contained, meaning it DOES NOT NEED and MUST NOT be used in "open/close" pairs. It should be used simply as a single tag.

Syntax:

Example:

which, on this page you are reading, produces the following result:

Optional properties

Like almost all HyperCode tags, index can take as optional properties id, class, and style. They are exactly the same as the HTML id, class, and style properties, including being compiled/rendered as such and can be accessed and manipulated by javascript.

Tag [item] and [explain]

The item and explain tags are used together. They are used to insert information into the post without visually overloading the reader.

For example, to list a topic in an extremely summarized way and, only if the site visitor is interested in reading more, then display additional information.

You can, for example, put on a page that talks about a dietary supplement, mention that it is rich in Zinc. And if the visitor clicks on the line, then display a paragraph - on the same page, without needing to open another tab or page, talking about the importance of zinc for a balanced diet.

Syntax:

Optional properties

Like almost all HyperCode tags, item and explain can take as optional properties id, class, and style. They are exactly the same as the HTML id, class, and style properties, including being compiled/rendered as such and can be accessed and manipulated by javascript.

Example:

produces the following result:

Rich in Zinc

Zinc is important for wound healing, the formation of new tissues, and collagen production. It also participates in cell division, gene expression, physiological processes such as growth and development, and immune function.

Rich in Vitamin B12

Vitamin B12 is an essential vitamin for the human body. It is fundamental for the formation of blood cells, for the metabolism of proteins and carbohydrates, and for the functioning of the nervous system.

Rich in Selenium

Selenium is a mineral that helps strengthen the immune system, prevent degenerative diseases, and combat free radicals.