Semantic HTML

Semantic HTML

Semantic HTML gives browsers and assistive technologies meaningful information about the structure and purpose of content before Bootstrap adds visual styling.

Core concept

Explain main, nav, header, footer, section, article, headings, lists, buttons, anchors, forms, and tables. Show how Bootstrap classes can be applied without changing those semantics.

Using it in a real interface

Compare a navigation link with an action button and a data table with a grid of divs. Explain why the element choice affects keyboard behavior and accessibility.

Implementation notes

Do not choose elements based solely on how they look by default. Bootstrap can style a semantic element to match the required design.