HTML class Attribute

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

Example

#

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>

Using class

The class attribute assigns one or more classnames to an element.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling elements.

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

<tag class="classname" />

Values

#

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.

More Examples

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> &nbsp;
  <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>

Elements using the class attribute

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

Browser support

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

You may also like



Guides