Hugo’s attributes are plain HTML attributes getting injected from the Markdown source 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.


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


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.
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". Short alternative CSS syntax: .name.
Identification attributes
Usually, they serve as anchors and need to be unique. Again, we can use id="identifier" or short #identifier.
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.


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.