Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Head Документа | Структура Документа
Знайомство з HTML
course content

Зміст курсу

Знайомство з HTML

Знайомство з HTML

1. Веб Розробка
2. Теги та Атрибути
3. Структура Документа
4. Медіа та Таблиці
5. Форми

bookHead Документа

Head документа може містити мета-теги, багато з яких невидимі користувачеві у вікні браузера. Тому в наступних прикладах ви не побачите жодного видимого вмісту. Ці теги зберігають інформацію про метадані сторінки.

Заголовок сторінки

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

html

index

css

index

js

index

copy

За допомогою цього коду ми можемо досягти такого вигляду сайту. У вкладці браузера ми побачимо точний текст, укладений в тег <title> (синя рамка на зображенні).

Мета-дані

Тег <meta> містить інформацію для браузерів і пошукових систем: кодування документа, передача даних і багато іншого. Мета-теги можуть мати багато атрибутів, оскільки всі вони передають різну інформацію. Найважливішим з них є кодування сторінки. Воно допомагає браузеру правильно відображати текст. У випадку, якщо не передано кодування, браузер може показувати замість символів моджибейки.

html

index

css

index

js

index

copy

Значення атрибутів метатега

  • name - назва властивості може бути будь-яким словом або словосполученням, веб-браузери зазвичай очікують значення, яке вони можуть розпізнати і використати для виконання дії. Прикладом може бути <meta name="author" content="name">, щоб вказати автора сторінки;
  • content - вказує значення властивості. Прикладом може бути <meta name="language" content="english"> для вказівки мови тексту сторінки;
  • http-equiv - означає HTTP-еквівалент і використовується для імітації заголовків HTTP-відповіді. Зустрічається рідко. Прикладом може бути <meta http-equiv="refresh" content="30">, щоб сказати браузеру оновлювати сторінку кожні 30 хвилин.

Основні мета-теги для покращення SEO

Примітка

SEO (Search Engine Optimization) - це процес оптимізації веб-сайту для покращення його видимості в результатах пошукової видачі.

  • <meta name="description"/> - задає короткий опис веб-сторінки;
  • <meta name="author" /> - вказує на автора сторінки;
  • <meta name="language"/> - вказує мову сторінки;
  • <meta name="robots"/> - вказує пошуковим системам, як сканувати або індексувати сторінку;
  • <meta name="googlebot" content="notranslate"/> - повідомляє Google, що ви не дозволяєте автоматичний переклад сторінки;
  • <meta name="rating" content="safe for kids"/> - вказує на аудиторію сторінки;
  • <meta name="copyright" content="Copyright 2023"/> - вказує на авторські права сторінки.
html

index

css

index

js

index

copy
1. Де повинен бути розміщений тег `<meta>`?
2. Вміст якого тегу буде показано на вкладці користувача?
3. Що можна зробити, щоб допомогти браузеру індексувати сторінку?
Де повинен бути розміщений тег `<meta>`?

Де повинен бути розміщений тег <meta>?

Виберіть правильну відповідь

Вміст якого тегу буде показано на вкладці користувача?

Вміст якого тегу буде показано на вкладці користувача?

Виберіть правильну відповідь

Що можна зробити, щоб допомогти браузеру індексувати сторінку?

Що можна зробити, щоб допомогти браузеру індексувати сторінку?

Виберіть правильну відповідь

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 3
some-alt