Learn Semantic-ui - 9 Code Examples & CST Typing Practice Test

Semantic UI is a front-end framework that uses human-friendly HTML to create responsive, themable, and component-rich web applications. It emphasizes semantic class names and intuitive structure for rapid development.

View all 9 Semantic-ui code examples →

Semantic UI Counter Example Semantic UI Menu Example Semantic UI Card Example Semantic UI Modal Example Semantic UI Tab Example Semantic UI Accordion Example Semantic UI Dropdown Example Semantic UI Progress Example Semantic UI Message Example

Learn SEMANTIC-UI with Real Code Examples

Updated Nov 23, 2025

Explain

Semantic UI uses descriptive class names for components and layouts, making HTML readable and maintainable.

It provides a responsive grid system, prebuilt UI elements, and integrated JavaScript behaviors.

Designed for developers and designers who want consistency and fast prototyping.

Core Features

Grid system with responsive breakpoints

UI components: buttons, menus, cards, modals, tables

Form elements with validation support

JavaScript plugins for interactive components

Theming and customizable CSS variables

Basic Concepts Overview

Grid: `.ui.grid`, `.column`, `.row`

Buttons: `.ui.button`, `.primary`, `.secondary`

Forms: `.ui.form` with inputs and validation

Menus: `.ui.menu`, `.item`, `.dropdown`

Modals and interactive components via JS plugins

Project Structure

index.html - main markup

src/ - custom styles or component overrides

js/ - optional Semantic JS behaviors

assets/ - images, fonts, media

node_modules/ - npm packages if used

Building Workflow

Include Semantic UI CSS & JS via CDN or npm

Use semantic classes in HTML for components

Apply grid layout for responsive structure

Initialize JS behaviors for interactivity

Customize themes with variables if needed

Difficulty Use Cases

Beginner: static layouts and basic components

Intermediate: forms, tables, dropdowns

Advanced: custom themes and interactive JS plugins

Expert: large dashboards or admin apps

Community: contribute themes or custom modules

Comparisons

More semantic than Bootstrap

Less utility-driven than Tailwind

Prebuilt JS behaviors unlike minimal frameworks

Readable HTML structure

Comprehensive component library

Versioning Timeline

2013 - Semantic UI initial release

2014 - Semantic UI 1.0

2015 - Component and theme expansions

2016-2020 - Minor updates and plugin improvements

2025 - Active maintenance primarily via Fomantic UI

Glossary

UI Component: prebuilt interactive element

Grid: layout system for responsive design

JS Plugin: interactive behavior (dropdown, modal)

Theming: customization of colors, fonts, variables

Semantic class: human-readable class name

Code Sample Descriptions

Semantic UI Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Counter</title>
</head>
<body class="ui container center aligned">
    <h2 class="ui header">Counter: <span id="count">0</span></h2>
    <div class="ui buttons">
        <button id="increment" class="ui primary button">+</button>
        <button id="decrement" class="ui red button">-</button>
        <button id="reset" class="ui grey button">Reset</button>
    </div>
    <br><br>
    <button id="theme-btn" class="ui yellow button">Switch Theme</button>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const body = document.body;

        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        body.classList.toggle('inverted', isDark);
        };
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
</body>
</html>

Demonstrates a simple counter layout using Semantic UI classes and minimal JavaScript for interactivity.

Let’s Try →

Semantic UI Menu Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Menu</title>
</head>
<body class="ui container">
    <div class="ui menu">
        <a class="active item">Home</a>
        <a class="item">About</a>
        <a class="item">Contact</a>
        <div class="right menu">
        <a class="item">Login</a>
        </div>
    </div>
</body>
</html>

Demonstrates a responsive navigation menu using Semantic UI menu classes.

Let’s Try →

Semantic UI Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Card</title>
</head>
<body class="ui container">
    <div class="ui card">
        <div class="image">
        <img src="https://via.placeholder.com/300">
        </div>
        <div class="content">
        <a class="header">Card Title</a>
        <div class="description">Example card content using Semantic UI.</div>
        </div>
        <div class="extra content">
        <a><i class="user icon"></i> 10 Friends</a>
        </div>
    </div>
</body>
</html>

Shows a card layout using Semantic UI card classes.

Let’s Try →

Semantic UI Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Modal</title>
</head>
<body class="ui container center aligned">
    <button class="ui button" id="openModal">Open Modal</button>
    <div class="ui modal">
        <div class="header">Modal Header</div>
        <div class="content">
        <p>This is a Semantic UI modal example.</p>
        </div>
        <div class="actions">
        <div class="ui approve button">OK</div>
        <div class="ui cancel button">Cancel</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        document.getElementById('openModal').onclick = () => {
        $('.ui.modal').modal('show');
        };
    </script>
</body>
</html>

Demonstrates a modal popup using Semantic UI modal classes.

Let’s Try →

Semantic UI Tab Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Tabs</title>
</head>
<body class="ui container">
    <div class="ui top attached tabular menu">
        <a class="active item" data-tab="first">Tab 1</a>
        <a class="item" data-tab="second">Tab 2</a>
        <a class="item" data-tab="third">Tab 3</a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="first">Content for Tab 1</div>
    <div class="ui bottom attached tab segment" data-tab="second">Content for Tab 2</div>
    <div class="ui bottom attached tab segment" data-tab="third">Content for Tab 3</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        $('.menu .item').tab();
    </script>
</body>
</html>

Shows a tabbed interface using Semantic UI tab classes.

Let’s Try →

Semantic UI Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Accordion</title>
</head>
<body class="ui container">
    <div class="ui styled fluid accordion">
        <div class="title"><i class="dropdown icon"></i> Section 1</div>
        <div class="content"><p>Content for section 1</p></div>
        <div class="title"><i class="dropdown icon"></i> Section 2</div>
        <div class="content"><p>Content for section 2</p></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        $('.ui.accordion').accordion();
    </script>
</body>
</html>

Demonstrates an accordion component using Semantic UI.

Let’s Try →

Semantic UI Dropdown Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Dropdown</title>
</head>
<body class="ui container">
    <div class="ui dropdown">
        <div class="text">Select Option</div>
        <i class="dropdown icon"></i>
        <div class="menu">
        <div class="item">Option 1</div>
        <div class="item">Option 2</div>
        <div class="item">Option 3</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
</html>

Shows a dropdown menu using Semantic UI dropdown classes.

Let’s Try →

Semantic UI Progress Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Progress</title>
</head>
<body class="ui container">
    <div class="ui indicating progress" data-percent="50">
        <div class="bar" style="width: 50%;"></div>
        <div class="label">Progress</div>
    </div>
</body>
</html>

Demonstrates a progress bar using Semantic UI classes.

Let’s Try →

Semantic UI Message Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Message</title>
</head>
<body class="ui container">
    <div class="ui positive message">
        <i class="close icon"></i>
        <div class="header">Success</div>
        <p>This is a Semantic UI success message.</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        $('.message .close').on('click', function() {
        $(this).closest('.message').transition('fade');
        });
    </script>
</body>
</html>

Shows a dismissable message using Semantic UI message classes.

Let’s Try →

Frequently Asked Questions about Semantic-ui

What is Semantic-ui?

What are the primary use cases for Semantic-ui?

Corporate websites and web apps. Admin dashboards and data-heavy apps. Prototyping user interfaces quickly. Design systems with consistent component patterns. Mobile-responsive web applications

What are the strengths of Semantic-ui?

Readable and semantic HTML. Comprehensive UI component library. Easy integration of JavaScript behaviors. Responsive design and mobile-first support. Customizable themes and variables

What are the limitations of Semantic-ui?

Relatively large CSS/JS bundle if not optimized. Smaller community than Bootstrap or Tailwind. Learning curve due to verbose class names. Updates less frequent than major frameworks. Less utility-first, less control over atomic styling

How can I practice Semantic-ui typing speed?

CodeSpeedTest offers 9+ real Semantic-ui code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Semantic UI Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Counter</title>
</head>
<body class="ui container center aligned">
    <h2 class="ui header">Counter: <span id="count">0</span></h2>
    <div class="ui buttons">
        <button id="increment" class="ui primary button">+</button>
        <button id="decrement" class="ui red button">-</button>
        <button id="reset" class="ui grey button">Reset</button>
    </div>
    <br><br>
    <button id="theme-btn" class="ui yellow button">Switch Theme</button>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const body = document.body;

        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        body.classList.toggle('inverted', isDark);
        };
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
</body>
</html>

Demonstrates a simple counter layout using Semantic UI classes and minimal JavaScript for interactivity.

Let’s Try →

Semantic UI Menu Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Menu</title>
</head>
<body class="ui container">
    <div class="ui menu">
        <a class="active item">Home</a>
        <a class="item">About</a>
        <a class="item">Contact</a>
        <div class="right menu">
        <a class="item">Login</a>
        </div>
    </div>
</body>
</html>

Demonstrates a responsive navigation menu using Semantic UI menu classes.

Let’s Try →

Semantic UI Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Card</title>
</head>
<body class="ui container">
    <div class="ui card">
        <div class="image">
        <img src="https://via.placeholder.com/300">
        </div>
        <div class="content">
        <a class="header">Card Title</a>
        <div class="description">Example card content using Semantic UI.</div>
        </div>
        <div class="extra content">
        <a><i class="user icon"></i> 10 Friends</a>
        </div>
    </div>
</body>
</html>

Shows a card layout using Semantic UI card classes.

Let’s Try →

Semantic UI Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Modal</title>
</head>
<body class="ui container center aligned">
    <button class="ui button" id="openModal">Open Modal</button>
    <div class="ui modal">
        <div class="header">Modal Header</div>
        <div class="content">
        <p>This is a Semantic UI modal example.</p>
        </div>
        <div class="actions">
        <div class="ui approve button">OK</div>
        <div class="ui cancel button">Cancel</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        document.getElementById('openModal').onclick = () => {
        $('.ui.modal').modal('show');
        };
    </script>
</body>
</html>

Demonstrates a modal popup using Semantic UI modal classes.

Let’s Try →

Semantic UI Tab Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Tabs</title>
</head>
<body class="ui container">
    <div class="ui top attached tabular menu">
        <a class="active item" data-tab="first">Tab 1</a>
        <a class="item" data-tab="second">Tab 2</a>
        <a class="item" data-tab="third">Tab 3</a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="first">Content for Tab 1</div>
    <div class="ui bottom attached tab segment" data-tab="second">Content for Tab 2</div>
    <div class="ui bottom attached tab segment" data-tab="third">Content for Tab 3</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        $('.menu .item').tab();
    </script>
</body>
</html>

Shows a tabbed interface using Semantic UI tab classes.

Let’s Try →

Semantic UI Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Accordion</title>
</head>
<body class="ui container">
    <div class="ui styled fluid accordion">
        <div class="title"><i class="dropdown icon"></i> Section 1</div>
        <div class="content"><p>Content for section 1</p></div>
        <div class="title"><i class="dropdown icon"></i> Section 2</div>
        <div class="content"><p>Content for section 2</p></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        $('.ui.accordion').accordion();
    </script>
</body>
</html>

Demonstrates an accordion component using Semantic UI.

Let’s Try →

Semantic UI Dropdown Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Dropdown</title>
</head>
<body class="ui container">
    <div class="ui dropdown">
        <div class="text">Select Option</div>
        <i class="dropdown icon"></i>
        <div class="menu">
        <div class="item">Option 1</div>
        <div class="item">Option 2</div>
        <div class="item">Option 3</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
</html>

Shows a dropdown menu using Semantic UI dropdown classes.

Let’s Try →

Semantic UI Progress Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Progress</title>
</head>
<body class="ui container">
    <div class="ui indicating progress" data-percent="50">
        <div class="bar" style="width: 50%;"></div>
        <div class="label">Progress</div>
    </div>
</body>
</html>

Demonstrates a progress bar using Semantic UI classes.

Let’s Try →

Semantic UI Message Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
    <title>Semantic UI Message</title>
</head>
<body class="ui container">
    <div class="ui positive message">
        <i class="close icon"></i>
        <div class="header">Success</div>
        <p>This is a Semantic UI success message.</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
    <script>
        $('.message .close').on('click', function() {
        $(this).closest('.message').transition('fade');
        });
    </script>
</body>
</html>

Shows a dismissable message using Semantic UI message classes.

Let’s Try →

Frequently Asked Questions about Semantic-ui

What is Semantic-ui?

What are the primary use cases for Semantic-ui?

Corporate websites and web apps. Admin dashboards and data-heavy apps. Prototyping user interfaces quickly. Design systems with consistent component patterns. Mobile-responsive web applications

What are the strengths of Semantic-ui?

Readable and semantic HTML. Comprehensive UI component library. Easy integration of JavaScript behaviors. Responsive design and mobile-first support. Customizable themes and variables

What are the limitations of Semantic-ui?

How can I practice Semantic-ui typing speed?

CodeSpeedTest offers 9+ real Semantic-ui code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Semantic-ui - 9 Code Examples & CST Typing Practice Test

Learn SEMANTIC-UI with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline

Glossary

Installation Setup

Environment Setup

Config Files

Cli Commands

Internationalization

Accessibility

Ui Styling

State Management

Data Management

Architecture

Rendering Model

Architectural Patterns

Real World Architectures

Design Principles

Scalability Guide

Migration Guide

Performance Notes

Security Notes

Monitoring Analytics

Code Quality

Practical Examples

Troubleshooting

Testing Guide

Deployment Options

Tools Ecosystem

Integrations

Productivity Tips

Challenges

Learning Path

Skill Improvement Plan

Interview Questions

Cheat Sheet

Books

Tutorials

Official Docs

Community Links

Community Support

Monetization

Future Roadmap

When Not To Use

Final Summary

Faq

Code Sample Descriptions

Semantic UI Counter Example

Semantic UI Menu Example

Semantic UI Card Example

Semantic UI Modal Example

Semantic UI Tab Example

Semantic UI Accordion Example

Semantic UI Dropdown Example

Semantic UI Progress Example

Semantic UI Message Example

Frequently Asked Questions about Semantic-ui

What is Semantic-ui?

What are the primary use cases for Semantic-ui?

What are the strengths of Semantic-ui?

What are the limitations of Semantic-ui?

How can I practice Semantic-ui typing speed?

Learn Other Programming Languages

Learn Semantic-ui - 9 Code Examples & CST Typing Practice Test

Learn SEMANTIC-UI with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline