DOCTYPE. Стандарты HTML
05.03.2020 Теория и практика Фотошопа
Когда впервые появились Интернет и веб-сайты, разработчики столкнулись с технической проблемой – как организовать и структурировать информацию текстовых и графических документов для удобства представления в браузерах?
Выход был найден в – языке разметки гипертекста. В те времена каждый разработчик сайта практически сочинял свой собственный язык, не думая о совместимости. В результате для каждого сайта требовался собственный браузер.
Естественно, так не могло продолжаться долго. Как только интернет стал представлять коммерческий интерес, возникла настоятельная потребность немедленно унифицировать и стандартизировать информационное пространство интернета.
Стандарт HTML 2.0
Первым признанным стандартным языком разметки гипертекста стал HTML 2.0. До этого разработчик никак не могли договориться между собой. Сайты на этом языке создавались самые простые и имели множество ограничений. И вскоре Консорциум Всемирной Паутины предложил следующую версию.
HTML 3.2
Третья версия тоже ничем особенным не отличилась. Продолжалась разработка новых возможностей, делались попытки унифицировать браузеры разных воспроизводителей.
Стандарт HTML 4.0
Четвертая версия HTML уже позволяла качественное . Были устранены многие ненужные теги. Чтобы облегчить веб-страницы, произведено разделение текстовой информации и ее форматирование путем введения такого элемента, как каскадные таблицы стилей.
Именно это и позволило добиться по-настоящему стандартного отображения сайтов в браузерах от разных производителей.
К концу 20 века четвертый HTML практически исчерпал свои возможности развития, и консорциум C3W предложил новую, расширенную версию под названием XHTML.
Стандарт XHTML 2.0
После некоторых экспериментов устоялась вторая версия расширенного языка разметки гипертекста. Собственно расширение состояло в применении формата XML для более строгой и систематизированной организации самого HTML. По сути, XHTML представляет собой все те же теги, но передаваемые в виде документа XML.
Такой процесс требует определенного ужесточения требований к HTML:
- Допустимы только строчные символы.
- Все теги должны быть закрытыми: <> .
- Форматирование текста внутри тела документа недопустимо.
- Обязательно использование каскадных таблиц стилей CSS.
Таким образом, новая версия стала “более строгой и стандартной”. Для того чтобы полностью реализовать все новые возможности, потребовались и . В то же время, старые браузеры могут воспроизводить XHTML-сайты.
Совершенно достигнуто?
Как бы не так. Компьютерные технологии не стоят на месте, появились мобильные компьютеры, возникли облачные сервисы, интернет перестал быть роскошью. Социальные сети были настоявшим прорывом в области массмедиа. Пользователи продвинулись, и от веб-сайтов стало требоваться гораздо больше возможностей, чем просто удобное обеспечение информацией.
Таким образом, XHTML был признан тупиковым путем развития еще до начала 21 века. Даже расширенного языка гипертекста оказалось недостаточно для создания динамических, интерактивных и мультимедийных веб-ресурсов.
Была попытка усилить статические сайты за счет включения программных элементов (скриптов) и реорганизации структуры веб-страницы в формате объектной модели документа. Сайты стали более быстрыми и интерактивными. Но, слишком сложными для верстки, отладки и настройки.
Стандарт HTML5 это язык для структурирования и представления материалов в сети Интернет, который был представлен и рекомендован к использованию в 2014 году. На сегодняшний момент практически все браузеры поддерживают большую часть нововведений HTML5 , однако не стоит забывать, что развитие языка продолжается и Консорциум Всемирной паутины продолжает изменять и совершенствовать пятую версию.
Обратите внимание, что начиная пятой версии язык HTML5 представлен не просто как язык структурирования, но и как язык представления, что отражено в семантической верстке, т.е. HTML теперь используется в новом качестве.
Принятие стандарта HTML5 привело к уменьшению разброса существующих технологий верстки. Так, до данного стандарта повсеместно использовались версии 4.01 HTML и стандарты XHTML 1.0 и 1.1, в результате чего страницы были представлены смесью данных технологий, что усложняло работу браузера по интерпретации страниц.Для стандарта HTML5 введен новый doctype:
Рассмотрим основные изменения которые следует учесть в первую очередь:
- согласно HTML5, язык html является независимым от регистра символов, поэтому теги можно писать с любыми сочетаниями строчных и прописных букв:
, <title> , <TiTlE> — данные написания являются правильными и равнозначными.</li> <li>html5 объединяет две технологии html и xhtml, как следствие устраняется возможность смешанных правил написания кода. Если раньше можно было встретить написания непарных тегов:<br> <meta charset="utf-8"/> так и <meta charset="utf-8"> <br> <br/> так и </br> <br> то в стандарте html5 правильным написанием является:<br> <meta charset="utf-8"> <br></li> </ol><h2>Изменения в тегах: устаревшие и адаптированные элементы</h2> <p>Перечисление всех изменений в тегах невозможно в рамках одного занятия, поскольку изменения в стандарте затронуло огромное количество тегов, поэтому давайте рассмотрим основные изменения, которые понадобятся нам в работе.</p> <h3>Гиперссылка</h3> <p><h1>Пример</h1></p> <p>которая в предыдущих стандартах вызывала ошибки, поскольку строчных элемент оборачивал блочный, в HTML5 валидна.</p> <p><i>Одним из самых популярных вопросов начинающих верстальщиков является: «<b>Как сделать гиперссылку на блоке div? </b>». И чаще всего отвечали: «Используйте JS». Как видно из примера, в HTML5 можно просто вложить внутрь гиперссылки нужные блоки. </i></p> <h3>Теги <b> и <i></h3> <p>В HTML 5 были возвращены теги <b> (делает шрифт жирным) и <i> (курсив). В современной интерпретации, данные теги служат только для визуального оформления и не несут смысловой нагрузки.</p> <h3>Тег small</h3> <p>Тег <small> использовался в предыдущих версиях для задания размера шрифта, меньше чем основной текст (антиподом ему был тег big – который увеличивал размер шрифта). Разные отображения в различных браузерах привели к вытеснению данного элемента тегом span, который значительно удобнее в использовании.</p> <p>В <b>HTML5 </b> тег <small> был возвращен, однако его интерпретация изменилась, теперь он используется для оборачивания текста, который должен быть на странице, однако не должен отвлекать внимания от основного содержимого, и быть как можно менее заметным. Аналог – текст по сноскам, или различные условия акций. Визуально также уменьшает размер шрифта текста, который оборачивает.</p> <h3>Тег address</h3> <p>В отличие от предыдущих версий HTML в пятой редакции используется только для указания контактных данных автора материалов. Не используйте тег для указания контактных данных на сайте организации (для этого следует применять микроформаты и микроданные).</p> <p>Как уже упоминалось, в рамках данного урока невозможно рассмотреть все изменения в тегах, выше мы рассмотрели адаптированные теги, теперь перечислим устаревшие:</p> <ul><li><applet> , <object> заменены тегом <embed> (используется для внедрения объектов);</li> <li><acronym> — заменили тегом <abbr> (используется для аббревиатур);</li> <li><bgsound> — заменили тегом <audio> (для внедрения проигрывателя в страницу);</li> <li><frame> — заменили на <iframe> ;</li> <li><listing> , <xmp> — заменили на теги <pre>И <code> (для вставки листингов программ и кодов);</li> <li><plaintext> — заменили на <pre></li> </ul><p>Свойства форматирования текста <big> , <center> , <font> , <u> — убрали, вместо них следует использовать CSS для оформления.</p> <p><i>Напомним, что многие устаревшие теги поддерживаются браузерами, однако валидацию страницы с устаревшими тегами не пройдут. Именно поэтому после окончания верстки страницы следует проверять ее на валидаторе. </i></p> <p>HTML 5 и CSS 3 добавили в верстку огромное количество новых тегов и свойств. Посмотрите возможности анимации с новыми CSS 3 свойствами.</p> <p>Ожидается, что в 21 веке Интернет станет во всех отношениях привлекательнее, разнообразнее, удобнее и намного быстрее. Продвинутая технология HTML 5 позволяет все инновации сделать реальными. С помощью этого веб-стандарта начнется новая эра Интернета.</p> <p>С переходом на новый веб-стандарт для просмотра видео пользователю уже не придется устанавливать на свой ПК такие дополнительные программы, как Flash. Данный материал освещает те изменения и преимущества, которые откроет перед нами внедрения HTML 5.</p><p> {slider_creation_site} </p><h2>Что представляет собой HTML?</h2> <p>Hypertext Markup Language, или язык гипертекстовой разметки HTML, является языком описания веб-страниц. Любой портал или интернет-проект строится по схеме, в основе которой лежит формат HTML. С его помощью происходит структурирование страниц таким образом, что они могут быть обработаны и отображены корректно любыми браузерами, такими как Firefox и пр.</p> <p>HTML структура отвечает за расположение на сайте различных элементов, например, графических материалов, полей ввода данных, изображений, видео, а также определяет количество текстовых колонок. Через эту структуру происходит оповещение браузера о том, какие могут потребоваться дополнительные программы для отображения контента сайта.</p> <h2>Обновления, предлагаемые HTML 5</h2> <p>Прежде всего, предложенные обновления касаются воспроизведения фото, музыки и видео. Пользователь, принявший стандарт HTML 5, не будет нуждаться в установке Adobe Flash, наиболее распространенного и модного формата. Ему не потребуются также и прочие дополнительные программы.</p> <p>Новый стандарт существенно поднимет качество отображения текста, серьезно упростит ввод данных, которые вносятся в электронные формуляры. Нововведения HTML 5 укладываются в пять основных подразделов, выведенных ComputerBild.</p> <ul><li><b>Изображения. </b> На веб-сайтах они теперь могут быть размещены без каких-либо проблем. Фотографии и изображения в галереях с помощью HTML 5 можно изменять многочисленными эффектами наплыва. Пользователь избавлен при этом от необходимости устанавливать прочие программы.</li> <li><b>Видео- и аудио-файлы </b> могут быть воспроизведены прямо в браузере путем нажатия простой кнопки воспроизведения. На экране начнется демонстрация видеоролика или зазвучит музыка.</li> <li><b>Интеграция изображений и текста </b> на интернет-сайтах в корне изменится. Выделять блоки текстов пользователь сможет с помощь доступных инструментов, похожих на световой карандаш или маркер. HTML 5 раздвигает профессиональные возможности разработки и создания сайтов , которые отныне будут походить на настоящие глянцевые издания.</li> <li><b>Предельно упрощается ввод данных </b>, заполнение электронных формуляров обретает повышенную безопасность. Ваш браузер в режиме реального времени не только проконтролирует правильность текста, но сразу же сообщит о найденных неточностях. Указав вместо e-mail свой почтовый адрес, вы получите мгновенное оповещение о допущенной ошибке. В предыдущей версии данная функция срабатывала лишь после отправки формуляра, создавая определенные проблемы для пользователя.</li> <li><b>Анимация и графика </b>, а также игры обретают новую функцию, названную Canvas. Имеется в виду графика с изменяемым контентом. Небольшие игры и анимация сразу размещаются на веб-сайтах напрямую. Предыдущая, четвертая версия стандарта, требовала установки программ типа Adobe Flash.</li> </ul><h2>О преимуществах для пользователя стандарта HTML 5</h2> <p>Новый стандарт призван серьезным образом изменить жизнь пользователей, облегчив ее.</p> <ul><li>Вам потребуется много меньше дополнительных программ, поскольку стандарт нового поколения снимает в них необходимость. Лишь в самых исключительных случаях вам может понадобиться установка дополнительного программного обеспечения.</li> <li>Безусловна универсальность HTML 5. По сравнению со своим предшественником, новый стандарт совместим с планшетами, смартфонами, продвинутыми моделями ТВ, имеющими доступ в Интернет. Четвертая версия совмещалась только с ноутбуками и ПК. С появлением HTML 5 владельцы смартфонов и планшетов сразу почувствуют, насколько проще и удобнее станет их общение с Интернетом. Они ощутят скачок скорости загрузки, а загружаемые сайты будут выглядеть ярче и четче.</li> <li>Новый стандарт приводит отображение контента к единому виду. Пользователи постоянно сталкиваются с тем, что страница, открытая в различных браузерах, имеет, иной раз, совершенно отличный вид. С введением HTML 5 данная проблема снимается.</li> </ul><h2>Что потребуется для работы со стандартом HTML 5?</h2> <p>Прежде всего, пользователь должен будет установить одну из современных версий браузеров. Это может быть последние версии Google Chrome, Internet Explorer или Mozilla Firefoх, Apple Safari или Opera. На сайтах производителей доступны для скачивания все эти обновленные версии.</p> <h2>Безопасность и защита данных при стандарте HTML 5</h2> <p>К сожалению, новый стандарт пока не сможет похвастаться надежной защитой данных пользователя. HTML 4 делает это лучше. В настоящее время стандарт HTML 5 дает возможность владельцам сайтов копировать на жесткий диск огромные файлы. Сookie HTML 4 служат для трекигна, то есть отслеживания хождений пользователя по сети.</p> <p>В процессе работы на жестком диске ПК отображаются файлы небольшого размера, которые могут предоставить сведения о посещаемых пользователем сайтах, просмотренных страницах и прочих действиях, совершенных на сайте. Сервер считывает данные cookie при повторном посещении сайта, давая возможность пользователю не потерять найденную однажды информацию.</p> <p>Сookie HTML 5 допускают хранение данных огромного объема. В них содержится подробнейшая информация о клиенте, что является небезопасным.</p> <p>Cookie пятой версии стандарта возможно запрограммировать так, что они будут храниться на протяжении длительного времени. Незаметно для пользователя они могут быть просканированы и переданы владельцу посещенного сайта.</p> <p>Заметим, однако, что у больших cookie имеются определенные преимущества. Такие файлы могут хранить веб-сайты целиком. При необходимости их можно просматривать даже в режиме офлайн, для чего и создана эта функция.</p> <p>Определенную выгоду сразу прочувствуют те пользователи, которым необходимо применять через Интернет программы, такие как, к примеру, Google Docs. На жестком диске локального ПК облачные сервисы сохранят данные, обеспечивая веб-службы высокой скоростью работы.</p> <h2>HTML5 - реальность или далекое будущее?</h2> <p>По большому счету, стандарт уже готов, хотя официально пока не принят. Ряд его новых функций можно опробовать в действии уже в настоящее время, при наличии описанного выше браузера.</p> <p>Окончание работ над стандартом намечено лишь на начало 2014 года, что утверждают в консорциуме W3C. Проволочка связана с тем, что не по всем функциям достигнуто согласие. Некоторые аспекты HTML 5 пока необходимо дорабатывать. Прежде всего, это относится к функциям, облегчающим жизнь пользователей, например, воспроизведение музыкальных или видеофайлов.</p> <p>Разногласия происходят следующего порядка: MS и Apple предпочитают распространенный лицензионный формат MPEG-4, при этом Google ориентирован на внедрении WebM, так как компания Оn2, его разработчик, вошла в состав Google. При этом Opera и Mozilla ставят на формат Ogg Theodora. Данный вид не потребует лицензирования и связанных с ним отчислений, но и идею WebM они тоже поддерживают.</p> <p>Всем, кто увлекается передовыми веб-технологиями, будет не безынтересно узнать о кластерном хостинге, который при всей своей новизне стал уже весьма популярен. Он позволит распределить нагрузку между серверами, повысив тем самым отказоустойчивость и стабильность их работы. Аптайм, который оказывает положительное влияние на отношение поисковиков к ресурсу, существенно повышается.</p> <p><b><!DOCTYPE> </b> указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.</p><br><table class="tbl1"><tbody><tr><th style="width:65%;">DOCTYPE </th><th>Описание </th> </tr><tr><td colspan="2"><b>HTML5 </b> </td> </tr><tr><td><!DOCTYPE html> </td> <td>Для всех документов. </td> </tr><tr><td colspan="2"><b>HTML 4.01 </b> </td> </tr><tr><td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br>"http://www.w3.org/TR/html4/strict.dtd"> </td> <td>Строгий синтаксис HTML. </td> </tr><tr><td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </td> <td>Переходный синтаксис HTML. </td> </tr><tr><td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> </td> <td>В HTML-документе применяются фреймы. </td> </tr><tr><td colspan="2"><b>XHTML 1.0 </b> </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> </td> <td>Строгий синтаксис XHTML. </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </td> <td>Переходный синтаксис XHTML. </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> </td> <td>Документ написан на XHTML и содержит фреймы. </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> </td> <td>XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов. </td> </tr><tr><td colspan="2"><b>XHTML 1.1 </b> </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br>"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> </td> <td>Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. </td> </tr></tbody></table><p>Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.</p> <h2>Стандарты HTML и XHTML</h2> <p>HTML - стандартный язык разметки Web-документов.</p> <p>В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.</p> <p>Например, тег <font> и атрибут align объявлены устаревшими.</p> <p>XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.</p> <table class="tbl1"><tr><th style="width:38%;">Требования XHTML </th><th style="width:31%;">Нельзя </th><th style="width:31%;">Нужно </th> </tr><tr><td>Все теги должны быть закрыты. </td><td style="text-align:center;"><br> </td><td style="text-align:center;"><br /> </td> </tr><tr><td>Все теги, атрибуты и CSS-свойства должны быть набраны в нижнем регистре. </td><td style="text-align:center;"><img src='/doctype-standarty-html-validnaya-verstka-opisanie-tipa-dokumenta/' loading=lazy> </td><td style="text-align:center;"><img src='/doctype-standarty-html-validnaya-verstka-opisanie-tipa-dokumenta/' loading=lazy> </td> </tr><tr><td>Все значения атрибутов тегов должны быть заключены в кавычки. </td><td style="text-align:center;"><a href=http://сайт> </td><td style="text-align:center;"><a href="http://сайт"> </td> </tr><tr><td>Должна строго выполняться иерархия: первый тег закрывается последним. </td><td style="text-align:center;"><em><u>...</em></u> </td><td style="text-align:center;"><em><u>...</u></em> </td> </tr><tr><td>Блочный тег не может быть вложен в строчный. (После блочного элемента дальнейший вывод на странице осуществляется с новой строки. Строчный элемент перевода строки не делает.) </td><td style="text-align:center;"><div>...</div> </td><td style="text-align:center;"><div>...</div> </td> </tr><tr><td>Булевы атрибуты записываются в развёрнутой форме. </td><td style="text-align:center;"><option selected> </td><td style="text-align:center;"><option selected="selected"> </td> </tr><tr><td>У изображений обязательно должно быть указано описание </td><td style="text-align:center;"><img src='https://i2.wp.com/Ba.gif' loading=lazy> </td><td style="text-align:center;"><img src='https://i0.wp.com/Ba.gif' loading=lazy> </td> </tr></table><p>Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.</p> <p>Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.</p> <p>Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:</p> <p>Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/</p> <p>Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.</p> <p>На!DOCTYPE, предназначенных для документов, использующих фреймы , останавливаться не будем: позавчерашний день.</p> <p>Следующий вопрос: какой выбрать синтаксис - строгий или переходный?</p> <h2>Строгий и переходный синтаксис HTML 4.01</h2> <p>Переходные синтаксисы существуют для того, чтобы облегчить переход на новый стандарт. Они пропустят многое из того, что строгий синтаксис посчитает ошибками.</p> <p>Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.</p> <h4>Строгий синтаксис</h4> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Проверка на валидность Проверка на валидность
красным цветом.