--- layout : 'default' css : 'guide' title : 'Introduction' description : 'Getting to know Semantic UI' type : 'Semantic' --- <%- @partial('header') %>

What's Different?

Descriptive not Prescriptive

Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Instead of using short-hand, or codified naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.

Tag ambivalent.

Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.

Powerful tools for expressing groups and collections.

In English it's much easier to say "There are three tall men" than "There is a tall man, a tall man and a tall man".

In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.

Portable and self-contained.

UI components in Semantic can be used individually, defining optional couplings with other components where their usage intersect. That means choosing to use semantic doesn't mean adopting an entire framework, or rewriting your codebase. You can pick and choose what elements you want to use.

Shared language, different implementations

Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.

Only the important stuff

Instead of giving every possible variation, or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads, or kitchen sink, just the stuff to get you started.

Next: Getting Started