semantic-ui
  1. semantic-ui-header
PreviousNext

Semantic UI Header - Semantic Elements

Semantic UI is a front-end development framework that uses semantic HTML and CSS classes to build responsive and modern user interfaces. One of the core components of Semantic UI is the header element, which is used to add a header section to any webpage. In this tutorial, we will explore the Semantic UI header element, its syntax, example, output, explanation, use, and important points.

Syntax

The syntax to create a Semantic UI header is as follows:

<div class="ui header">Header Content</div>

Example

Let's create a basic header using Semantic UI.

<div class="ui header">Welcome to My Website</div>
Try Playground

Sub Headers

Headers may be formatted to label smaller or de-emphasized content.

<div class="ui horizontal list">
  <div class="item">
    <img class="ui mini circular image" src="https://static.additionalsheet.com/images//others/lucy.jpg">
    <div class="content">
      <div class="ui sub header">Molly</div>
      Coordinator
    </div>
  </div>
  <div class="item">
    <img class="ui mini circular image" src="https://static.additionalsheet.com/images//others/josh.jpg">
    <div class="content">
      <div class="ui sub header">Elyse</div>
      Developer
    </div>
  </div>
  <div class="item">
    <img src="https://static.additionalsheet.com/images//others/alisa.jpg" class="ui mini circular image">
    <div class="content">
      <div class="ui sub header">Eve</div>
      Project Manager
    </div>
  </div>
</div>
Try Playground

Explanation

In Semantic UI, the header element is a container for header content that can be used to display a page's title, logo, navigation links, or any other important information. The .ui class indicates that this element is part of Semantic UI and the .header class styles the element as a header. The content inside the header can be customized as needed using various Semantic UI classes.

Use

Semantic UI header elements can be used to add a header section to any webpage. They can be used to display a page's title, logo, navigation links, or any other important information. The header can be customized using various Semantic UI classes to match the website's style and branding.

Important Points

  • The Semantic UI header element is a container for header content that can be used to display a page's title, logo, navigation links, or any other important information.
  • The .ui class indicates that this element is part of Semantic UI, and the .header class styles the element as a header.
  • The content inside the header can be customized as needed using various Semantic UI classes.

Summary

In this tutorial, we explored the Semantic UI header element, its syntax, example, output, explanation, use, and important points. Semantic UI headers can be used to display a website's title, logo, navigation links, or other important information. They can be customized with various Semantic UI classes to match the website's style and branding.

FlagIcon
Published on: