# Classless HTML Source: https://iriscss.com/documentation/overview/classless-html/ Write semantic HTML and it is styled. Classes are only for variants. Everything on this page is plain HTML with no class. Each element has its own page with the details and variants. ## Page structure `body` has no margin. A `header`, `main` or `footer` directly in `body` gets vertical padding, and each `section` gets space below it. Wrap the content in a [container](https://iriscss.com/documentation/layout/container-and-grid/index.html.md) to center it. ```html

``` ## Text ```html

An article title

With a subtitle under it

A paragraph with strong, emphasis, a link, highlighted text and inline code. Press Ctrl to continue.

A quote set apart from the text.

Someone wise

A list item
Another item

``` See [typography](https://iriscss.com/documentation/elements/typography/index.html.md), [list](https://iriscss.com/documentation/elements/list/index.html.md) and [code](https://iriscss.com/documentation/elements/code/index.html.md). ## Forms ```html ``` See [controls](https://iriscss.com/documentation/form/controls/index.html.md), [checkbox, radio and switch](https://iriscss.com/documentation/form/checkbox-radio-and-switch/index.html.md) and [validation](https://iriscss.com/documentation/form/validation/index.html.md). ## Tables, progress and media ```html

Task	Done
Design	100%
Build	60%

A figure with a caption.

``` See [table](https://iriscss.com/documentation/elements/table/index.html.md), [progress and meter](https://iriscss.com/documentation/elements/progress-and-meter/index.html.md) and [media](https://iriscss.com/documentation/elements/media/index.html.md). ## Interactive elements `details` is an accordion, `dialog` a modal, an element with `popover` a popover, and `nav` a row of links. None of them need JavaScript. ```html

What is in the box?

Plain HTML, styled.

``` See [accordion](https://iriscss.com/documentation/components/accordion/index.html.md), [modal](https://iriscss.com/documentation/components/modal/index.html.md), [popover](https://iriscss.com/documentation/elements/popover/index.html.md) and [nav](https://iriscss.com/documentation/components/nav/index.html.md). ## When to add a class Add a class when you want a variant, such as `.primary` or `.large`, or a pattern HTML has no element for, such as `.card` or `.badge`. Start with [colors](https://iriscss.com/documentation/modifiers/colors/index.html.md) and [sizes](https://iriscss.com/documentation/modifiers/sizes/index.html.md).