Skip to content
Related Articles

Related Articles

Semantic-UI Header Content

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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=
        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:

Semantic-UI Header Content

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=
        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=
         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>


Output:

Semantic-UI Header Content

Semantic-UI Header Content

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!