Semantic-UI Header Content

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.

Semantic-UI header provides a short summary of content and it's can contain 3 content Image, Icon, and Subheader. The Semantic-UI Content component is important like without the header/summary the content finding procedure will kill lots of times. In this article, we will now about the different content of the header

Semantic-UI Header Content: In the header of semantic UI header we have 3 content as mentioned and described below.

Image: This is used to contain an image.
Icon: This is used to contain an icon.
Subheader: This is used to contain subheaders.

Syntax:

<element class="ui header">
  <img src="...">
  <i class="...icon"></i>
  <element class="ui subheader">
  ...
  </element >
</element >

Example 1: The below example illustrates the Semantic-UI Header Content:

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>
  <center>
    <h1 class="ui header green">
      GeeksforGeeks
    </h1>
    <strong>
      Semantic-UI Header Content
    </strong>
  </center>
  <br>
  <div class="ui segment">
    <strong class="ui header">
      Geeksforgeeks:<sub>header</sub>
    </strong>
    
<p>
        Free Tutorials, Millions of Articles, Live,
        Online and Classroom Courses ,Frequent Coding
        Competitions ,Webinars by Industry Experts, 
        Internship opportunities and Job Opportunities.
    </p>


    <br>
    <i class="book icon"></i>
    <strong class="ui subheader">
      A Computer Science Portal for 
      Geeks<sub>Subheader</sub>
    </strong>
  </div>
</body>

</html>

Output:

Example 2: The below example illustrates the Semantic-UI Header Content with the image:

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>
  <center>
    <h1 class="ui header green">
      GeeksforGeeks
    </h1>
    <strong>
      Semantic-UI Header Content
    </strong>
  </center>
  <br>
  <div class="ui segment">
    <strong class="ui header">
      Geeksforgeeks:<sub>header</sub>
    </strong>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220119210822/GFG-100x100.jpg"
         class="ui circular image">
    
<p>
        Free Tutorials, Millions of Articles, Live,
        Online and Classroom Courses ,Frequent Coding
        Competitions ,Webinars by Industry Experts, 
        Internship opportunities and Job Opportunities.
    </p>


    <br>
    <i class="book icon"></i>
    <strong class="ui subheader">
      A Computer Science Portal for 
      Geeks<sub>Subheader</sub>
    </strong>
  </div>
</body>

</html>