Hugo’s attributes are plain HTML attributes, which are injected from Markdown into the rendered HTML.

Attributes are available for all kinds of blocks, for headings and for fenced code blocks. We can allow them for blocks and headings in the configuration section for the Goldmark parser, where the parameter title relates to all heading levels. They are by default disabled for blocks and enabled for headings. They are all enabled for this documentation.

Syntax

Attributes are enclosed in curly braces { } and one pair of braces can take a set of attributes separated by a space.

Placement

Depending on the kind of element, attribute sets are attached differently:

Block element
attribute sets need to be placed on the next line directly after the element. If the element is indented, we need to indent the set accordingly.
Heading
We can place the set on the following line again, but it’s now also possible to let them follow on the same line.
Fenced code block
We need to place them after the first fence and the language indicator — like ```md {.left}

Kinds of Attributes

Class attributes
Usually, they style an element and refer to a CSS class. We can use the long form following the HTML syntax — like class="name". The short alternative is the CSS syntax: .name.
Identification attributes
Usually, they serve as anchors and need to be unique. Again, we can use id="identifier" or short #identifier.
Other
All other HTML attributes can be injected with their HTML syntax. Personally I’ve found the lang-attribute to be very useful. We can place it after a block with a different content language to let the browser hyphenation engine do its work properly.

Layout

Some attributes are of general use, they are introduced on the next pages.

Most attributes style specific elements and their style is shown their pages. To find a specific one quickly, there is a register.