# Component HTML File

Every UI component must have an HTML file with the root tag `<template>`. API module components (libraries) don’t require an HTML file.

The HTML file follows the naming convention `componentName.html`, such as `myComponent.html`.

A component’s HTML file can have a maximum file size of 128 KB (131,072 bytes).

Create the HTML for a Lightning web component declaratively, within the `<template>` tag. The HTML template element contains your component’s HTML.

```html
<!-- myComponent.html -->
<template>
  <!-- Replace comment with component HTML -->
</template>
```

When a component renders, the `<template>` tag is replaced with the name of the component, `<namespace-component-name>`. For example, in the browser console, `myComponent` renders as `<c-my-component>`, where `c` is the default namespace.

The HTML spec mandates that tags for custom elements (components) aren’t self-closing. In other words, custom elements must include separate closing tags. For example, the `c-todo-item` component nested in this component includes a separate closing `</c-todo-item>` tag.

```html
<!-- myComponent.html -->
<template>
  <c-todo-item></c-todo-item>
</template>
```

Write markup that you may not want to display when the page loads, but that can be rendered at runtime. See [Render DOM Elements Conditionally](/docs/platform/lwc/guide/create-conditional.md).

Use simple HTML template syntax to render lists. See [Render Lists](/docs/platform/lwc/guide/create-lists.md).

Create placeholders in the template that component consumers can replace with content. See [Pass Markup into Slots](/docs/platform/lwc/guide/create-components-slots.md).