Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

10. Первая строка всех сайтов - DOCTYPE

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем уроке познакомились с общей структурой HTML-страницы. В этом уроке познакомимся с самой первой строкой HTML-страницы, которая уведомляет браузер о типе HTML-документа.

Что такое <!DOCTYPE html>?

Вы можете посмотреть код любого сайта и увидеть, что первая строка выглядит так: <!DOCTYPE html>, и неспроста. Этот маленький, но важный элемент сообщает браузеру тип документа. Он сообщает версию HTML.

Именно <!DOCTYPE html> сообщает об использовании пятой версии HTML (HTML5). Например, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, сообщает об использовании четвертой версии HTML (HTML4). Не стоит запоминать второй пример, он нам не пригодится, так как мы будем ровняться на HTML5.

Так же процедуру добавления этого элемента называют «объявлением стандарта». В интернете об этом много написано, поэтому <!DOCTYPE html> мы не будем подробно разбирать, только кратко обсудим в следующем разделе.

Сайт, у которого отсутствует этот важный элемент, можно назвать невалидным.

Подведем итог: пишем всегда в начале html страницы, строку  и тогда поисковики и браузеры будут нас любить. Кстати, опять сказал про SEO.

Подробнее о теге DOCTYPE

Тег DOCTYPE, согласно спецификации HTML, объявляет тип документа. То есть он объявляет валидатору, какую версию документа использовать.

Тег DOCTYPE должен находиться в первой строке каждого документа HTML. Он очень важен для правильного отображения страниц сайта браузером.

Если вы все же не указали DOCTYPE, то браузер начнет гадать, какой тип вы использовали. В конце 90-х годов, писали без тега DOCTYPE. Сейчас уже другой век. Правильный DOCTYPE вы можете найти на сайте консорциума [ссылка доступна авторизованным пользователям]. Не стоит тратить время на поиск нужного DOCTYPE, потому что это не так требуется. Можно просто написать: <!DOCTYPE html>.

Примечание (10.2024)

Не забивайте голову этими стандартами. Это не пригодится в начале обучения (вряд ли вообще пригодится). Просто пишите <!DOCTYPE html> в начале HTML-страницы.

В следующем уроке поговорим о типовой структуре веб-страницы. В нем мы объединим полученные знания в одно целое. Урок будет чем-то похож на предыдущий.

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Итоги раздела «Структуры данных в Python»Знакомство с Python
Строковые функции в PHPКурс по PHP
Первое знакомство с циклами (цикл for) в PythonЗнакомство с Python
Введение в курс по PHPКурс по PHP
Работа со строками в JavaScriptТипы и переменные
Итоги раздела «Самые основы Python»Знакомство с Python
Переменные, комментарии и типы данных в PHPКурс по PHP
Обнаружение сетевых служб с помощью NmapРазведка и сканирование
Селекторы атрибутов: простой выборСелекторы в CSS
Раздел «Знакомство с HTML»
1. УРОК: 1. Вводный урок по курсу HTML и CSS
2. УРОК: 2. Что такое язык HTML
3. УРОК: 3. Погружение в курс по HTML и CSS
4. УРОК: 4. Теги в HTML. Одинарные и парные теги
5. УРОК: 5. Что такое теги в HTML и для чего они нужны
6. УРОК: 6. Одинарные теги в HTML
7. УРОК: 7. Парные теги в HTML
8. ПРАКТИКА: 10. Структура HTML-документа
9. УРОК: 11. Что означают теги HTML, HEAD, BODY
УРОК 10. 12. Первая строка всех сайтов - DOCTYPE
Вы здесь
11. УРОК: 13. Исходный код веб-страницы
12. УРОК: 14. Заголовок в HTML - тег TITLE
13. УРОК: 16. Кодировка HTML-страницы и атрибуты тегов
14. УРОК: 17. Описание стилей CSS в HTML-документе
15. УРОК: 18. Подключение внешних файлов в HTML - стили CSS
16. ПРАКТИКА: 19. Что не хватает в структуре HTML-документа
17. ПРАКТИКА: 20. Опять чего-то не хватает в структуре HTML-страницы
18. УРОК: 22. Использование HTML метатегов (мета теги)
19. ПРАКТИКА: 23. Повторим метатеги в HTML
20. ПРАКТИКА: 24. Метатеги Facebook
21. ТЕСТ: 25. Тест по разделу «Знакомство с HTML»
Другие разделы
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 5. Таблицы в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно