> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/webcomponents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/webcomponents/templates.md).

# Templates

The HTML markup used in web components can be defined using the `template` property on a component.

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get template() {
    return '<div></div>';
  }
    
}
```

It can also be created in an HTML file.  A reference to the file is defined in the `templateUrl` property.

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get templateUrl() {
    return './my-component.html';
  }
    
}
```

```html
<!-- my-component.html -->
<div></div>
```

## Properties&#x20;

The HTML attributes of a component are defined using the `properties` property.  &#x20;

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      message: true
  }
  static get template() {
    return '<div>{message}</div>';
  }
      
}
```

These attributes can then be used to pass data into the component.

```html
<my-component message="Hello web components"></my-component>
```

```html
<!-- Output -->
<div>Hello web components</div>
```

In the example above, curly brackets interpolation `{}` is used to reference the property data in the components' template.  For more flexible bindings data to the template's markup, use [binding attributes](/webcomponents/binding-attributes.md).