What is Semantic-UI Header Content?

In this article, we will learn Semantic-UI Header Content,This free Semantic-UI tutorial for complete beginners will help you learn Semantic-UI from scratch.

Semantic-UI Header Content - ❤️Semantic-UI Tutorials In 2024

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">
      w3wiki
    </h1>
    <strong>
      Semantic-UI Header Content
    </strong>
  </center>
  <br>
  <div class="ui segment">
    <strong class="ui header">
      w3wiki:<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 
      Beginner<sub>Subheader</sub>
    </strong>
  </div>
</body>
 
</html>

Output:

Semantic-UI Header Content

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">
      w3wiki
    </h1>
    <strong>
      Semantic-UI Header Content
    </strong>
  </center>
  <br>
  <div class="ui segment">
    <strong class="ui header">
      w3wiki:<sub>header</sub>
    </strong>
    <img src=
"https://media.w3wiki.net/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 
      Beginner<sub>Subheader</sub>
    </strong>
  </div>
</body>
 
</html>

Output:

Semantic-UI Header Content

Reference: https://semantic-ui.com/elements/header.html