Результати надаються виключно в інформаційних цілях і можуть містити помилки. Перевіряйте важливу інформацію самостійно. Використання цього інструмента здійснюється на ваш власний ризик.
Що робить цей інструмент
Генератор шаблону HTML створює початковий каркас сторінки HTML5: оголошення <!DOCTYPE html>, елемент <html> з атрибутом lang, <head> із кодуванням UTF-8 і заголовком сторінки та <body> із заголовком першого рівня. Змініть заголовок сторінки чи мову — і код одразу оновиться.
Три параметри ввімкнено за замовчуванням, і їх можна вимкнути: адаптивний мета-тег viewport (без нього сторінки неправильно відображаються на телефонах), посилання на style.css і тег script.js з атрибутом defer, який завантажує скрипт паралельно й виконує його після розбору сторінки. Заголовок і мова екрануються, тож символи на кшталт & чи < безпечні.
Коли використовувати
- Створення прототипу, демо чи відтворення бага, яким потрібен чистий HTML-файл.
- Демонстрація мінімальної структури валідної сторінки HTML5 під час навчання.
- Створення статичного лендингу, перш ніж підключати фреймворк.
- Перевірка того, які теги в head мають бути на сторінці, перш ніж додавати SEO-теги за допомогою генератора мета-тегів.
Приклад
Введення
Заголовок сторінки: My Page
Код мови: en
Viewport, style.css і script.js увімкнено
Виведення
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Page</h1>
<script src="script.js" defer></script>
</body>
</html>Запитання про цей інструмент
Чому атрибут lang важливий?
Екранні зчитувачі використовують його, щоб вибрати правильну вимову, браузери — щоб запропонувати переклад, а пошукові системи — як сигнал про мову. Укажіть основну мову вмісту, наприклад en, fr чи he.
Що робить мета-тег viewport?
Без нього мобільні браузери відображають сторінку так, ніби ширина екрана становить близько 980px, а потім зменшують її, і текст стає крихітним. width=device-width, initial-scale=1.0 змушує їх використовувати справжню ширину екрана.
Навіщо скрипт підключено з defer?
defer дає браузеру змогу далі розбирати HTML, поки скрипт завантажується, і виконати його, щойно документ буде готовий. Так сторінка не блокується, а ваш скрипт може безпечно звертатися до елементів.
Що додати далі?
Мета-опис і теги для попереднього перегляду в соцмережах. Їх створюють генератор мета-тегів і генератор тегів Open Graph, а генератор robots.txt стане в пригоді, коли сайт запрацює.
Цей інструмент безкоштовний?
Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.
Як отримати результат?
Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.