Semantic UI (original) (raw)

Last Updated : 13 Jun, 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. It uses a class to add CSS to the elements.

Semantic UI

**Why Semantic UI?

Semantic UI is becoming extremely popular due to the following reasons:

It offers a variety of components that can be used easily.
It is open source so has good community support.
It is easy to use and learn.
It provides an elegant look and makes UI more interactive with minimal effort.
It unpacks a variety of themes and CSS, JavaScript, and font files.
It provides a lightweight user experience.

Semantic UI

**Steps to Install Semantic UI

We can use Semantic UI in the following two ways.

**Method 1: Using CDN Link: In this method, we will add CDN links to the head section of the code without installing it.

**Method 2: The second way of using is the downloading min.css file of the Semantic UI whose link you can find on the semantic UI official site and use it directly and it works offline.

Now let's understand the working of Semantic UI using an example.

**Example: This example creates a simple Log In Form.

HTML `

Semantic UI

<script src=

"" title="undefined" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity=

"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">

Log In

Username

Password

Remember Me

<script>
    $('.ui.checkbox').checkbox();
</script>

**Output:

Semantic-UI