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

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

#

VALUEDESCRIPTION
classnamesOne or more space-separated class names.

More Examples#

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:

Chrome1.0Sep 2008
Firefox1.0Sep 2002
IE/Edge1.0Aug 1995
Opera1.0Jan 2006
Safari1.0Jan 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.

TAGDESCRIPTION
<a>Creates a link (hyperlink) to another pageTry it live
<abbr>Defines an abbreviationTry it live
<address>Specifies contact information for the page’s authorTry it live
<area>Specifies a map area for an imageTry it live
<article>Defines a container for independent and self contained textTry it live
<aside>Creates a content area that is related to the primary content on a pageTry it live
<audio>Creates a player for sound such as music, sound effects, or othersTry it live
<b>Specifies bold textTry it live
<base>Sets the base URL for all relative URLs on a pageTry it live
<blockquote>Defines a section with text quoted from another sourceTry it live
<body>Specifies a container for the page’s content with text, links, images, etc.Try it live
<br>Creates a line breakTry it live
<button>Creates a clickable button that can contain text or an imageTry it live
<canvas>Creates a graphics container where JavaScript can draw.Try it live
<caption>Specifies a caption for a tableTry it live
<cite>References the title of a body of work, e.g. book, art work, or a songTry it live
<code>An element that is used to display computer codeTry it live
<col>Specifies column properties for a tableTry it live
<colgroup>Specifies one or more columns for table formatting purposes.Try it live
<data>Links content to a machine-readable set of related dataTry it live
<datalist>Specifies a list of options for a textfield (<input>) elementTry it live
<dd>Adds a description of a term or name to a <dl> elementTry it live
<del>Marks deleted textTry it live
<details>A control that can show and hide additional detailsTry it live
<div>Creates a division or section on a pageTry it live
<dl>Defines a description listTry it live
<dt>Adds a term or name to a <dl> elementTry it live
<em>Marks text that needs emphasisTry it live
<embed>Creates a container for an external resource or plug-inTry it live
<fieldset>Groups related form elements and displays a box with a legend around theseTry it live
<figcaption>Adds a caption to a <figure> (image) elementTry it live
<figure>Displays self-contained content, usually an imageTry it live
<footer>Defines a footer section on a page or a section of a pageTry it live
<form>Defines a data entry area that contains input elementsTry it live
<h1>-<h6>Defines text headings in 6 different sizesTry it live
<head>Creates a head element that holds metadata elementsTry it live
<header>create Defines a header section on a page or a section of a pageTry it live
<hr>do Creates a horizontal lineTry it live
<html>Defines the root container for an HTML documentTry it live
<i>Specifies italic textTry it live
<iframe>Creates a frame in which another web page can be embeddedTry it live
<img>Displays an imageTry it live
<input>Creates an input field in which data can be enteredTry it live
<ins>Marks inserted textTry it live
<kbd>create Specifies keyboard input often with CTRL, SHIFT, or ALTTry it live
<label>Creates a label or brief description before input elementsTry it live
<legend>Defines a caption for a fieldsetTry it live
<li>Defines a list item. Used in <ol> and <ul> elementsTry it live
<link>Defines a link to an external source, such as a style sheetTry it live
<main>Specifies a container for the main content of the pageTry it live
<map>Defines a client-side image map, i.e. an image with clickable areasTry it live
<mark>Displays marked or highlighted textTry it live
<meta>Provides metadata about the web pageTry it live
<meter>Creates a measurement control, like a guageTry it live
<nav>do Creates a container for navigation linksTry it live
<noscript>When the browser has disabled scripting, the noscript content displaysTry it live
<object>Embeds external objects in a page, such as, audio, video, image, or PDFTry it live
<ol>Creates a numerically or alphabetically ordered listTry it live
<optgroup>Groups related options in a <select> element (dropdown control)Try it live
<option>Adds an item to a <select> element (dropdown control)Try it live
<output>how to Displays output results of a calculationTry it live
<p>Creates a paragraphTry it live
<param>Adds parameters to an <object> elementTry it live
<picture>Adds images with a bit more flexibility than the <img> elementTry it live
<pre>Displays pre-formatted text in fixed-width font — usually computer codeTry it live
<progress>Creates a control that displays progress of a taskTry it live
<q>Creates a short quotation enclosed with quotation marksTry it live
<ruby>Represents a small annotation with pronunciation of textTry it live
<samp>Displays sample output from coumputer codeTry it live
<script>Adds JavaScript to a page. Either server-side or client-sideTry it live
<section>Defines a piece of content that can stand on its ownTry it live
<select>how Creates a dropdown controlTry it live
<small>Displays text in a smaller font sizeTry it live
<source>Adds a media source for a <video>, <audio>, or <picture>Try it live
<span>Container for one or more inline text elementsTry it live
<strong>Indicates text that is important or with high urgencyTry it live
<style>Adds CSS style elements to a pageTry it live
<sub>Marks subscript text where characters display lower and in smaller fontTry it live
<summary>Adds a heading to a <details> element. Clicking it toggles the detailsTry it live
<sup>Marks superscript text where characters display higher and in smaller fontTry it live
<svg>start Creates an vector imageTry it live
<table>do Creates an HTML table with rows and columns, much like a spreadsheetTry it live
<tbody>Marks the table body in an HTML tableTry it live
<td>do Creates an HTML table cellTry it live
<template>then Creates a hidden content holder that can be copied by JavaScriptTry it live
<textarea>it Creates a multi-line text input control, for example for messagesTry it live
<tfoot>Marks the table footer in an HTML tableTry it live
<th>how Creates an HTML table header cellTry it live
<thead>Marks the header rows in an HTML tableTry it live
<time>it Creates a human-readable date/time itemTry it live
<title>it Specifies the page title that will display in the browser’s tabTry it live
<tr>Creates a table row with either <th> or <td> elementsTry it live
<track>Adds a text track, such as, subtitles and captions, to the mediaTry it live
<u>how Specifies underlined textTry it live
<ul>do you Creates an unordered, bulleted listTry it live
<var>Defines its content as a variableTry it live
<video>how to Creates a video player on a pageTry it live
<wbr>Adds a suggestion to the browser for a word-break locationTry it live
<!DOCTYPE>Specifies the HTML version on the first line of the pageTry it live
<!–…–>Marks text as comments in the source code. Not visible to users

Leave a Reply

Your email address will not be published. Required fields are marked *