HTML (HyperText Markup Language) — основна мова розмітки для створення веб-сторінок. Вона структурує контент і визначає його семантику.
CSS (Cascading Style Sheets) використовується для опису візуальної презентації HTML-документів. Вона відповідає за макет, кольори, шрифти та інші стилістичні аспекти.
Ми розглянемо найкращі практики, які допоможуть створювати чистий, семантичний та ефективний HTML-код.
Doctype визначає стандарт, за яким браузер буде рендерити ваш документ. Це перший рядок у вашому HTML-документі.
<!DOCTYPE html>
Атрибут lang в HTML вказує мову вмісту елемента. Це важливо для доступності та SEO.
Приклад використання:
<html lang="uk"></html>
Тег <title> важливий для SEO та користувацького досвіду. Він відображається у вкладці браузера та результатах пошуку.
<title>Інформація про веб-розробку та дизайн</title>
Meta теги допомагають пошуковим системам краще розуміти ваш контент.
<meta
name="description"
content="Блог про веб-розробку та дизайн, присвячений створенню веб-сайтів."
/>
<meta name="keywords" content="веб-дизайн, веб-розробка" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Розділення сторінки на основні секції робить код чистішим та легшим для читання.
<header>
<!-- Контент заголовка -->
</header>
<main>
<!-- Основний контент -->
</main>
<footer>
<!-- Контент підвалу -->
</footer>
HTML відповідає за контент, а CSS — за його візуальне представлення. Не використовуйте inline стилі.
<p style="color:#abc; font-size:14px; font-family:arial,sans-serif;">
Я не хочу розділяти контент від презентації
</p>
<p class="intro">Я хочу розділити контент від презентації</p>
/* styles.css */
.intro {
color: #abc;
font-size: 14px;
font-family: Arial, sans-serif;
}
:root {
--text-color: #abc;
--text-size: 1rem;
--text-font: Arial, sans-serif;
}
.intro {
color: var(--text-color);
font-size: var(--text-size);
font-family: var(--text-font);
}
Мінімізація CSS зменшує розмір файлів, а об'єднання зменшує кількість HTTP-запитів, що прискорює завантаження сторінки.
Як і CSS, мінімізуйте та об'єднуйте JS файли. Розміщуйте їх внизу документа перед закриваючим тегом </body>.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Приклад сторінки</title>
<link rel="stylesheet" href="styles.min.css" />
</head>
<body>
<!-- Контент сторінки -->
<script src="scripts.min.js"></script>
</body>
</html>
Використовуйте <h1> до <h6> для позначення ієрархії контенту, що допомагає SEO та доступності.
<h1>Головний заголовок</h1>
<section>
<h2>Заголовок частини сторінки</h2>
<article>
<h3>Заголовок ще однієї частини
</article>
</section>
h1 один раз на сторінціТег h1 згідно з SEO-рекомандаціями має бути використаний один раз
Використовуйте семантичні елементи, такі як <em>, <strong>, <p>, <ul>, <ol>, <dl> тощо.
<p>Це абзац тексту.</p>
<ul>
<li>Пункт списку</li>
<li>Ще один пункт</li>
</ul>
<em>Виділений текст</em>
<strong>Сильніше виділений текст</strong>
div для всьогоВикористовуйте <div> лише тоді, коли немає більш семантичного елемента.
div
<div class="container">
<div class="row">
<div class="col">
<!-- Контент -->
</div>
</div>
</div>
<article class="container">
<section class="row">
<div class="col">
<!-- Контент -->
</div>
</section>
</article>
<header>
<!-- Контент заголовка -->
<nav>
<!-- Навігація -->
</nav>
</header>
<main>
<!-- Основний контент -->
<section>
<!-- Секція контенту -->
</section>
</main>
<footer>
<!-- Контент підвалу -->
</footer>
для навігації
Семантичний та доступний спосіб створення навігаційних меню.
<nav>
<ul id="main_nav">
<li><a href="#" class="active">Головна</a></li>
<li><a href="#">Про нас</a></li>
<li><a href="#">Портфоліо</a></li>
<li><a href="#">Послуги</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</nav>
#main_nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 10px;
}
#main_nav li a {
text-decoration: none;
padding: 10px 15px;
background-color: #333;
color: #fff;
border-radius: 5px;
}
#main_nav li a.active,
#main_nav li a:hover {
background-color: #555;
}
Відповідність стандартам W3C включає закриття всіх тегів.
<div id="test">
<img src="images/sample.jpg" alt="зразок" />
<a href="#" title="тест">тест</a>
<p>якийсь зразок тексту</p>
</div>
Нижній регістр покращує читабельність та відповідає стандартам.
<DIV>
<img src="images/Sample.jpg" alt="зразок" />
<a href="#" title="ТЕСТ">тест</a>
<p>якийсь зразок тексту</p>
</DIV>
<div id="test">
<img src="images/sample.jpg" alt="зразок" />
<a href="#" title="тест">тест</a>
<p>якийсь зразок тексту</p>
</div>
Атрибут alt забезпечує доступність та SEO покращення.
<img id="logo" src="images/bgr_logo.png" />
<img id="logo" src="images/bgr_logo.png" alt="bgr_logo.png" />
<img id="logo" src="images/bgr_logo.png" alt="Some Company Logo" />
Атрибут title покращує доступність, коли використовується правильно.
<a href="http://blog.com/all-articles" title="Натисніть тут">Натисніть тут.</a>
<a href="http://blog.com/all-articles" title="Список усіх статей"
>Натисніть тут.</a
>
Полегшує розуміння та доступність форм.
<fieldset>
<legend>Особисті дані</legend>
<label for="name">Ім'я</label>
<input type="text" id="name" name="name" />
<label for="email">Електронна пошта</label>
<input type="email" id="email" name="email" />
<label for="subject">Тема</label>
<input type="text" id="subject" name="subject" />
<label>Повідомлення
<textarea name="message" rows="5"></textarea>
</label>
</fieldset>
Забезпечує адаптивність зображень на різних пристроях.
<img
src="small.jpg"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
alt="Приклад адаптивного зображення"
/>
Регулярна валідація допомагає знаходити та виправляти помилки.
Чистий та добре відформатований код покращує читабельність та підтримку. Використовуйте інструменти автоматичного форматування, наприклад, Prettier.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Консистентне форматування</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Вітаємо!</h1>
</header>
<main>
<p>Це приклад добре відформатованого HTML-коду.</p>
</main>
<footer>
<p>© Some company</p>
</footer>
</body>
</html>
Коментарі повинні пояснювати складну логіку, а не кожен рядок HTML.
<!-- Початок заголовка -->
<header>
<!-- Логотип -->
<img src="logo.png" alt="Логотип" />
<!-- Навігація -->
<nav>
<!-- Посилання на головну -->
<a href="#">Головна</a>
</nav>
</header>
<header>
<img src="logo.png" alt="Логотип" />
<nav>
<a href="#">Головна</a>
</nav>
</header>
Open Graph покращує представлення вашого сайту у соціальних мережах.
<meta property="og:title" content="Веб-розробка та дизайн" />
<meta
property="og:description"
content="Блог про веб-розробку та дизайн, присвячений створенню веб-сайтів."
/>
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com" />
Дотримання стилю Google покращує якість та консистентність вашого коду. https://google.github.io/styleguide/htmlcssguide.html
Перейдемо до найкращих практик CSS для створення ефективного та підтримуваного стилю.
Зберігайте стилі в окремих файлах для покращення організації та кешування.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Зовнішній CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p>Приклад використання зовнішнього CSS.</p>
</body>
</html>
Використовуйте методології як BEM (Block, Element, Modifier) для покращення структурування.
/* Блок */
.button {
}
/* Елемент */
.button__icon {
}
/* Модифікатор */
.button--primary {
}
Flexbox спрощує створення гнучких та адаптивних макетів.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="container">
<div>Елемент 1</div>
<div>Елемент 2</div>
<div>Елемент 3</div>
</div>
CSS Grid дозволяє створювати складні двовимірні макети.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
<div class="grid-container">
<div>Стовпець 1</div>
<div>Стовпець 2</div>
<div>Стовпець 3</div>
</div>
CSS Subgrid дозволяє вкладати сітки для складних макетів.
.grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
}
.item {
display: grid;
grid-column: 2 / 7;
grid-row: 2 / 4;
grid-template-columns: subgrid;
grid-template-rows: repeat(3, 80px);
}
Створюйте сайти, які добре виглядають на різних пристроях за допомогою медіа-запитів.
@media (min-width: 600px) {
.container {
flex-direction: column;
}
}
CSS змінні покращують керованість та повторне використання стилів.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-font: Arial, sans-serif;
}
.button {
background-color: var(--primary-color);
color: #fff;
font-family: var(--text-font);
}
.button-secondary {
background-color: var(--secondary-color);
color: #fff;
}
Використання !important ускладнює підтримку коду. Уникайте його, де це можливо.
.button {
background-color: red !important;
}
/* Збільшення специфічності замість використання !important */
.navbar .button {
background-color: red;
}
/* Збільшення специфічності замість використання !important */
.navbar {
.button {
background-color: red;
}
}
Мінімізуйте CSS файли, уникайте зайвих селекторів та використовуйтесь сучасні техніки.
Ctrl + Shift + J в Chrome для виявлення не використовуваних стилів.
Використовуйте rem (та за потреби em) для гнучких та адаптивних розмірів шрифтів.
html {
font-size: 16px;
}
body {
font-size: 1rem; /* 16px */
}
h1 {
font-size: 2em; /* 32px */
}
Використовуйте достатній контраст, семантичні елементи та підтримуйте навігацію клавіатурою.
.text {
color: #333;
background-color: #fff;
}
Трансформації та анімації можуть покращити UX, але не повинні заважати користувачам.
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #555;
}
Забезпечте швидке завантаження та якість на різних пристроях.
<img
src="small.jpg"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
alt="Приклад адаптивного зображення"
/>
Комбінування Flexbox та Grid дозволяє створювати складні макети з мінімальними зусиллями.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
}
.sidebar {
display: flex;
flex-direction: column;
gap: 10px;
}
<div class="container">
<aside class="sidebar">
<button>Кнопка 1</button>
<button>Кнопка 2</button>
</aside>
<main>
<p>Основний контент.</p>
</main>
</div>
Використовуйте властивості як CSS Variables, Custom Properties, Grid, Flexbox для покращення коду.
:root {
--main-bg-color: #f0f0f0;
}
body {
background-color: var(--main-bg-color);
}
Забезпечте підтримку темної теми за допомогою медіа-запитів.
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
Інструменти як PostCSS, Autoprefixer, та інші можуть покращити робочий процес.
npx autoprefixer styles.css -o styles.prefixed.css
Використовуйте коментарі для пояснення складних частин стилів.
/* Основні стилі для кнопок */
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
}
Розбивайте CSS на модулі для покращення організації та підтримки.
styles/ ├── base/ │ ├── reset.css │ └── typography.css ├── components/ │ ├── button.css │ └── navbar.css ├── layout/ │ ├── grid.css │ └── header.css └── main.css
Інструменти як Webpack, Gulp або Parcel можуть автоматизувати процеси зборки та оптимізації.
const gulp = require("gulp");
const cssnano = require("gulp-cssnano");
gulp.task("minify-css", () => {
return gulp.src("styles/*.css").pipe(cssnano()).pipe(gulp.dest("dist/css"));
});
Фреймворки як Bootstrap, Tailwind CSS можуть пришвидшити розробку та забезпечити консистентність.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Tailwind CSS Приклад</title>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body class="bg-gray-100">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Натисни мене
</button>
</body>
</html>
PostCSS дозволяє використовувати сучасні CSS функції та плагіни для автоматизації.
// postcss.config.js
module.exports = {
plugins: [
require("autoprefixer"),
require("cssnano")({
preset: "default",
}),
],
};
Розглянемо інструменти, які допомагають у розробці HTML та CSS.