Semantic-UI Header Types

Last Updated : 22 Apr, 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.

We will create a UI to show the different types of Headers. After creating this basic template you can work with different components of Semantic UI.

Semantic UI Header Types:

Page Headers: In this class, headers may be oriented to give the hierarchy of a section in the context of the page
Content Headers: In this class, headers may be oriented to give the importance of a section in the context of the content that surrounds it.
Icon Headers: In this class, a header can be formatted to emphasize an icon.
Sub Headers: In this class, headers may be formatted to label smaller or de-emphasized content.

Syntax:

<div class="ui Header-Types header">  
....
</div>

Example 1: This example demonstrates the Page Headers Semantic UI Header Types class.

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" />
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </head>
    <body>
        <center><br>
            <h1 class="ui green header">
                GeeksforGeeks
            </h1>
            <h3>Semantic UI Header Types</h3>
            <hr>
            <div class="ui container">
                <h1 class="ui header">First header</h1>
                <h2 class="ui header">Second header</h2>
                <h3 class="ui header">Third header</h3>
                <h4 class="ui header">Fourth header</h4>
                <h5 class="ui header">Fifth header</h5>
            </div>
            <hr>
        </center>
    </body>
</html>

Output:

Example 2: This example demonstrates the Content Headers Semantic UI Header Types class.

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" />
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </head>
    <body>
        <center><br>
            <h1 class="ui green header">
                GeeksforGeeks
            </h1>
            <h3>Semantic UI Header Types - Content Headers</h3>
            <hr>
            <div class="ui size vertical segment">
                <h1 class="ui huge header">First header</h1>
                <h2 class="ui large header">Second header</h2>
                <h3 class="ui medium header">Third header</h3>
                <h4 class="ui small header">Fourth header</h4>
                <h5 class="ui tiny header">Fifth header</h5>
            </div>
            <hr>
        </center>
    </body>
</html>

Output:

Example 3: This example demonstrates the Icon Headers Semantic UI Header Types class.

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" />
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </head>
    <body>
        <center><br>
            <h1 class="ui green header">
                GeeksforGeeks
            </h1>
            <h3>Semantic UI Header Types - Icon Headers</h3>
            <hr>
            <div class="ui container">
                <h3 class="ui center aligned icon header">
                    <i class="circular users icon"></i>
                    Users
                </h3>
                <h3 class="ui center aligned icon header">
                    <i class="circular chess icon"></i>
                    Chess
                </h3>
            </div>
            <hr>
        </center>
    </body>
</html>

Output:

Example 4: This example demonstrates the Sub Headers Semantic UI Header Types class.

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" />
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </head>
    <body>
        <center><br>
            <h1 class="ui green header">
                GeeksforGeeks
            </h1>
            <h3>Semantic UI Header Types - Sub Headers</h3>
            <hr>
            <div class="ui horizontal list">
                <div class="item">
                    <i class="circular users icon"></i>
                    <div class="content">
                        <div class="ui sub header">Users</div>
                        Login/SignUp
                    </div>
                </div>
                <div class="item">
                    <i class="circular chess icon"></i>
                    <div class="content">
                        <div class="ui sub header">Chess</div>
                        Play
                    </div>
                </div>
            </div>
            <hr>
        </center>
    </body>
</html>