Базовые элементы и теги
Тема дорожной карты · Frontend разработчик
HTML-элементы — это отдельные строительные блоки HTML5-документа, каждый из которых определяется открывающим тегом, необязательным содержимым и закрывающим тегом и в совокупности описывает структуру и смысл содержимого веб-страницы. Блочные элементы — <div>, <p>, <h1>–<h6>, <ul>, <ol>, <table> — формируют структурный скелет документа, тогда как строчные элементы — <span>, <a>, <strong>, <em>, <img> — встраиваются в текстовый поток. HTML5 ввёл семантические элементы — <article>, <section>, <nav>, <aside>, <header>, <footer>, <figure>, <main> — заменяющие универсальные обёртки <div> элементами, чьи имена передают назначение браузерам, поисковым системам и экранным читалкам. Твёрдые знания HTML-элементов, их значений CSS display по умолчанию, ARIA-ролей и допустимого вложения — необходимая база для эффективной стилизации через CSS3, работы с DOM API в JavaScript и построения доступных деревьев компонентов React.
Как это работает
Базовые элементы и теги — семантическая структура страницы. Элементы описывают смысл, не вид: <article> — статья, <button> — кнопка, <nav> — навигация. Браузер строит DOM-дерево из разметки; CSS таргетит его селекторами; JavaScript манипулирует через DOM API. Семантическая разметка критична для SEO, accessibility (screen reader'ы её разбирают), поддерживаемости. Формы — <form>, инпуты (<input>, <select>, <textarea>), сабмит через HTTP без JS.
Когда применять
Используйте семантические HTML-элементы везде, где есть смысл — <button> вместо <div onclick>, <a> вместо роутинга в JS, <input type="email"> для email. Браузеры (и screen reader'ы, и поисковики) получают keyboard navigation, accessibility, SEO бесплатно. <div>/<span> — только как обёртки последнего средства. Запускайте Lighthouse accessibility-аудит регулярно.
Типичные ошибки
Ловушки Базовые элементы и теги: <div onclick> вместо <button> (нет клавиатуры, screen reader, focus management); пропущенный alt на изображениях (screen reader + SEO); инпуты без <label> (невозможно использовать с assistive tech); вложенный <a> в <a> (невалидный HTML, undefined behaviour); h1-h6 для визуального размера, а не иерархии документа. Браузеры много чинят за вас — это прячет баги от тестов, но не от реальных пользователей.