In general, follow these basic steps to use an MDL component in your HTML page:

1. Start with a standard HTML element, such as <button>, <DIV>, or <ul>, depending on the MDL component you WANT to use. This establishes the element in the page and readies it for MDL modification.
2. Add one or more MDL-specific CSS classes to the element, such as mdl-button or mdl-tabs__panel, again depending on the component. The classes APPLY the MDL enhancements to the element and turn it into an MDL component.

Remember to include the meta viewport tag in your document so mobile devices will RENDER correctly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A note about HTML elements and MDL CSS classes

Material Design Lite uses namespaced BEM classes—which can apply to almost any HTML element—to construct components. For some components you can use almost any element. The examples in each component's documentation use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.

In general, follow these basic steps to use an MDL component in your HTML page:

Remember to include the meta viewport tag in your document so mobile devices will render correctly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A note about HTML elements and MDL CSS classes

Material Design Lite uses namespaced BEM classes—which can apply to almost any HTML element—to construct components. For some components you can use almost any element. The examples in each component's documentation use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.