---
schema_version: "1"
id: 3c977a4af41765064eed3b6eead07472420f13f3c5e2f72d8c22d7b6b3bcb2ba
title: Component Markup
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-markup.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-markup.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 062065d84b6407b92a0c94573c24f43cdee2f774dffba5060b0fb568d54be50e
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Component Markup

Component resources contain markup and have a .cmp suffix. The markup can contain text or references to other components, and also declares metadata about the component.

Let's start with a simple "Hello, world!" example in a helloWorld.cmp component.

<!-- otherprops: set_clipboard -->
```nolang
<aura:component>
    Hello, world!
</aura:component>

```

This is about as simple as a component can get. The "Hello, world!" text is wrapped in the `<aura:component>` tags, which appear at the beginning and end of every component definition.

Components can contain most HTML tags so you can use markup, such as `<div>` and `<span>`. HTML5 tags are also supported.

<!-- otherprops: set_clipboard -->
```nolang
<aura:component>
    <div class="container">
        <!--Other HTML tags or components here-->
    </div>
</aura:component>
```

**note:** Case sensitivity should be respected as your markup interacts with JavaScript, CSS, and Apex.

**See Also**  


-   [Using the Developer Console](https://developer.salesforce.com/docs/platform/aura-platform/intro/intro-devconsole.md)
-   [Component Names](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-names.md)
-   [Component Access Control](https://developer.salesforce.com/docs/platform/aura-platform/access/access-components.md)