<![CDATA[ Artur Kvarchiia - freeCodeCamp.org ]]> https://www.freecodecamp.org/ukrainian/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Artur Kvarchiia - freeCodeCamp.org ]]> https://www.freecodecamp.org/ukrainian/news/ Eleventy Fri, 26 Jun 2026 09:47:22 +0000 60 <![CDATA[ Базовий шаблон HTML5: шаблонний код HTML для початку будь-якого проєкту ]]> шаблонний код, або просто шаблон — це розділи коду, які ]]> https://www.freecodecamp.org/ukrainian/news/bazovyy-shablon-html5-shablonnyy-kod-html-dlya-pochatku-bud-yakoho-proyektu/ 638f01b1f44ee106cb36578d Tue, 06 Dec 2022 08:50:03 +0000 Оригінальна публікація: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project

При створенні нового вебсайту важливо мати хорошу стартову основу. У цій публікації я поясню, що таке шаблонний код HTML 5 і як створити базовий шаблон для використання у своїх проєктах.

Що таке шаблон HTML 5?

Згідно з вікіпедією,

шаблонний код, або просто шаблон — це розділи коду, які повторюються в декількох місцях практично без змін.

Шаблонний код у HTML — це шаблон, який ви додаєте на початку свого проєкту. Цей шаблон потрібно додавати до всіх своїх сторінок HTML.

Приклад шаблонного коду HTML 5

Давайте розглянемо простий приклад.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>

Що таке doctype у HTML?

Першим рядком у вашому коді HTML повинне бути оголошення doctype. Воно повідомляє браузеру, яку версію HTML використали для написання сторінки.

<!DOCTYPE html>

Якщо ви забули включити цей рядок коду у свій файл, деякі теги HTML5, як-от <article>, < footer > та <header>, можуть не підтримуватися браузером.

Що таке кореневий елемент HTML?

Тег <html> є елементом верхнього рівня файлу HTML. У нього вкладають теги <head> та <body>.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

Атрибут lang у початковому тегу <html> встановлює мову сторінки. Його добре додавати ще й з міркувань доступності, оскільки читачі екрана знатимуть, як правильно вимовляти текст.

Що таке тег head у HTML?

Тег <head> містить інформацію, яка обробляється комп’ютерами. Всередині тегів <head> вкладають метадані, тобто дані, які описують цей документ для комп’ютера.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
</head>

Що таке кодування символів UTF-8?

UTF-8 — це стандартне кодування символів, яке варто використовувати для своїх вебсторінок. Зазвичай це буде перший тег <meta>, який відображається в елементі <head>.

 <meta charset="UTF-8">

За даними World Wide Web Consortium,

Кодування на основі юнікоду, наприклад UTF-8, може підтримувати багато мов і містити сторінки та форми з будь-якою сумішшю цих мов. Його використання також усуває потребу в серверній логіці для індивідуального визначення кодування символів для кожної сторінки, що обслуговується, або кожної вхідної форми.

Що таке метатег viewport у HTML?

Цей тег надає ширину сторінки відповідно до ширини екрану пристрою. Якщо у вас мобільний пристрій із шириною 600 пікселів, то вікно браузера також матиме ширину 600 пікселів.

initial-scale контролює рівень масштабування. Значення 1 для initial-scale запобігає масштабуванню у браузерах за замовчуванням.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Що означає X-UA-Compatible?

Цей тег <meta> визначає режим документа для Internet Explorer. IE=edge є найвищим підтримуваним режимом.

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

Що таке теги title у HTML?

Тег <title> є заголовком вебсторінки. Цей текст відображається у заголовку вікна браузера або на вкладці сторінки.

    <title>HTML 5 Boilerplate</title>
Screen-Shot-2021-07-30-at-4.15.25-AM

Таблиця стилів CSS

Цей код зв’яже ваш CSS зі сторінкою HTML. rel="stylesheet" визначає зв’язок між файлом HTML і зовнішньою таблицею стилів.

    <link rel="stylesheet" href="style.css">

Теги script у HTML

Тег script буде розміщений перед кінцевим тегом body. Тут можна під’єднати свій зовнішній код JavaScript.

	<script src="index.js"></script>

Висновок

Ви повинні додавати шаблонний код HTML 5 до кожної сторінки HTML. Цей початковий код містить важливу інформацію, як-от тип документа, метадані, зовнішні таблиці стилів та тег скриптів.

]]>