How to make HTML class Attribute

The class attribute assigns one or more CSS a class names to the <i> tag.

Class names are defined in a stylesheet or in a local <style> element.

Classes, i.e. class names, are used to style elements.

Example

A class attribute styling an <i> element.

Van Gogh and Gauguin visited Montpellier in December 1888.

Using class#

<style>

  .i-underline { text-decoration: underline; }

</style>

<article>

  <p>

    Van Gogh and Gauguin visited

    <i class=“i-underline”>Montpellier</i> in December 1888.

  </p>

</article>

Try it live

watch this

Using class#

Classes (i.e. class names) are used for styling the i element.

Multiple class names are separated by a space.

JavaScript can use class names for fast access to one or more elements.

Syntax#

<i class=“classnames“>

Values

#

More Examples#

A class attribute styling an <i> element.
Clicking the button toggles a classname that changes the background color.

Van Gogh and Gauguin visited Montpellier in December 1888.

Toggle class

class Attribute

<style>

class Attribute

  .i-underline { text-decoration: underline; }

  .lavender-bg { background-color:lavender; }

</style>

<article>

  <p>

    Van Gogh and Gauguin visited

    <i id=“myi” class=“i-underline”>Montpellier</i>

    in December 1888.

  </p>

</article>

<br/>

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

<script>

  let toggle = () => {

    let element = document.getElementById(“myi”);

    element.classList.toggle(“lavender-bg”);

</script>

touch this

Try it live

Code explanation

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

The class attribute in <i> assigns the two of those.

Repeatedly clicking the button toggles another class, changing the <i> underline

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

HTML Tags

Tags are code constructs that define the elements which make up an HTML page.

Example elements include paragraph, image, link, input, video, navigation, and more.

Writing with tags:

• Tags start with a  <  and end with a  > , for example, <img> which defines an image.
• Most tags have two parts, an opening tag and a closing tag.
• The closing tag has the same text as the opening tag, but prefixed with a ‘/’ (forward slash).
• A video player, for example, is created with these tags: <video> and </video>.

HTML Tag List#

Here is a complete list of HTML tags that you can use to create web pages.