> For the complete documentation index, see [llms.txt](https://mavolin.gitbook.io/corgi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mavolin.gitbook.io/corgi/learning-corgi/attributes.md).

# Attributes

Writing attributes is very straight-forward. Simply put them in parentheses directly behind the element's name. You can assign an attribute any printable expression you want.

{% tabs %}
{% tab title="Corgi" %}

```pug
a(href="https://github.com/mavolin/corgi") Corgi's GitHub
```

{% endtab %}

{% tab title="HTML" %}

```markup
<a href="https://github.com/mavolin/corgi">Corgi's GitHub</a>
```

{% endtab %}
{% endtabs %}

To write boolean attributes omit the value or set it to a boolean:

{% tabs %}
{% tab title="Corgi" %}

```pug
button(disabled) Click me!
button(disabled=true) Click me!
- b := false
button(disabled=b) Click me!
```

{% endtab %}

{% tab title="HTML" %}

```markup
<button disabled>Click me!</button>
<button disabled>Click me!</button>


```

{% endtab %}
{% endtabs %}

Attributes can even span multiple lines.

{% tabs %}
{% tab title="Corgi" %}

```pug
input(
  type="checkbox",
  name="agreement",
  checked,
)
```

{% endtab %}

{% tab title="HTML" %}

```markup
<input
  type="checkbox"
  name="agreement"
  checked
>
```

{% endtab %}
{% endtabs %}

## Classes and IDs

Classes and IDs, being incredibly common, even get their own short form.

{% hint style="info" %}
Corgis are smart doggos! Corgi will combine multiple class attributes and short forms into a single `class` attribute. This does not work for other attributes.
{% endhint %}

{% tabs %}
{% tab title="Corgi" %}

```pug
a.foo#bar(class="foobar", class="fooz baz") Incredible!
```

{% endtab %}

{% tab title="HTML" %}

```markup
<a class="foo foobar fooz baz" id="bar">Incredible!</a>
```

{% endtab %}
{% endtabs %}

## The `&`-Operator

One of the features that sets corgi apart from other template engines is its `&`-operator.

You can use it to add an attribute to the element from its body. This is super useful, if your attribute is conditional:

{% tabs %}
{% tab title="Corgi" %}

```pug
func Button(disabled bool)

button.bar
  if disabled
    &.foo(disabled)
  > Click me

```

{% endtab %}

{% tab title="HTML—true" %}

```markup
<!-- Button(true) -->

<button class="bar foo" disabled>


    Click me!
</button>
```

{% endtab %}

{% tab title="HTML—false" %}

```html
<!-- Button(false) -->

<button class="bar">


    Click me!
</button>
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
You can only place the `&`-operator before you write text or another element to the element's body. If you don't, the compiler will complain:

```pug
func Example()

button
  > Click me!
  &(disabled)
```

The above won't compile:

{% code overflow="wrap" fullWidth="false" %}

```
error: use of & after writing to element's body
  > example.corgi:5:3
  |
3 | button
  | ~~~~~~ in this element
4 |   > Click me!
  |   ~~~~~~~~~~~ you wrote an arrow block here
5 |   &(disabled)
  |   ^ so you cannot place an & here
suggestion: you can only use the & operator before you write to the body of an element.
```

{% endcode %}
{% endhint %}

## The `div` Shorthand

`div`s are incredibly common. Therefore, as long as your div has at least one class or an id, you can write `.foo` or `#bar` to produce a `div`.

{% tabs %}
{% tab title="Corgi" %}

```pug
div.foo#bar All
.foo#bar the
#bar.foo same
```

{% endtab %}

{% tab title="HTML" %}

```markup
<div class="foo" id="bar">All</div>
<div class="foo" id="bar">the</div>
<div class="foo" id="bar">same</div>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://mavolin.gitbook.io/corgi/learning-corgi/attributes.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.