HTML та CSS: фундамент веб-розробки
HTML (HyperText Markup Language) визначає структуру та зміст веб-сторінки, а CSS (Cascading Style Sheets) відповідає за візуальне оформлення. Разом вони формують основу кожного вебсайту. HTML5 додав семантичні теги (header, nav, main, article, section, footer), мультимедіа (video, audio) та форми нового покоління. CSS3 розширив можливості анімаціями, градієнтами, Flexbox та Grid Layout.
| HTML-тег | Призначення | Замість |
|---|---|---|
| <header> | Шапка сайту або секції | <div class="header"> |
| <nav> | Навігаційне меню | <div class="nav"> |
| <main> | Основний контент сторінки | <div class="main"> |
| <article> | Самостійний блок контенту | <div class="article"> |
| <section> | Тематичний розділ | <div class="section"> |
| <footer> | Підвал сайту або секції | <div class="footer"> |
Семантичний HTML та доступність
Семантичний HTML використовує теги за їхнім значенням, а не лише для оформлення. Це покращує SEO (пошукові системи розуміють структуру), доступність (скрінрідери правильно озвучують контент) та підтримку коду. Заголовки H1-H6 створюють ієрархію: один H1 на сторінку, H2 для розділів, H3 для підрозділів. Атрибут alt у зображень описує картинку для скрінрідерів та SEO. Форми використовують label для зв'язку з полями введення. DOCTYPE html, мета-тег viewport та charset="UTF-8" -- обов'язкові елементи кожної сторінки.
CSS: каскад, Flexbox та Grid
Каскадність визначає пріоритет стилів: inline > id > class > tag. Специфічність рахується як (0,0,0,0): inline, id, class, tag. Box model складається з content, padding, border та margin; box-sizing: border-box включає padding та border у ширину. CSS-змінні (custom properties) через var(--color-primary) забезпечують єдиний стиль. Media queries (@media) адаптують макет під різні екрани. Підхід mobile-first починає з мобільної версії та додає стилі для більших екранів через min-width.
Flexbox -- одновимірний макет
- display: flex -- активує flex-контейнер
- justify-content -- вирівнювання по головній осі
- align-items -- вирівнювання по перпендикулярній
- gap -- відступ між елементами
- flex-wrap -- перенос на новий рядок
Grid -- двовимірний макет
- display: grid -- активує grid-контейнер
- grid-template-columns -- визначає стовпці
- grid-template-rows -- визначає рядки
- fr -- фракційна одиниця простору
- grid-area -- іменовані зони макету
За даними W3Techs (2026), 95.4% усіх вебсайтів використовують HTML та CSS як основу. Сучасний стандарт HTML5 підтримує семантичні елементи (header, nav, main, article), що покращують доступність та SEO. CSS Grid та Flexbox замінили float-based лейаути, а CSS Custom Properties (змінні) дозволяють створювати теми без препроцесорів. Container Queries — найновіша CSS-фіча, що дозволяє компонентам адаптуватися до розміру контейнера, а не лише viewport.
Responsive design будується на media queries (@media), відносних одиницях (rem, em, vw, vh, %) та CSS Grid/Flexbox. Mobile-first підхід — починати стилізацію з мобільної версії та додавати складність для більших екранів через min-width. Accessibility (a11y) в HTML: семантичні елементи, alt-текст для зображень, aria-атрибути для інтерактивних елементів, достатній контраст кольорів (мінімум 4.5:1 за WCAG 2.2).
Про тест
Тест «Основи HTML та CSS» містить 20 питань про семантичні теги, каскадність, специфічність, box model, Flexbox, Grid, media queries, адаптивну верстку та доступність.
Також рекомендуємо: JavaScript, React, Figma для розробників та UX/UI дизайн.