Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Label Tag Type

Improve Article
Save Article
  • Last Updated : 01 Mar, 2022
Improve Article
Save Article

Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

A Semantic UI label is used to create meaningful content classifications. In this article, we will learn to use the Semantic-UI Label Tag Type of the Semantic UI framework. The Semantic-UI Label Tag Type is used to add a label as a tag to the element.

Semantic-UI Label Tag Type Class:

  • tag: This class is used to create a label as a tag.

Syntax:

<a class="ui tag label"> Content... </a>

Example 1: This example describes the uses of Semantic-UI Label Tag Type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Label Tag Type
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Label Tag Type</h3>
  
        <div class="ui tag label">
            <i class="desktop icon"></i> Desktop
        </div>
        <div class="ui tag label">
            <i class="download icon"></i> Download
        </div>
        <div class="ui tag label">
            <i class="headphones icon"></i> Headphones
        </div>
        <div class="ui tag label">
            <i class="keyboard icon"></i> Keyboard
        </div>
    </div>
</body>
  
</html>


Output:

Example 2: This example describes the uses of Semantic-UI Label Tag Type with color and size variations.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Label Tag Type
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Label Tag Type</h3>
  
        <div class="ui green tag small label">
            <i class="desktop icon"></i> Desktop
        </div>
        <div class="ui olive tag label">
            <i class="download icon"></i> Download
        </div>
        <div class="ui brown tag large label">
            <i class="headphones icon"></i> Headphones
        </div>
        <div class="ui teal tag big label">
            <i class="keyboard icon"></i> Keyboard
        </div>
    </div>
</body>
  
</html>


Output:

Reference: https://semantic-ui.com/elements/label.html#tag


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!