Semantic-UI | Header Last Updated : 11 May, 2020 Comments Improve Suggest changes Like Article Like Report Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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 they can be used with text, Icons and many more. Let's see some example of Semantic-UI Headers. Example 1: In this example, we will see the different kinds of page headers. 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> <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> <h6 class="ui header">Sixth header</h6> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html> Output: Example 2: In this example, we will see the icon as a header. 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> <div class="ui container"> <h1>Icon Header</h1> <h2 class="ui center aligned icon header"> <i class="circular users icon"></i> Users </h2> <h2 class="ui center aligned icon header"> <i class="circular chess icon"></i> Chess </h2> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html> Output: Example 3: In this example, we will see header with description. 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> <div class="ui container"> <h2 class="ui header"> GeeksforGeeks <div class="sub header"> A Computer Science portal for Geeks. </div> </h2> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html> Output: Example 4: In this example, we will see header with 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> <div class="ui container"> <h2>Image as Header</h2> <div class="ui compact menu"> <h2 class="ui header"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200506112031/image211.jpg" /> <div class="content"> geeksforgeeks </div> </h2> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html> Output: Example 5: In this example, we will see header with icon. 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> <div class="ui container"> <h2>Header with Icon</h2> <h2 class="ui header"> <i class="users icon"></i> <div class="content"> Friend List <div class="sub header"> Only Private ones. </div> </div> </h2> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html> Output: Example 6: In this example, we will see block heading. 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> <div class="ui container"> <h2>Block Header</h2> <h3 class="ui block header"> Geeksforgeeks </h3> Learn anything related to computer Science. </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html> Output: Example 7: In this example, we will see floating header. 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> <div class="ui container"> <h2>Floating Header</h2> <div class="ui clearing segment"> <h3 class="ui right floated header"> Previous </h3> <h3 class="ui left floated header"> Next </h3> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html> Output: Note: You can also inverted header by adding class inverted to your segment and header. You can directly run these examples by clicking on Run on IDE. Comment More infoAdvertise with us Next Article Semantic-UI Header Types I iamsahil1910 Follow Improve Article Tags : Web Technologies CSS Semantic-UI Similar Reads Semantic UI 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 UIWhy Semantic UI?Semantic UI is 2 min read Introduction to Semantic UI 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.How to use Semantic UI ? Just google CDN semantic UI and you will get the CDN link for 2 min read Semantic-UI ButtonSemantic-UI | ButtonsSemantic 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 can be used directly by CDN. There are different types of buttons in Semantic UI. 3 min read Semantic-UI Button TypesSemantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. In this article, we will learn about the different kinds of buttons. The butto 3 min read Semantic-UI Button GroupsSemantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Button Group offers categorized button group which allow to group 2 min read Semantic-UI Button ContentSemantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Button Content offers conditions between buttons like delete or Sa 2 min read Semantic-UI Button StatesSemantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks. Semantic UI Button Group offers status of the button, if you want to cr 1 min read Semantic-UI Button VariationsSemantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks. Semantic UI Button Group offers variation of button, there are Social b 4 min read Semantic-UI Button Group VariationsSemantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Button Group also offers a group variation of buttons, there are I 3 min read Semantic-UI | Container Semantic UI open-source framework provides a container which helps to limit content up to greatest width. The framework uses jQuery and CSS to create interactive user interfaces. It is very much similar to bootstrap usage and has different elements for creating page structure of any website. Example 4 min read Semantic-UI DividerSemantic-UI | DividerSemantic UI is an open-source framework available for building nice and flexible user interfaces using CSS and jQuery. It is very much similar to bootstrap having different elements for website creation. It majorly uses classes to add styles to different elements of HTML. Divider helps in visually d 2 min read Semantic-UI Divider TypesSemantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. In terms of user-friendliness, Semantic UI is better than Bootstrap styling. Top companies like Snapchat, Accenture hav 4 min read Semantic-UI Divider VariationsSemantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. It uses predefined CSS and jQuery to incorporate different frameworks. A divider is generally used to divide the conten 3 min read Semantic-UI | Flag Semantic UI open-source framework provides classes that are used to show flags of different countries. The framework is very much similar to bootstrap usage and has many elements for creating amazing interactive interfaces for websites. Classes are added to elements for adding styles. Example: The f 5 min read Semantic-UI HeaderSemantic-UI | HeaderSemantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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 they can 3 min read Semantic-UI Header TypesSemantic 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 3 min read Semantic-UI Header ContentSemantic 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 2 min read Semantic-UI Header StatesSemantic UI offers many components for users to design their interface. The Header component offers us different types of headers, different types of content holding headers, states of header in different variations. In this article, we will learn about the Semantic UI Header States. These states ar 1 min read Semantic-UI Header VariationsSemantic UI offers many components for users to design their interface. It offers us different types of headers, different types of content holding headers, states of header in different variations. In this article, we will learn about the Semantic UI Header Variations. Header variations have many v 3 min read Semantic-UI | Icon Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is very much similar to bootstrap usage to make the website more amazing. It uses classes to add styles to the HTML el 3 min read Semantic-UI Icon Set 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 and responsive. An icon is a glyph used to represent something else. Semantic UI provi 3 min read Semantic-UI ImageSemantic-UI | ImagesSemantic 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.There are different styles of putting imag 2 min read Semantic-UI Image TypesSemantic 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 various different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style images. It offers images of d 3 min read Semantic-UI Image StatesSemantic-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 various different elements to use to make your website look more amazing. Semantic-UI provides us with a very easy way to style images instead of using long 2 min read Semantic-UI Image VariationsSemantic 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 has a bunch of components for user interface design. One of them is “imag 4 min read Semantic-UI Image GroupsSemantic 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 provides us with a very easy way to style images. It offers images in dif 2 min read Like