Solice UI
Back to the curriculum

Chapter 2 · HTML & Semantics

Semantic structure

Semantic HTML says what content is. A navigation area is navigation, a button performs an action, and a heading names a section even if CSS later makes them look very different.

Beginner · Lesson 2 of 6 in this chapter

Meaning improves more than accessibility

Browsers provide useful keyboard and form behavior for native elements. Search engines can understand page regions, and developers can read the markup without decoding generic containers.

Use generic containers only when needed

A div or span is appropriate when no meaningful HTML element fits. The goal is not to replace every container, but to choose a native role whenever the content or interaction already has one.

Building site navigation

  1. A nav element identifies the group as navigation.
  2. Links take visitors to real destinations.
  3. The current link uses text or state that remains understandable without color alone.
  • Choose elements by purpose, not visual shape.
  • Native elements bring useful behavior with them.
  • Generic containers are tools, not the default answer for every role.