# Use Emmet syntax

[BetaThis feature is new and we're actively working on it.](/beta-experimental-features/#beta-features)

The code editor in Design Studio supports [Emmet](https://emmet.io/), a shorthand syntax that expands into full HTML. It’s a fast way to generate repetitive structures like tables, links, or nested divs.

For example, type this (don’t copy/paste):

```fallback
div>div>table>tr*3>td>a
```

Then hit tab and it expands to:

```html
<div>
    <div>
        <table>
            <tr>
                <td><a href=""></a></td>
            </tr>
            <tr>
                <td><a href=""></a></td>
            </tr>
            <tr>
                <td><a href=""></a></td>
            </tr>
        </table>
    </div>
</div>
```

You can learn more about abbreviations in the [official Emmet documentation](https://docs.emmet.io/abbreviations/).

## Specify child tags with `>`[](#specify-child-tags-with-)

```html
table>tr>td
```

Becomes…

```html
<table>
  <tr>
    <td></td>
  </tr>
</table>
```

## Specify sibling tags with `+`[](#specify-sibling-tags-with-)

```html
a+a+a
```

Becomes…

```html
<a href=""></a>
<a href=""></a>
<a href=""></a>
```

## Multiply tags with `*`[](#multiply-tags-with-)

```html
table>tr*3>td*2
```

Becomes…

```html
<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
```

## Add IDs with `#`[](#add-ids-with-)

```html
a#my-link
```

Becomes…

```html
<a href="" id="my-link"></a>
```

## Add classes with `.`[](#add-classes-with-)

```html
a.text-blue
```

Becomes…

```html
<a href="" class="text-blue"></a>
```

## Add IDs and classes together[](#add-ids-and-classes-together)

```html
a#my-link.text-blue
```

Becomes…

```html
<a href="" id="my-link" class="text-blue"></a>
```