Оригінальна публікація: 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>
Таблиця стилів 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. Цей початковий код містить важливу інформацію, як-от тип документа, метадані, зовнішні таблиці стилів та тег скриптів.