Що таке HTML-шаблон?
Кожен вебсайт відрізняється від іншого, але є багато речей, які, по суті, однакові для всіх вебсайт. Замість того, щоб писати один і той самий код знову і знову, варто створити власний «шаблон». Шаблон - це лекало, яке ви використовуєте кожного разу, коли починаєте проєкт, що позбавляє вас від необхідності починати все з нуля.
Вікіпедія описує шаблони як
частини коду, які повторюються в декількох місцях з невеликими змінами або без них.
Вивчаючи HTML5 і додаючи нові прийоми до свого арсеналу, ви, швидше за все, захочете створити власний HTML-шаблон, з якого можна буде починати всі майбутні проєкти. Це, безумовно, варто зробити, і в Інтернеті є багато відправних точок, які допоможуть вам створити власний HTML5-шаблон.
Дуже простий приклад початкового шаблону HTML 5
Повний шаблон, який ми пропонуємо в кінці цієї статті, має багато функцій. Але вам не обов'язково використовувати весь цей набір функцій, особливо якщо ви тільки починаєте. Ось дуже простий шаблон HTML5 для початківців, який може бути всім, що вам потрібно:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<script src="scripts.js"></script>
</body>
</html>
Якщо ви вставите наведений вище код у файл .html, ви отримаєте веб-сторінку! Цей базовий шаблон HTML5 включає деякі з елементів, наведених у наступному розділі, а також простий елемент заголовка, який буде відображатися у вашому браузері.
Тепер розглянемо його більш детально.
Анатомія шаблону HTML5
HTML-шаблон зазвичай складається з наступних частин:
- Оголошення типу документа (або доктрини)
- Елемент
<html> - Кодування символів
- Мета елемент області перегляду
-
<title>, опис та автор - Метаелементи Open Graph для соціальних карт
- Фавікони та сенсорні іконки
- Посилання на CSS стилі
- Посилання на JavaScript файли
Окрім оголошення типу документа та елемента <html>, перелічені вище елементи здебільшого знаходяться у секції <head> HTML-шаблону.
Тип документа в HTML5
Ваш HTML5-шаблон повинен починатися з оголошення типу документа, або доктрини. Тип документа - це просто спосіб повідомити браузеру або будь-якому іншому парсеру, який тип документа він розглядає. У випадку HTML-файлів це означає конкретну версію і стиль HTML. Тип документа завжди повинен бути першим елементом у верхній частині будь-якого HTML-файлу. Багато років тому оголошення типу було потворним і важким для запам'ятовування, його часто вказували як «XHTML Strict» або «HTML Transitional».
З появою HTML5 ці нерозбірливі написи зникли, і тепер все, що вам потрібно, - це ось це:
<!doctype html>
Просто і по суті. Тип документа можна писати великими, малими або змішаними літерами. Ви помітите, що в оголошенні явно відсутня цифра «5». Хоча поточна ітерація веб-розмітки відома як «HTML5», насправді вона є лише еволюцією попередніх стандартів HTML - і майбутні специфікації будуть просто розвитком того, що ми маємо сьогодні. Ніколи не буде «HTML6», тому поточний стан веб-розмітки прийнято називати просто «HTML ».
Оскільки браузери вимушені підтримувати старіші версії вмісту, немає ніякої залежності від доктрини, яка б вказувала браузерам, які функції повинні підтримуватися в конкретному документі. Іншими словами, сам по собі тип документа не зробить ваші сторінки сумісними з сучасними можливостями HTML. Насправді браузер визначає підтримку функцій у кожному конкретному випадку, незалежно від того, який тип документу використовується. По суті, ви можете використовувати один зі старих доктрин з новими HTML5-елементами на сторінці, і сторінка буде відображатися точно так, як і при використанні нової версії.
Елемент <html>
Елемент <html> є елементом верхнього рівня в HTML-файлі - це означає, що він містить все, що є в документі, окрім доктрини. Елемент <html> поділяється на дві частини - секції <head> і <body>. Все інше у файлі веб-сторінки буде розміщено або в елементі <head>, або всередині елемента <body>.
У коді нижче показано елемент <html>, який слідує за оголошенням типу документа і містить елементи <head> і <body>:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>
Як використовувати теги <head> в HTML
Розділ <head> містить важливу інформацію про документ, яка не показується кінцевому користувачеві - наприклад, кодування символів та посилання на файли CSS і, можливо, файли JavaScript. Ця інформація використовується браузерами, пошуковими системами та програмами для читання з екрану:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script> <!-- Optional location. It's usually
better to place this before
the closing </body> tag -->
</head>
Всі елементи, що містяться між тегами <head> ... </head>, є важливими, але їх не бачать кінцеві користувачі - за винятком, можливо, тексту <title>, який з'являється в онлайн-пошуку та у вкладках браузера.
Як використовувати теги <body> в HTML
Секція <body> містить все, що відображається в браузері - текст, зображення і так далі. Якщо ви хочете представити щось кінцевому користувачеві, переконайтеся, що це розміщено між тегами <body> ... </body>, що відкривають і закривають сторінку:
<body>
<h1>This is My Dog</h1>
<p>
<img src="dog.jpg" alt="A golden retriever, lying in the grass">
</p>
<p>Here's my gorgeous boy, lying in the grass after our walk today.</p>
</body>
Що таке атрибут lang?
Елемент <html> в ідеалі включає атрибут lang, як показано в коді вище (<html lang="en">). Його основне призначення - вказати допоміжним технологіям, таким як екранні зчитувачі, як вимовляти слова при читанні вголос. (Цей атрибут не є обов'язковим для валідації сторінки, але більшість валідаторів видадуть попередження, якщо ви його не включите).
Наведений вище атрибут lang має значення en, яке вказує на те, що документ написано англійською мовою. Існують значення для всіх інших розмовних мов, наприклад, fr для французької, de для німецької, uk для української тощо. (Ви можете знайти повний список мовних кодів у Вікіпедії).
Кодування символів HTML-документа
Перший рядок у розділі <head> HTML-документа описує кодування символів у документі. Літери та символи, які ми читаємо на веб-сторінці, визначаються для комп'ютера як ряд чисел, а деякі символи (наприклад, літери) кодуються декількома способами. Тому корисно вказати комп'ютеру, в якому кодуванні має бути ваша веб-сторінка.
Зазначення кодування символів є необов'язковою функцією і не викликає жодних попереджень у валідаторах, але рекомендується для більшості HTML-сторінок:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- character encoding -->
⋮
</head>
<body></body>
</html>
Примітка: для того, щоб деякі старі браузери правильно зчитували кодування символів, весь опис кодування символів має бути включений десь у перші 512 символів вашого документа. Воно також має знаходитися перед будь-якими елементами, що залежать від вмісту (наприклад, перед елементом <title>, який з'являється пізніше у нашому прикладі).
Навіщо використовується кодування символів UTF-8 в HTML5-шаблонах?
У наведеному вище прикладі використовується кодування UTF-8. Майже у всіх випадках, utf-8 - це те значення, яке ви повинні використовувати у своїх документах. Це кодування охоплює широкий спектр символів, не включених в інші кодування. Ви, напевно, зустрічали в Інтернеті дивні символи, такі як �, які, очевидно, були помилкою. Це часто трапляється через те, що браузер не може знайти потрібний символ у наборі символів, зазначеному в документі.
UTF-8 охоплює широкий спектр символів, включаючи багато символів мов з усього світу, а також багато корисних символів. Згідно з поясненням Консорціуму Всесвітньої павутини:
Кодування на основі Unicode, таке як UTF-8, підтримує багато мов і дозволяє розміщувати сторінки та форми будь-якою сумішшю цих мов. Його використання також усуває необхідність для логіки на стороні сервера окремо визначати кодування символів для кожної сторінки, або кожної форми, що надсилається. Це значно зменшує складність роботи з багатомовним сайтом або застосунком.
Повне пояснення кодування символів виходить за рамки цієї статті, але якщо ви хочете заглибитися трохи глибше, ви можете прочитати про кодування символів у специфікації HTML.
Що означає X-UA-Compatible?
Іноді ви можете побачити цей рядок у заголовку HTML-документа:
<head>
⋮
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
Цей мета-тег дозволяє веб-авторам вибирати, в якій версії Internet Explorer буде відображатися сторінка. Тепер, коли Internet Explorer - це здебільшого просто поганий спогад, ви можете сміливо не використовувати цей рядок у своєму коді. ( В нашому HTML5 шаблоні він також відсутній.) Якщо ви точно знаєте, що ваша веб-сторінка може бути переглянута в старих версіях IE, можливо, варто включити його в код. Ви можете прочитати більше про цей мета-тег на сайті Microsoft.
Мета-елемент Viewport
Мета-елемент viewport - це елемент, який ви знайдете майже в кожному HTML5-шаблоні. Він важливий для адаптивного веб-дизайну та дизайну, орієнтованого на мобільні пристрої:
<head>
⋮
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Цей <meta> елемент містить два атрибути, які працюють разом як набір ім'я/значення. У цьому випадку ім'я має значення viewport, а значення - width=device-width, initial-scale=1. Це використовується лише на мобільних пристроях. Ви можете помітити, що значення складається з двох частин, описаних тут:
-
width=device-width: ширина в пікселях області перегляду, в якій ви хочете, щоб веб-сайт відображався. -
initial-scale: це має бути додатне число від 0.0 до 10.0. Значення «1» вказує на співвідношення 1:1 між шириною пристрою і розміром вікна перегляду.
Ви можете прочитати трохи більше про ці функції мета-елемента на MDN, а поки просто знайте, що в більшості випадків цей мета-елемент з такими налаштуваннями найкраще підходить для адаптивних веб-сайтів, орієнтованих на мобільні пристрої.
<title>, description, та author
Наступний розділ базового шаблону HTML містить такі три рядки:
<head>
⋮
<title>A Basic HTML5 Template</title>
<meta name="description" content="A simple HTML5 Template for new projects.">
<meta name="author" content="SitePoint">
</head>
Елемент <title> - це те, що відображається в рядку заголовка браузера (наприклад, коли ви наводите курсор на вкладку браузера), а також показується в результатах пошуку. Цей елемент є єдиним обов'язковим елементом у розділі <head>. Мета-елементи description та author є необов'язковими, але вони надають важливу інформацію для пошукових систем. У результатах пошуку заголовок і опис у наведеному вище прикладі коду виглядатимуть так, як показано на наступному зображенні.
Ви можете помістити в <head> стільки мета-елементів, скільки хочете.
Мета-елементи Open Graph для соціальних карток
Як було сказано вище, всі мета-елементи є необов'язковими, але багато з них мають переваги для SEO та маркетингу в соціальних мережах. Наступний розділ нашого HTML5 шаблону включає деякі з цих мета-елементів:
<head>
⋮
<meta property="og:title" content="A Basic HTML5 Template">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
<meta property="og:description" content="A simple HTML5 Template for new projects.">
<meta property="og:image" content="image.png">
</head>
Ці <meta> елементи використовують переваги так званого протоколу Open Graph, але існує багато інших, якими ви можете скористатися. Ці елементи ви, ймовірно, будете використовувати найчастіше. Ви можете переглянути повний список доступних мета-опцій Open Graph на сайті Open Graph.
Наведені тут мета-параметри покращать зовнішній вигляд веб-сторінки, коли на неї буде зроблено посилання в пості в соціальних мережах. Наприклад, п'ять елементів <meta>, включених сюди, з'являться в соціальних картах, що вбудовують такі дані:
- заголовок контенту
- тип контенту
- канонічна URL-адреса контенту
- опис контенту
- зображення, яке асоціюється з контентом
Коли ви бачите публікацію в соціальних мережах, ви часто бачите, що ці дані автоматично додаються до публікації. Наприклад, нижче показано, що з'явиться у твіті, якщо ви додасте посилання на головну сторінку GitHub.
Фавікони та сенсорні іконки
Наступний розділ шаблону HTML5 містить елементи <link>, які вказують на ресурси, які слід додати як іконку та сенсорну іконку пристроїв Apple:
<head>
⋮
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
Фавікон з'явиться у вкладці браузера, коли хтось переглядатиме ваш сайт. Файл favicon.ico призначений для застарілих браузерів і його не потрібно включати в код. Якщо файл favicon.ico знаходиться в корені вашого проєкту, браузер автоматично знайде його. Файл favicon.svg призначений для сучасних браузерів, які підтримують іконки у форматі SVG. Ви також можете використовувати файл у форматі .png.
Останній елемент посилається на іконку, яка використовується на пристроях Apple, коли сторінка додається на домашній екран користувача.
Є й інші варіанти, які ви можете сюди включити, в тому числі файл маніфесту веб-застосунку, який посилається на інші іконки. Для повного розбору ми рекомендуємо прочитати статтю Андрія Ситника на цю тему. Але наведених тут варіантів буде достатньо для простого стартового HTML-шаблону.
Включення таблиць стилів CSS та файлів JavaScript
Останні дві важливі частини нашого початкового HTML шаблону - це посилання на одну або декілька таблиць стилів і, можливо, також на файли JavaScript. І те, і інше, звичайно, необов'язково, хоча рідко можна зустріти сайт, на якому не було б хоча б трохи CSS-стилів.
Включення таблиці стилів CSS до HTML-шаблону
Таблицю стилів можна включити в будь-яке місце документа, але зазвичай ви бачите її в розділі <head>:
<head>
⋮
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
Елемент <link> вказує веб-браузеру на зовнішню таблицю стилів які будуть застосовані до сторінки. Елементу <link> потрібен атрибут rel таблиці стилів. Раніше зазвичай додавався також атрибут type, але він ніколи не був потрібен, тому просто залиште його, якщо ви знайдете в Інтернеті старіший код, який його містить.
Зверніть увагу, що ми додали рядок запиту ?v=1.0 в кінець CSS-посилання. Це абсолютно необов'язково. Це зручний трюк, коли ви оновлюєте таблицю стилів, щоб також оновити цей рядок запиту (скажімо, до 1.1 або 2.0), тому що це гарантує, що браузери викинуть будь-яку стару, кешовану копію файлу CSS і завантажать свіжу, нову версію.
Варто зазначити, що вам не обов'язково використовувати елемент <link> для включення CSS, оскільки замість цього ви можете розмістити всі ваші стилі на самій сторінці в тегах <style> ... </style> в розділі <head>. Це зручно, коли ви експериментуєте з макетами, але загалом це неефективно робити на живому сайті, оскільки ці стилі не будуть доступні на інших сторінках, що призведе до неефективного та/або повторюваного коду.
Включення JavaScript-файлу
Код JavaScript зазвичай додається до HTML-сторінки за допомогою елемента <script>. Атрибут src цього елемента містить посилання на файл JavaScript. Ви можете посилатися на файли JavaScript з будь-якого місця у вашій HTML-сторінці. Ви часто бачите їх у розділі <head>, але, як правило, найкраще розміщувати їх у нижній частині документа, безпосередньо перед тегом </body>, що закриває сторінку:
<head>
⋮
<script src="js/script1.js"></script>
</head>
<body>
⋮
<script src="js/script2.js"></script> <!-- Generally the best location -->
</body>
Розміщення елемента <script> внизу сторінки частково допомагає пришвидшити завантаження сторінки. Коли браузер зустрічає скрипт, він починає аналізувати решту сторінки, призупиняючи завантаження і відображення, поки аналіз не завершиться. Якщо великі скрипти розміщені у верхній частині сторінки перед будь-яким вмістом, це призводить до набагато повільнішого завантаження сторінки. Тому більшість скриптів слід розміщувати в самому низу сторінки, щоб вони були проаналізовані лише після завантаження решти сторінки.
Ще однією перевагою розміщення скриптів внизу сторінки є те, що елементи, на які скрипт повинен впливати, завантажуються першими. Проте, в деяких випадках скрипт може знадобитися розмістити на початку документа, оскільки ви хочете, щоб він почав діяти до того, як браузер почне відображати сторінку.
Подібно до посилань на таблиці стилів, атрибут type для скриптів не потрібен (і ніколи не був потрібен). Оскільки JavaScript для всіх практичних цілей є єдиною реальною мовою сценаріїв, що використовується в Інтернеті, і оскільки всі браузери будуть вважати, що ви використовуєте JavaScript, навіть якщо ви явно не вказуєте цей факт, ви можете сміливо не використовувати type="text/javascript", який часто з'являється в застарілому коді.
Як і у випадку з CSS, ви можете вбудувати JavaScript у сам шаблон, а не посилатися на зовнішній JavaScript файл. Знову ж таки, це, як правило, неефективно, тому не робіть цього, якщо тільки ви не тестуєте якийсь код, або якщо ви впевнені, що скрипт не знадобиться на інших сторінках. Ви можете вбудувати свій скрипт, помістивши його всередину звичайних тегів <script> ... </script>:
<head>
⋮
<script>
console.log("Woo!")
</script>
</head>
<body>
⋮
<script>
console.log("Hoo!")
</script>
</body>
Примітка про старі браузери та нові елементи
Коли HTML5 був представлений, він містив ряд нових елементів, таких як <article> і <section>. Ви можете подумати, що підтримка нерозпізнаних елементів буде великою проблемою для старих браузерів - але це не так! Більшості браузерів насправді байдуже, які теги ви використовуєте. Якщо у вас є HTML-документ з елементом <recipe> (або навіть елементом <ziggy>), і ваш CSS додає деякі стилі до цього елементу, майже кожен браузер буде діяти так, ніби це абсолютно нормально, застосовуючи ваш стиль без нарікань.
Звичайно, такий гіпотетичний документ не пройде валідацію і може мати проблеми з доступністю, але він буде коректно відображатися майже у всіх браузерах - виняток становлять старі версії Internet Explorer (IE). До версії 9 IE не дозволяв нерозпізнаним елементам отримувати стилі. Ці загадкові елементи розглядалися механізмом рендерингу як «невідомі елементи», тому ви не могли змінити їхній вигляд або поведінку. Це стосується не лише наших уявних елементів, але й будь-яких елементів, які ще не були визначені на момент розробки цих версій браузерів, включно з новими HTML5-елементами.
На щастя, сьогодні практично не існує старих браузерів, які не підтримують стилізацію нових елементів, тому ви можете спокійно використовувати будь-який новий елемент HTML практично в будь-якому проєкті.
Проте, якщо вам дійсно потрібна підтримка застарілих браузерів, ви можете використовувати надійний HTML5 Shiv - простий фрагмент JavaScript, розроблений Джоном Ресігом (John Resig). Натхненний роботою Sjoerd Visscher, він зробив нові елементи HTML5 стильними в старих версіях IE. Хоча, сьогодні це вже не потрібно. Як зазначено на сайті caniuse.com, елементи HTML5 підтримуються всіма використовуваними браузерами.
Повний HTML5 шаблон
Ось наш фінальний HTML5 шаблон - базовий шаблон, який ви можете використовувати для будь-якого проєкту:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Basic HTML5 Template</title>
<meta name="description" content="A simple HTML5 Template for new projects.">
<meta name="author" content="SitePoint">
<meta property="og:title" content="A Basic HTML5 Template">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
<meta property="og:description" content="A simple HTML5 Template for new projects.">
<meta property="og:image" content="image.png">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<!-- your content here... -->
<script src="js/scripts.js"></script>
</body>
</html>
Цей простий код HTML5-шаблону можна використовувати в будь-якому проєкті. На основі нього, ви можете додавати будь-який вміст між тегами <body> і </body>.
Висновок
В Інтернеті є безліч початкових шаблонів і фреймворків HTML, які містять готові файли CSS і JavaScript, а також багато попередньо написаного контенту, з яким ви можете гратися і змінювати його. Але ми не ставили перед собою таку мету. Базовий шаблон, який ми тут представили, містить все, що вам може знадобитися при створенні будь-якої веб сторінки, тому вам не доведеться щоразу починати все з нуля.
Не соромтеся копіювати базовий HTML шаблон, який ми показали на початку, або повний шаблон, показаний вище, і використовувати їх у своїх проєктах. З часом ви, ймовірно, виявите, що деякі елементи вам не так часто потрібні, а також інші речі, про які ми не згадали, але які ви часто використовуєте, тож ви можете оновити свій шаблон, щоб адаптувати його до вашого робочого процесу.
Коментарі (3)