HTML Tag

❮ Prev Next ❯

The tag is a generic inline container that groups elements primarily for styling purposes. The tag, as well as <div> tag are empty containers. The <div> tag groups block level elements, whereas the groups inline elements. The content hooked in the element, can be styled with CSS, or manipulated with JavaScript.

Here are some examples of the HTML tag usage:

Highlight a part of a text with color, define a background color or background image for it.
Change the font of separate words or phrases.
Apply scripts to certain parts of the text, e.g., highlight the code syntax.

The tag doesn’t provide any visual change to the elements and doesn’t have semantic meaning.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.

In the example below we gave a style just inside the tag.

Example of the HTML tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
  </body>
</html>

Try it Yourself »

Let's see another example where we added class attribute to the tag and gave styles to the content of the tag separately.

Example of the HTML tag with the class attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .letter {
        color: red;
        font-size: 300%; /* Font size in percents */
        position: relative; /* Relative positioning */
        top: 7px; /* Move from above */
      }
    </style>
  </head>
  <body>
    <p>
      <span class="letter">О</span> 
      She brought in disgusting, disturbing yellow flowers in her hands. 
      And these flowers stood out on her black coat.
    </p>
    <p>Michael Bulgakov</p>
  </body>
</html>

Try it Yourself »

Attributes

The tag supports the Global attributes and the Event Attributes.

Global Attributes refer to attributes that are used on any HTML element. These attributes are common for all elements in HTML.

An event occurs when a browser reacts to a particular user’s action. The user generates an event when clicking on a mouse, playing video, uploading a document or an image, or performing any other action on the website.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
CSS font-size property sets the size of the font.
CSS font-weight property defines whether the font should be bold or thick.
CSS text-transform property controls text case and capitalization.
CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

CSS color property describes the color of the text content and text decorations.
CSS background-color property sets the background color of an element.

Text layout styles for tag:

CSS text-indent property specifies the indentation of the first line in a text block.
CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
CSS white-space property specifies how white-space inside an element is handled.
CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

CSS text-shadow property adds shadow to text.
CSS text-align-last property sets the alignment of the last line of the text.
CSS line-height property specifies the height of a line.
CSS letter-spacing property defines the spaces between letters/characters in a text.
CSS word-spacing property sets the spacing between words.