HyperCode Tags reference guide

Complete list of HyperCode Tags, by function

See the complete list of HyperCode tags supported by HyperFluxCMS, grouped by function.

HyperCode has dozens of tags of various types and functions.

Roughly speaking, they can be divided into the following categories. Click on one of them to open the corresponding page.

Font styles

• Tag [i]: italic
• Tag [b]: bold
• Tag [u]: underline
• Tag [s]: strikethrough
• Tag [k]: keyboard
• Tag [del]: deleted
• Tag [ins]: inserted
• Tag [mark]: highlighted
• Tag [monospace]: monospaced
• Tag [sup]: superscript
• Tag [sub]: subscript
• Tag [style]: complex style

Font sizes

• Tag [xlarge]: extra large font size
• Tag [large]: large font size
• Tag [medium]: medium font size
• Tag [small]: small font size
• Tag [xsmall]: extra small font size

Block styles

• Tag [p]: paragraph
• Tag [block]: block
• Tag [center]: block with centered content
• Tag [left]: block with left-aligned content
• Tag [right]: block with right-aligned content
• Tag [justify]: block with justified content
• Tag [code]: block formatted as code
• Tag [hint]: block formatted as a hint highlight
• Tag [important]: block formatted as an important highlight
• Tag [warning]: block formatted with alert highlight
• Tag [quote]: block formatted as a quote

Images

• Tag [image]: simple image. Same as [img].
• Tag [img]: simple image
• Tag [thumb]: thumbnail
• Tag [floatimg]: floating image
• Tag [coverimg]: cover image
• Tag [modalimg]: modal image

Links

• Tag [link]: hyperlink
• Tag [url]: hyperlink. Same as [link].

Headings

• Tag [h1]: heading level 1
• Tag [h2]: heading level 2
• Tag [h3]: heading level 3
• Tag [h4]: heading level 4
• Tag [h5]: heading level 5
• Tag [h6]: heading level 6

Lists

• Tag [ul]: unordered list
• Tag [ol]: ordered list
• Tag [li]: List item

Tables

• Tag [table]: table
• Tag [th]: table header
• Tag [tr]: table row
• Tag [td]: table cell

Audio and Video

• Tag [audio]: audio
• Tag [video]: video
• Tag [youtube]: embedded YouTube video

Menus

• Tag [menu]: menu or submenu
• Tag [menuitem]: Menu item

Documentation/Comments

• Tag [!]: comment

Templates

• Tag [template]: insert/use template
• Tag [footer]: footer
• Tag [header]: header
• Tag [post]: post

Components

• Tag [postlist]: post list
• Tag [pagination]: pagination
• Tag [searchform]: search form
• Tag [socialmediasharebuttons]: social media buttons

Metadata and Behavior

• Tag [summary]: summary
• Tag [postinfo]: post information
• Tag [pragma]: compilation directives

Useful Objects

• Tag [line]: horizontal line
• Tag [blank]: blank line
• Tag [index]: Index
• Tag [item]: item
• Tag [explain]: explanation about an item
• Tag [aliceblue]: font color "aliceblue"
• Tag [antiquewhite]: font color "antiquewhite"
• Tag [aqua]: font color "aqua"
• Tag [aquamarine]: font color "aquamarine"
• Tag [azure]: font color "azure"
• Tag [beige]: font color "beige"
• Tag [bisque]: font color "bisque"
• Tag [black]: font color "black"
• Tag [blanchedalmond]: font color "blanchedalmond"
• Tag [blue]: font color "blue"
• Tag [blueviolet]: font color "blueviolet"
• Tag [brown]: font color "brown"
• Tag [burlywood]: font color "burlywood"
• Tag [cadetblue]: font color "cadetblue"
• Tag [chartreuse]: font color "chartreuse"
• Tag [chocolate]: font color "chocolate"
• Tag [coral]: font color "coral"
• Tag [cornflowerblue]: font color "cornflowerblue"
• Tag [cornsilk]: font color "cornsilk"
• Tag [crimson]: font color "crimson"
• Tag [cyan]: font color "cyan"
• Tag [darkblue]: font color "darkblue"
• Tag [darkcyan]: font color "darkcyan"
• Tag [darkgoldenrod]: font color "darkgoldenrod"
• Tag [darkgray]: font color "darkgray"
• Tag [darkgreen]: font color "darkgreen"
• Tag [darkgrey]: font color "darkgrey"
• Tag [darkkhaki]: font color "darkkhaki"
• Tag [darkmagenta]: font color "darkmagenta"
• Tag [darkolivegreen]: font color "darkolivegreen"
• Tag [darkorange]: font color "darkorange"
• Tag [darkorchid]: font color "darkorchid"
• Tag [darkred]: font color "darkred"
• Tag [darksalmon]: font color "darksalmon"
• Tag [darkseagreen]: font color "darkseagreen"
• Tag [darkslateblue]: font color "darkslateblue"
• Tag [darkslategray]: font color "darkslategray"
• Tag [darkslategrey]: font color "darkslategrey"
• Tag [darkturquoise]: font color "darkturquoise"
• Tag [darkviolet]: font color "darkviolet"
• Tag [deeppink]: font color "deeppink"
• Tag [deepskyblue]: font color "deepskyblue"
• Tag [dimgray]: font color "dimgray"
• Tag [dimgrey]: font color "dimgrey"
• Tag [dodgerblue]: font color "dodgerblue"
• Tag [firebrick]: font color "firebrick"
• Tag [floralwhite]: font color "floralwhite"
• Tag [forestgreen]: font color "forestgreen"
• Tag [fuchsia]: font color "fuchsia"
• Tag [gainsboro]: font color "gainsboro"
• Tag [ghostwhite]: font color "ghostwhite"
• Tag [gold]: font color "gold"
• Tag [goldenrod]: font color "goldenrod"
• Tag [gray]: font color "gray"
• Tag [green]: font color "green"
• Tag [greenyellow]: font color "greenyellow"
• Tag [grey]: font color "grey"
• Tag [honeydew]: font color "honeydew"
• Tag [hotpink]: font color "hotpink"
• Tag [indianred]: font color "indianred"
• Tag [indigo]: font color "indigo"
• Tag [ivory]: font color "ivory"
• Tag [khaki]: font color "khaki"
• Tag [lavender]: font color "lavender"
• Tag [lavenderblush]: font color "lavenderblush"
• Tag [lawngreen]: font color "lawngreen"
• Tag [lemonchiffon]: font color "lemonchiffon"
• Tag [lightblue]: font color "lightblue"
• Tag [lightcoral]: font color "lightcoral"
• Tag [lightcyan]: font color "lightcyan"
• Tag [lightgoldenrodyellow]: font color "lightgoldenrodyellow"
• Tag [lightgray]: font color "lightgray"
• Tag [lightgreen]: font color "lightgreen"
• Tag [lightgrey]: font color "lightgrey"
• Tag [lightpink]: font color "lightpink"
• Tag [lightsalmon]: font color "lightsalmon"
• Tag [lightseagreen]: font color "lightseagreen"
• Tag [lightskyblue]: font color "lightskyblue"
• Tag [lightslategray]: font color "lightslategray"
• Tag [lightslategrey]: font color "lightslategrey"
• Tag [lightsteelblue]: font color "lightsteelblue"
• Tag [lightyellow]: font color "lightyellow"
• Tag [lime]: font color "lime"
• Tag [limegreen]: font color "limegreen"
• Tag [linen]: font color "linen"
• Tag [magenta]: font color "magenta"
• Tag [maroon]: font color "maroon"
• Tag [mediumaquamarine]: font color "mediumaquamarine"
• Tag [mediumblue]: font color "mediumblue"
• Tag [mediumorchid]: font color "mediumorchid"
• Tag [mediumpurple]: font color "mediumpurple"
• Tag [mediumseagreen]: font color "mediumseagreen"
• Tag [mediumslateblue]: font color "mediumslateblue"
• Tag [mediumspringgreen]: font color "mediumspringgreen"
• Tag [mediumturquoise]: font color "mediumturquoise"
• Tag [mediumvioletred]: font color "mediumvioletred"
• Tag [midnightblue]: font color "midnightblue"
• Tag [mintcream]: font color "mintcream"
• Tag [mistyrose]: font color "mistyrose"
• Tag [moccasin]: font color "moccasin"
• Tag [navajowhite]: font color "navajowhite"
• Tag [navy]: font color "navy"
• Tag [oldlace]: font color "oldlace"
• Tag [olive]: font color "olive"
• Tag [olivedrab]: font color "olivedrab"
• Tag [orange]: font color "orange"
• Tag [orangered]: font color "orangered"
• Tag [orchid]: font color "orchid"
• Tag [palegoldenrod]: font color "palegoldenrod"
• Tag [palegreen]: font color "palegreen"
• Tag [paleturquoise]: font color "paleturquoise"
• Tag [palevioletred]: font color "palevioletred"
• Tag [papayawhip]: font color "papayawhip"
• Tag [peachpuff]: font color "peachpuff"
• Tag [peru]: font color "peru"
• Tag [pink]: font color "pink"
• Tag [plum]: font color "plum"
• Tag [powderblue]: font color "powderblue"
• Tag [purple]: font color "purple"
• Tag [rebeccapurple]: font color "rebeccapurple"
• Tag [red]: font color "red"
• Tag [rosybrown]: font color "rosybrown"
• Tag [royalblue]: font color "royalblue"
• Tag [saddlebrown]: font color "saddlebrown"
• Tag [salmon]: font color "salmon"
• Tag [sandybrown]: font color "sandybrown"
• Tag [seagreen]: font color "seagreen"
• Tag [seashell]: font color "seashell"
• Tag [sienna]: font color "sienna"
• Tag [silver]: font color "silver"
• Tag [skyblue]: font color "skyblue"
• Tag [slateblue]: font color "slateblue"
• Tag [slategray]: font color "slategray"
• Tag [slategrey]: font color "slategrey"
• Tag [snow]: font color "snow"
• Tag [springgreen]: font color "springgreen"
• Tag [steelblue]: font color "steelblue"
• Tag [tan]: font color "tan"
• Tag [teal]: font color "teal"
• Tag [thistle]: font color "thistle"
• Tag [tomato]: font color "tomato"
• Tag [transparent]: font color "transparent"
• Tag [turquoise]: font color "turquoise"
• Tag [violet]: font color "violet"
• Tag [wheat]: font color "wheat"
• Tag [white]: font color "white"
• Tag [whitesmoke]: font color "whitesmoke"
• Tag [yellow]: font color "yellow"
• Tag [yellowgreen]: font color "yellowgreen"

Backgorund Colors

• Tag [b.aliceblue]: background color "aliceblue"
• Tag [b.antiquewhite]: background color "antiquewhite"
• Tag [b.aqua]: background color "aqua"
• Tag [b.aquamarine]: background color "aquamarine"
• Tag [b.azure]: background color "azure"
• Tag [b.beige]: background color "beige"
• Tag [b.bisque]: background color "bisque"
• Tag [b.black]: background color "black"
• Tag [b.blanchedalmond]: background color "blanchedalmond"
• Tag [b.blue]: background color "blue"
• Tag [b.blueviolet]: background color "blueviolet"
• Tag [b.brown]: background color "brown"
• Tag [b.burlywood]: background color "burlywood"
• Tag [b.cadetblue]: background color "cadetblue"
• Tag [b.chartreuse]: background color "chartreuse"
• Tag [b.chocolate]: background color "chocolate"
• Tag [b.coral]: background color "coral"
• Tag [b.cornflowerblue]: background color "cornflowerblue"
• Tag [b.cornsilk]: background color "cornsilk"
• Tag [b.crimson]: background color "crimson"
• Tag [b.cyan]: background color "cyan"
• Tag [b.darkblue]: background color "darkblue"
• Tag [b.darkcyan]: background color "darkcyan"
• Tag [b.darkgoldenrod]: background color "darkgoldenrod"
• Tag [b.darkgray]: background color "darkgray"
• Tag [b.darkgreen]: background color "darkgreen"
• Tag [b.darkgrey]: background color "darkgrey"
• Tag [b.darkkhaki]: background color "darkkhaki"
• Tag [b.darkmagenta]: background color "darkmagenta"
• Tag [b.darkolivegreen]: background color "darkolivegreen"
• Tag [b.darkorange]: background color "darkorange"
• Tag [b.darkorchid]: background color "darkorchid"
• Tag [b.darkred]: background color "darkred"
• Tag [b.darksalmon]: background color "darksalmon"
• Tag [b.darkseagreen]: background color "darkseagreen"
• Tag [b.darkslateblue]: background color "darkslateblue"
• Tag [b.darkslategray]: background color "darkslategray"
• Tag [b.darkslategrey]: background color "darkslategrey"
• Tag [b.darkturquoise]: background color "darkturquoise"
• Tag [b.darkviolet]: background color "darkviolet"
• Tag [b.deeppink]: background color "deeppink"
• Tag [b.deepskyblue]: background color "deepskyblue"
• Tag [b.dimgray]: background color "dimgray"
• Tag [b.dimgrey]: background color "dimgrey"
• Tag [b.dodgerblue]: background color "dodgerblue"
• Tag [b.firebrick]: background color "firebrick"
• Tag [b.floralwhite]: background color "floralwhite"
• Tag [b.forestgreen]: background color "forestgreen"
• Tag [b.fuchsia]: background color "fuchsia"
• Tag [b.gainsboro]: background color "gainsboro"
• Tag [b.ghostwhite]: background color "ghostwhite"
• Tag [b.gold]: background color "gold"
• Tag [b.goldenrod]: background color "goldenrod"
• Tag [b.gray]: background color "gray"
• Tag [b.green]: background color "green"
• Tag [b.greenyellow]: background color "greenyellow"
• Tag [b.grey]: background color "grey"
• Tag [b.honeydew]: background color "honeydew"
• Tag [b.hotpink]: background color "hotpink"
• Tag [b.indianred]: background color "indianred"
• Tag [b.indigo]: background color "indigo"
• Tag [b.ivory]: background color "ivory"
• Tag [b.khaki]: background color "khaki"
• Tag [b.lavender]: background color "lavender"
• Tag [b.lavenderblush]: background color "lavenderblush"
• Tag [b.lawngreen]: background color "lawngreen"
• Tag [b.lemonchiffon]: background color "lemonchiffon"
• Tag [b.lightblue]: background color "lightblue"
• Tag [b.lightcoral]: background color "lightcoral"
• Tag [b.lightcyan]: background color "lightcyan"
• Tag [b.lightgoldenrodyellow]: background color "lightgoldenrodyellow"
• Tag [b.lightgray]: background color "lightgray"
• Tag [b.lightgreen]: background color "lightgreen"
• Tag [b.lightgrey]: background color "lightgrey"
• Tag [b.lightpink]: background color "lightpink"
• Tag [b.lightsalmon]: background color "lightsalmon"
• Tag [b.lightseagreen]: background color "lightseagreen"
• Tag [b.lightskyblue]: background color "lightskyblue"
• Tag [b.lightslategray]: background color "lightslategray"
• Tag [b.lightslategrey]: background color "lightslategrey"
• Tag [b.lightsteelblue]: background color "lightsteelblue"
• Tag [b.lightyellow]: background color "lightyellow"
• Tag [b.lime]: background color "lime"
• Tag [b.limegreen]: background color "limegreen"
• Tag [b.linen]: background color "linen"
• Tag [b.magenta]: background color "magenta"
• Tag [b.maroon]: background color "maroon"
• Tag [b.mediumaquamarine]: background color "mediumaquamarine"
• Tag [b.mediumblue]: background color "mediumblue"
• Tag [b.mediumorchid]: background color "mediumorchid"
• Tag [b.mediumpurple]: background color "mediumpurple"
• Tag [b.mediumseagreen]: background color "mediumseagreen"
• Tag [b.mediumslateblue]: background color "mediumslateblue"
• Tag [b.mediumspringgreen]: background color "mediumspringgreen"
• Tag [b.mediumturquoise]: background color "mediumturquoise"
• Tag [b.mediumvioletred]: background color "mediumvioletred"
• Tag [b.midnightblue]: background color "midnightblue"
• Tag [b.mintcream]: background color "mintcream"
• Tag [b.mistyrose]: background color "mistyrose"
• Tag [b.moccasin]: background color "moccasin"
• Tag [b.navajowhite]: background color "navajowhite"
• Tag [b.navy]: background color "navy"
• Tag [b.oldlace]: background color "oldlace"
• Tag [b.olive]: background color "olive"
• Tag [b.olivedrab]: background color "olivedrab"
• Tag [b.orange]: background color "orange"
• Tag [b.orangered]: background color "orangered"
• Tag [b.orchid]: background color "orchid"
• Tag [b.palegoldenrod]: background color "palegoldenrod"
• Tag [b.palegreen]: background color "palegreen"
• Tag [b.paleturquoise]: background color "paleturquoise"
• Tag [b.palevioletred]: background color "palevioletred"
• Tag [b.papayawhip]: background color "papayawhip"
• Tag [b.peachpuff]: background color "peachpuff"
• Tag [b.peru]: background color "peru"
• Tag [b.pink]: background color "pink"
• Tag [b.plum]: background color "plum"
• Tag [b.powderblue]: background color "powderblue"
• Tag [b.purple]: background color "purple"
• Tag [b.rebeccapurple]: background color "rebeccapurple"
• Tag [b.red]: background color "red"
• Tag [b.rosybrown]: background color "rosybrown"
• Tag [b.royalblue]: background color "royalblue"
• Tag [b.saddlebrown]: background color "saddlebrown"
• Tag [b.salmon]: background color "salmon"
• Tag [b.sandybrown]: background color "sandybrown"
• Tag [b.seagreen]: background color "seagreen"
• Tag [b.seashell]: background color "seashell"
• Tag [b.sienna]: background color "sienna"
• Tag [b.silver]: background color "silver"
• Tag [b.skyblue]: background color "skyblue"
• Tag [b.slateblue]: background color "slateblue"
• Tag [b.slategray]: background color "slategray"
• Tag [b.slategrey]: background color "slategrey"
• Tag [b.snow]: background color "snow"
• Tag [b.springgreen]: background color "springgreen"
• Tag [b.steelblue]: background color "steelblue"
• Tag [b.tan]: background color "tan"
• Tag [b.teal]: background color "teal"
• Tag [b.thistle]: background color "thistle"
• Tag [b.tomato]: background color "tomato"
• Tag [b.transparent]: background color "transparent"
• Tag [b.turquoise]: background color "turquoise"
• Tag [b.violet]: background color "violet"
• Tag [b.wheat]: background color "wheat"
• Tag [b.white]: background color "white"
• Tag [b.whitesmoke]: background color "whitesmoke"
• Tag [b.yellow]: background color "yellow"
• Tag [b.yellowgreen]: background color "yellowgreen"

Some important reminders:

• Almost all tags can take the properties id, class, and style as optional properties. Learn more.
• Some HyperCode Tags are self-contained and used in a punctual way, for example, to insert an image or horizontal line in the text.
• Other Tags are used to mark a block and need to be "opened" [tag]" and "closed" [/tag].
• It is possible to use tag names in uppercase, lowercase, or mixed case.

Before diving into the tags, it is important that you have read and generally understood the syntax and use of HyperCode.

If you haven't done so yet, see the page Using HyperCode in HyperFluxCMS to understand the concept and know how to make the most of the features of this language.

You may also prefer to access the page HyperCode Tags in Alphabetical Order.