The class attribute assigns one or more classnames to an element.
Classnames are defined in a stylesheet or in a local <style> element.
Classes, i.e. classnames, are used to style elements.
A class attribute on a <button> element.
The classnames style the button.
<style>
.pill {border-radius: 2px 25px !important; cursor:pointer; padding: 8px 10px;}
.turquoise {background:paleturquoise !important; }
.turquoise:focus, .turquoise:active, .turquoise:hover
{background:#95e0e0 !important; }
</style>
<button type="button" class="pill turquoise"
onclick="alert('Success! The process has started.')">Get Started!</button>
Classes (i.e. classnames) are used for styling elements.
Multiple classnames are separated by a space.
JavaScript uses classes to access elements by classname.
Tip: class is a global attribute that can be applied to any HTML element.
<tag class="classname" />
| Value | Description |
|---|---|
| classname | One or more space-separated classnames. A classname can only have alphanumeric characters with hypens (-) and underscores (_). Classnames are case-sensitive, but the convention is to use lower-case names. |
A class attribute on an <input> tag.
Clicking the button toggles a classname that changes the border color.
<style>
.indigo { background: #f6f8ff; }
.red-border {border:3px solid orangered;}
</style>
<form>
<label for="location">Location</label>
<input class="indigo" type="text" id="location" />
</form>
<br />
<button type="button" onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let element = document.getElementsByClassName("indigo")[0];
element.classList.toggle("red-border");
}
</script>
The class attribute is a global attribute that can be applied to any element.
Click on any tag for an example of that element using an class attribute.
| Tag with class | Description |
|---|---|
| <a> | Creates a link (hyperlink) to another page |
| <abbr> | Defines an abbreviation |
| <address> | Specifies contact information for the page's author |
| <article> | Defines a container for independent and self contained text |
| <aside> | Creates a content area that is related to the primary content on a page |
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <b> | Specifies bold text |
| <blockquote> | Defines a section with text quoted from another source |
| <body> | Specifies a container for the page's content with text, links, images, etc. |
| <button> | Creates a clickable button that can contain text or an image |
| <canvas> | Creates a graphics container where JavaScript can draw. |
| <caption> | Specifies a caption for a table |
| <code> | An element that is used to display computer code |
| <col> | Specifies column properties for a table |
| <dd> | Adds a description of a term or name to a <dl> element |
| <del> | Marks deleted text |
| <details> | A control that can show and hide additional details |
| <div> | Creates a division or section on a page |
| <dl> | Defines a description list |
| <dt> | Adds a term or name to a <dl> element |
| <em> | Marks text that needs emphasis |
| <embed> | Creates a container for an external resource or plug-in |
| <fieldset> | Groups related form elements and displays a box with a legend around these |
| <figcaption> | Adds a caption to a <figure> (image) element |
| <figure> | Displays self-contained content, usually an image |
| <footer> | Defines a footer section on a page or a section of a page |
| <h1>-<h6> | Defines text headings in 6 different sizes |
| <header> | Defines a header section on a page or a section of a page |
| <hr> | Creates a horizontal line |
| <i> | Specifies italic text |
| <iframe> | Creates a frame in which another web page can be embedded |
| <img> | Creates an image |
| <input> | Creates an input field in which data can be entered |
| <ins> | Marks inserted text |
| <kbd> | Specifies keyboard input often with CTRL, SHIFT, or ALT |
| <label> | Creates a label or brief description before input elements |
| <legend> | Defines a caption for a fieldset |
| <li> | Defines a list item. Used in <ol> and <ul> elements |
| <main> | Specifies a container for the main content of the page |
| <mark> | Displays marked or highlighted text |
| <meter> | Creates a measurement control, like a guage |
| <nav> | Creates a container for navigation links |
| <object> | Embeds external objects in a page, such as, audio, video, image, or PDF |
| <ol> | Creates a numerically or alphabetically ordered list |
| <optgroup> | Groups related options in a <select> element (dropdown control) |
| <option> | Adds an item to a <select> element (dropdown control) |
| <output> | Displays output results of a calculation |
| <p> | Creates a paragraph |
| <picture> | Adds images with a bit more flexibility than the <img> element |
| <pre> | Displays pre-formatted text in fixed-width font -- usually computer code |
| <progress> | Creates a control that displays progress of a task |
| <q> | Creates a short quotation enclosed with quotation marks |
| <samp> | Displays sample output from coumputer code |
| <section> | Defines a piece of content that can stand on its own |
| <select> | Creates a dropdown control |
| <small> | Displays text in a smaller font size |
| <span> | Container for one or more inline text elements |
| <strong> | Indicates text that is important or with high urgency |
| <sub> | Marks subscript text where characters display lower and in smaller font |
| <summary> | Adds a heading to a <details> element. Clicking it toggles the details |
| <sup> | Marks superscript text where characters display higher and in smaller font |
| <svg> | Creates an vector image |
| <table> | Creates an HTML table with rows and colums, much like a spreadsheet |
| <tbody> | Marks the table body in an HTML table |
| <td> | Creates an HTML table cell |
| <textarea> | Creates a multi-line text input control, for example for messages |
| <tfoot> | Marks the table footer in an HTML table |
| <th> | Creates an HTML table header cell |
| <thead> | Marks the header rows in an HTML table |
| <time> | Creates a human-readable date/time item |
| <tr> | Creates a table row with either <th> or <td> elements |
| <u> | Specifies underlined text |
| <ul> | Creates an unordered, bulleted list |
| <var> | Defines its content as a variable |
| <video> | Creates a video player on a page |
Here is when class support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
