Semantic-UI Subheader Header Content

Last Updated : 22 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Semantic-UI has really cool headers that can be used with Text, Icons, and many more.

A header provides a short summary of the content. Semantic-UI has really cool headers that can be used with Text, Icons, and many more. Semantic UI has different types of header variations such as Page headers, Content headers, Icon headers, and Subheader headers. In this article, we will learn about the subheader header in Semantic UI.

Sub Header is a Header element that is formatted to smaller or de-emphasized content. To convert a header to a subheader in Semantic UI, we use the .sub class along with .ui and .header classes. The .sub class converts Semantic UI header to subheader by de-emphasizing content using a smaller font. The .sub class can be used on <div>, <span> and <h1> to <h6> element.

Semantic UI subheader header class:

sub: The .sub class converts the header element to the sub header by making the font size smaller.

Syntax:

<h2 class="ui header">
    ...content
    <div class="ui sub header">
        ...Content
    </div>
</h2>

Example 1: This example demonstrates a comparison between a basic header and subheader in Semantic UI.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body style="padding: 30px;"> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <strong>Semantic UI subheader header</strong> 
        <br /><br /> 
    </center> 
    <div class="ui header"> 
        Geeksforgeeks header 
    </div> 
    <div class="ui sub header"> 
        Geeksforgeeks subheader 
    </div> 
        
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
        integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</body> 
  
</html> 

Output:

Output

Example 2: This example demonstrates a subheader in Semantic UI by using <span>, <div> and <h1> to <h6> element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body style="padding: 30px;"> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <strong>Semantic UI subheader header</strong> 
        <br /><br /> 
    </center> 
    <div class="ui sub header"> 
        div element Geeksforgeeks subheader 
    </div> 
    <span class="ui sub header"> 
        span element Geeksforgeeks subheader 
    </span> 
    <h1 class="ui sub header"> 
        h1 element Geeksforgeeks subheader 
    </h1> 
    <h2 class="ui sub header"> 
        h2 element Geeksforgeeks subheader 
    </h2> 
    <h3 class="ui sub header"> 
        h3 element Geeksforgeeks subheader 
    </h3> 
    <h4 class="ui sub header"> 
        h4 element Geeksforgeeks subheader 
    </h4> 
    <h5 class="ui sub header"> 
        h5 element Geeksforgeeks subheader 
    </h5> 
    <h6 class="ui sub header"> 
        h6 element Geeksforgeeks subheader 
    </h6> 
  
        
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
        integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</body> 
  
</html> 