Зачем нужны семантические HTML-теги и какие можете привести примеры?

Семантические теги сообщают назначение содержимого: nav — навигация, main — основное содержание, button — действие, headings — иерархия заголовков.

Они помогают вспомогательным технологиям и дают ожидаемое поведение браузера. Для табличных данных используйте table, для перехода — a с href; визуальное оформление решает CSS. Не нужно оборачивать каждый блок в article или section без соответствующего смысла.