> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/core-components/element.md).
# Element
The Element component is a flexible container for building layouts in Webstudio.
The Element component is a versatile component that can represent any HTML element. It provides the flexibility to create semantic HTML structures with any tag type while maintaining full styling capabilities.
***
## How to Use the Element Component
The Element component can be found in **Components > General**, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel.
***
## Available Tags
The Element component can be rendered as many HTML tags, including but not limited to:
### Container Elements
* `div` (default) – Generic container
* `section` – Document section
* `article` – Self-contained content
* `aside` – Sidebar content
* `header` – Header section
* `footer` – Footer section
* `main` – Main content
* `nav` – Navigation section
### Text Elements
* `span` – Inline container
* `p` – Paragraph (rendered as block)
### List Elements
* `ul` – Unordered list
* `ol` – Ordered list
* `li` – List item
### Link Element
* `a` – Anchor/link (shows href and target properties)
### Table Elements
* `table` – Table container
* `thead` – Table header group
* `tbody` – Table body group
* `tfoot` – Table footer group
* `tr` – Table row
* `th` – Table header cell
* `td` – Table data cell
### Other Elements
* `address` – Contact information
* `figure` – Figure with optional caption
* `figcaption` – Figure caption
* `label` – Form label
* `dl` – Description list
* `dt` – Description term
* `dd` – Description details
***
## Changing the Tag
You can change the HTML tag of the Element by opening the **Settings Panel** located on the right side of the Builder.
The tag dropdown shows all available HTML elements you can use. When you change the tag, the component's properties automatically update to show relevant attributes for that element type.
***
## Tag Labels in Navigator
When viewing Elements in the Navigator, the component label displays the HTML tag name (e.g., "section", "nav", "article"). This makes it easy to identify the semantic structure of your page at a glance.
{% hint style="info" %}
You can rename Elements in the Navigator by double-clicking to give them more descriptive names like "Hero Section" or "Main Navigation" while still maintaining the correct HTML tag.
{% endhint %}
***
## Use Cases
### Semantic HTML Structure
Use Element to create proper HTML5 semantic markup:
* `header` for site headers
* `nav` for navigation menus
* `main` for primary content
* `article` for blog posts
* `aside` for sidebars
* `footer` for footers
### Custom Tables
Build accessible data tables using Element with table-related tags (`table`, `thead`, `tbody`, `tr`, `th`, `td`).
### Description Lists
Create glossaries or key-value displays with `dl`, `dt`, and `dd` tags.
### Links with Full Control
Use the `a` tag to create links with full styling control and access to the href and target properties.
***
## Element vs Box
The Element component provides more flexibility than the Box component:
| Feature | Element | Box |
| --------------- | ------------------ | ---------------- |
| Tag options | Any HTML tag | div only |
| Semantic HTML | ✅ Full support | ❌ Limited |
| Navigator label | Shows HTML tag | Shows "Box" |
| Use case | Semantic structure | Quick containers |
{% hint style="success" %}
For building semantic, accessible websites, prefer Element over Box when you need specific HTML tags.
{% endhint %}
## Related
* [Slot](/university/core-components/slot.md) – Create reusable component slots
* [Link](/university/core-components/link.md) – Navigation and anchor elements
* [HTML Embed](/university/core-components/html-embed.md) – Custom HTML code
---
# 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://docs.webstudio.is/university/core-components/element.md?ask=&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.
