HTML Tag

❮ Prev Next ❯

The HTML tag is used to define a small piece of content or text within a larger document that needs to be styled differently than the surrounding text. It is an inline element that can be used to apply styles, such as color or font, to a specific section of text.

The tag does not have any semantic meaning on its own, but it can be used in conjunction with other tags, such as <div> or , to give them additional styling or functionality. It is a useful tool for web designers and developers who need to make small adjustments to text without affecting the overall structure of the page.

For example, you can use the tag to highlight a specific word within a paragraph or to apply a different font size to a single character. The tag can also be used with CSS to create hover effects, animations, and other dynamic features on a web page.

The span tag is somehow similar to the div tag. But there are some differences. While the HTML tag is used to define a small piece of content or text within a larger document that needs to be styled differently than the surrounding text, the div tag is used to define a larger section or block of content that can contain other HTML elements. The div tag is a container element that is often used to group related content together and apply styling to the entire block. It is a block-level element, which means it takes up the full width of its parent container and forces a line break before and after the element.

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.