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

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

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.