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.

1<aura:component>
2    Hello, world!
3</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.

1<aura:component>
2    <div class="container">
3        <!--Other HTML tags or components here-->
4    </div>
5</aura:component>

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

Note

Use the Developer Console to create components.

aura:component has the following optional attributes.

Attribute	Type	Description
`access`	String	Indicates whether the component can be used outside of its own namespace. Possible values are `public` (default), and `global`.
`controller`	String	The server-side controller class for the component. The format is `namespace.myController`.
`description`	String	A description of the component.
`implements`	String	A comma-separated list of interfaces that the component implements.
`isTemplate`	Boolean	Set to `true` if the component is a template. The default is `false`.
`template`	Component	The template for this component. A template must have `isTemplate="true"` set in its `<aura:component>` tag.

aura:component also includes a body attribute defined in a <aura:attribute> tag. Attributes usually control the output or behavior of a component, but not the configuration information in system attributes.

Attribute	Type	Description
`body`	`Component[]`	The body of the component. In markup, this is everything in the body of the tag.

Lightning Components Developer's Guide

Component Markup