HTML <main> class Attribute

The class attribute on a <main> tag assigns one or more classnames to the main section element. Classes are used to style elements. Classnames are defined in a stylesheet or in a local <style> element.

Example

#

A class attribute styling a <main> element.

Impressionism is a 19th-century art movement characterized by relatively small brush strokes, emphasis on accurate depiction of light, ordinary subject matter, and unusual visual angles. Impressionism originated with a group of Paris-based artists whose independent exhibitions brought them to prominence in the 1870s and 1880s.

<style>
  .main {
    max-width: 500px;
    background: papayawhip;
    padding: 30px;
    border-left: 5px solid brown;
  }
</style>

<main class="main">
  <p>
    <b>Impressionism</b> is a 19th-century art movement 
    characterized by relatively small brush strokes, 
    emphasis on accurate depiction of light, ordinary
    subject  matter, and unusual visual angles. 
    Impressionism originated  with a group of 
    Paris-based artists whose independent exhibitions 
    brought them to prominence in the 1870s and 1880s.
  </p>
</main>

Using class

The class attribute assigns one or more classnames to the <main> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the main element.

JavaScript uses classes to access one or more elements by classname.

Tip:  class is a global attribute that can be applied to any HTML element.


Syntax

<main class="classnames">

Values

#

Value Description
classnames One or more space-separated class names.

More Examples

A class attribute styling a <main> element.
Clicking the button toggles classname that changes the background and left border color of the main.

Impressionism is a 19th-century art movement characterized by relatively small brush strokes, emphasis on accurate depiction of light, ordinary subject matter, and unusual visual angles. Impressionism originated with a group of Paris-based artists whose independent exhibitions brought them to prominence in the 1870s and 1880s.

<style>
  .main {
    max-width: 500px;
    background: papayawhip;
    padding: 30px;
    border-left: 5px solid brown;
  }
  .moccasin { background: moccasin; border-left: 5px solid black; }
</style>

<main id="mymain" class="main">
  <b>Impressionism</b> is a 19th-century art movement 
  characterized by relatively small brush strokes, 
  emphasis on accurate depiction of light, ordinary
  subject  matter, and unusual visual angles. 
  Impressionism originated  with a group of 
  Paris-based artists whose independent exhibitions 
  brought them to prominence in the 1870s and 1880s.
</main>

<br />
<button onclick="toggle();">Toggle class</button>

<script>
  let toggle = () => {
    let element = document.getElementById("mymain");
    element.classList.toggle("moccasin");
  }
</script>

Code explanation

Three CSS classes are defined in the <style> element.

The class attribute in <main> assigns two of those.

Repeatedly clicking the button toggles the third class, changing the background and left border color of the element.


Browser support

Here is when class support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
12.0 Jul 2015
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

 Back to <main>
Guides