DOCTYPE: история и варианты применения
- 23 апреля 2020
DOCTYPE чем-то похож на заголовок для статьи. Он пишется в начале HTML-документа. Если его не будет, то браузер может отобразить вашу страницу в неожиданном виде. Читайте о том, из чего состоит DOCTYPE, и как его использовать правильно.
Определение и значение
Если вы хоть раз работали с HTML-файлом, то наверняка видели в начале страницы ключевое слово DOCTYPE. Если разобрать его по частям, то получается DOC (сокращение от слова document) + TYPE (с английского «тип»). Ключевое слово DOCTYPE в файле HTML — это декларация типа документа. Так браузер узнает, на каком языке и с какими технологиями он был создан. Если не укажете DOCTYPE, то ваша страница может отображаться некорректно.
История
Из истории HTML мы знаем, что спецификация менялась с момента первой публикации в 1992-м году и до наших дней. Вместе с ней, соответственно, менялись и типы документов. Актуальная версия HTML сейчас — это HTML Living Standard. Начиная с версии 4.0 многие элементы стали устаревшими (их рекомендовали не использовать на страницах) — стандарт очистился.
Типы синтаксиса в DOCTYPE
Синтаксис HTML-документа бывает:
- свободным — переходный (transitional);
- строгим — strict. По его правилам парные теги обязательно надо закрывать, атрибуты «заворачивать» в кавычки, нельзя пользоваться устаревшими тегами;
- «рамочным» — frameset. Когда используются фреймы.
Сравниваем DOCTYPE для HTML 1.0 и HTML 4.01 на примерах
Переходный синтаксис
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
Есть все элементы и атрибуты HTML. С устаревшими и презентационными. Фреймов нет. А разметка должна быть сделана как качественно созданный XML.
4.01:
text <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
Тут есть все элементы и атрибуты HTML, в том числе устаревший тег шрифта. А также новые. Фреймов нет.
Строгий синтаксис
1.0:
text < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
В этом уже нет устаревших и презентационных элементов. Всё ещё нет фреймов. От разметки ждут вида хорошо сформированного XML.
4.01:
text < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
Есть все элементы и атрибуты без устаревших. Фреймов нет.
Фреймы
1.0:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >Здесь определение типа документа как у переходного с XHTML 1.0, но можно пользоваться содержимым фреймов.
4.01:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd" >Тут DTD как у переходного HTML 4.01 переходный, но тоже есть фреймы. Сейчас применяется редко, потому что фреймы устарели.
Формула с расшифровкой параметров (элементов)
<!DOCTYPE [Элемент верхнего уровня][Публичность]"[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" «[URL]» >, где
- [Элемент верхнего уровня] — корневой элемент на веб-странице, часто
html/HTML; - [Публичность] — этот параметр для файла может принимать два значения:
PUBLIC(публичный) иSYSTEM(локальный); - [Регистрация] — указывает на наличие регистрации у разработчика DTD внутри ISO (международная организация). Может быть
+или . - [Организация] — название организации стандартизации (W3C);
- [Тип] — определение типа страницы, например
DTD; - [Имя] — имя документа;
- [Язык] — язык описания объектов (по умолчанию английский
EN); - [URL] — адрес страницы, на которой находится описание для указанного типа документа. Из этой спецификации браузер узнает, как отображать страницу с допустимыми тегами.
И что теперь?
Время проходит, мы во многом стараемся двигаться к упрощению и унификации. В HTML5 декларация типа документа выглядит очень просто:
<!DOCTYPE html>
DOCTYPE для него самый простой из существовавших.
Что происходит, если указать DOCTYPE неправильно или не указывать его вообще
Браузеры покажут страницу по совместимости со своими старыми версиями.
Формально регистр тут значения не имеет. Но корректнее всё же писать заглавными буквами. Потому что в XHTML5 есть разница между именами элементов, написанными в нижнем регистре и ключевыми словами, которые пишут в верхнем регистре.
<!DOCTYPE html> — запомнить слишком просто.
Напоминалка на дорожку
- DOCTYPE — инструкция, которая ассоциирует веб-страницу с типом документа (DTD).
- Document Type Definition — это близко к DOCTYPE, но не путайте.
- Пример: формальное определение частной версии HTML 2.0 — 4.0.
Простыми словами, прописывая DOCTYPE, мы говорим браузерам/валидаторам, каким языком разметки мы писали свой документ. Вы помните, что кроме простого HTML бывает XHTML и XML. Кроме этого мы можем указать и степень строгости синтаксиса.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
HTML-коды популярных эмодзи
Эмодзи давно вышли за пределы мессенджеров и социальных сетей, став важной частью веб-дизайна и пользовательского интерфейса. Они помогают сделать ваш сайт живым, ярким и эмоциональным. Но как добавить эмодзи в HTML-код без потери качества? В этой статье мы собрали для вас список из 50 самых популярных эмодзи с их названиями, значениями и HTML-кодами для вставки.
Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты. Узнайте, как просто интегрировать эмоции в свой сайт с помощью одной строки HTML!
| Эмодзи | Название | HTML-код |
|---|---|---|
| 😀 | Улыбающееся лицо | 😀 |
| 😂 | Лицо со слезами радости | 😂 |
| 😍 | Лицо с глазами в форме сердца | 😍 |
| 😎 | Лицо в солнцезащитных очках | 😎 |
| 😭 | Плачущий | 😭 |
| 😊 | Смущённая улыбка | 😊 |
| 😢 | Грустное лицо | 😢 |
| 😅 | Лицо с каплей пота | 😅 |
| 🤔 | Задумчивое лицо | 🤔 |
| 👍 | Большой палец вверх | 👍 |
| 👎 | Большой палец вниз | 👎 |
| 👏 | Аплодисменты | 👏 |
| 🙏 | Сложенные руки | 🙏 |
| ❤ | Красное сердце | ❤ |
| 💔 | Разбитое сердце | 💔 |
| 🔥 | Огонь | 🔥 |
| 💯 | Сто баллов | 💯 |
| 🎉 | Конфетти | 🎉 |
| 🎂 | Торт | 🎂 |
| 🌟 | Звезда | 🌟 |
| ✨ | Сияние | ✨ |
| 🌈 | Радуга | 🌈 |
| ☀ | Солнце | ☀ |
| ☁ | Облако | ☁ |
| 🌧 | Дождь | 🌧 |
| ❄ | Снег | ❄ |
| 🌍 | Земной шар | 🌍 |
| 💡 | Лампочка | 💡 |
| 💤 | Сон | 💤 |
| 🎵 | Нота | 🎵 |
| 🎶 | Музыка | 🎶 |
| 📱 | Телефон | 📱 |
| 💻 | Ноутбук | 💻 |
| 🚗 | Машина | 🚗 |
| 🚀 | Ракета | 🚀 |
| ✈ | Самолёт | ✈ |
| 🚲 | Велосипед | 🚲 |
| 🐶 | Собака | 🐶 |
| 🐱 | Кошка | 🐱 |
| 🐭 | Мышь | 🐭 |
| 🦊 | Лиса | 🦊 |
| 🐻 | Медведь | 🐻 |
| 🍎 | Яблоко | 🍎 |
| 🍕 | Пицца | 🍕 |
| 🍔 | Бургер | 🍔 |
| 🍩 | Пончик | 🍩 |
| 🍉 | Арбуз | 🍉 |
- 15 ноября 2024
Что писать в атрибуте alt
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<img src="picture.jpg" loading="lazy">
<iframe src="supplementary.html" loading="lazy"></iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>
- 14 сентября 2023
В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: <blockquote>, <cite> и <q>. Давайте разберёмся в их различиях.
- 12 сентября 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как отличить h1, h2 и h3
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023