Тарифы 

Дочерние и родительские элементы в html. !DOCTYPE

-это элемент предназначенный, для типа будущего документа (в частности HTML и XHTML). Абвиотура DTD-что в переводе означает (document type definition) описание е типа документа. Этот элемент необходим для того, что бы браузеры могли понимать, как им следует видеть и отображать будущий документ, веб страницу.
На данном этапе веб разработок существует несколько видов элемента . Ниже в таблице №1, предоставлены несколько основных типов этого элемента и их краткое описание.

Таблица №1

Вид элемента Краткое описание
HTML 4.01
Тип строгий синтаксис HTML.
Тип переходный синтаксис HTML.
Указывает на то, что в HTML-документе применяются фреймы.
HTML 5
Для всех документов.
XHTML 1.0
Тип строгий синтаксис XHTML.
Тип переходный синтаксис XHTML.
Указывает на то, что документ написан на XHTML и содержит фреймы.
XHTML 1.1
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Разберём по порядку устройство строки с элементом .

Элементверхнегоуровня ][Публичность ]"[Регистрация] //[Организация ]//[Тип ][Имя ]//[Язык ]" "">

- тип будущего документа.

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег .

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в .

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

Вот, пожалуй, основной принцип, устройства и действия данного элемента ..
Закрывающий тег для данного элемента не требуется.
В качестве примера приведён HTML 4.01:

Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на PHP, MySQL, Javascript. А также другим технологиям необходимым для выпуска качественных сайтов. Начать решил с самого «верха», с HTML тэгов. Буду рад, любым комментариям:)
Сразу оговорюсь, что бОльшая часть информации я нашел в интернете, внизу статьи будут приведены ссылки на источники. Часть информации была переведена совместно с google translate.
Итак:

Почему так важен DOCTYPE

Вроде бы вы сделали все правильно, но ваш сайт почему-то не выглядит или не работает, как ожидалось, в последних версиях броузеров.
Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.
Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега.

Что такое DOCTYPE?

Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
Тег DOCTYPE также важен для правильного отображения и работы страницы в броузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).
Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает броузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.
Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, броузер перейдет в «загадочный» (quirk) режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов.
В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что).
Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE.

Проблема

Когда создавали NN4, IE4 выполняли правила CSS не совсем в соответствии со стандартом. Реализация Netscape была просто ужасной, IE4 подошел к реализации стандарта лучше, но тем не менее, реализовал его не до конца. Хотя IE 5 Windows исправил множество ошибок IE 4, но оставались другие сбои в CSS (в основном в модели окон (window model)).
Поэтому, когда соответствие стандартам стало важным, W3C поставил производителей браузеров перед жестким выбором.
Приблизится к спецификации W3C было одним из решений проблемы, но если бы производители браузеров просто изменили реализацию CSS, чтобы соответствовать стандартам полностью, многие веб-сайты, «поползли» бы в большей или меньшей степени или оказались полностью неработоспособными. Такое сближение с соблюдением стандарта повлекло бы за собой проблемы. С другой стороны, не приведение к соответствию стандартов могло бы внести вечную путаницу в эпоху войны браузеров.

Решение

Поэтому решением этой проблемы было
  • позволить веб-разработчикам, которые знали о стандартах, выбирать какой режим использовать.
  • продолжать показывать старые страницы по старым (совместимым) правилам. (quirks mode)

Иными словами, всем браузерам необходимо было работать в двух режимах: режим совместимости для старых правил, и строгого режима для стандарта.
IE Mac был первым браузером использовавшим оба режима, а Windows IE 6, Mozilla, Safari, Opera и последовали его примеру.
IE 5 Windows, а также старые браузеры, как Netscape 4, постоянно заблокированы в режиме совместимости.

Решение о выборе, какой режим отображения требуется вызвать, было найдено в использовании «DOCTYPE» переключения. Согласно стандартам, любой (X) HTML документ должен иметь DOCTYPE который рассказывает всему миру, какой тип (X) HTML документа он использует.

Допустимые DTD

DOCTYPE Описание
HTML 4.01
Строгий синтаксис HTML.
Переходный синтаксис HTML.
В HTML-документе применяются фреймы.
XHTML 1.0
Строгий синтаксис XHTML.
Переходный синтаксис XHTML.
Документ написан на XHTML и содержит фреймы.
XHTML 1.1
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

HTML 4.01 DTDs

  • HTML 4.01 Strict - Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS.
  • Transitional DTD позволяет некоторые устаревшие аттрибуты и элементы
  • Если используются фреймы - должен быть использован frameset doctype

XHTML 1.0 DTDs

  • XHTML Strict DTD самый строгий существующий DTD: устаревшие (см ниже) теги не поддерживаются, и код должен быть написан правильно
  • XHTML Transitional DTD такой же как XHTML Strict DTD, но старые теги разрешены. Это НАИБОЛЕЕ ПОПУЛЯРНЫЙ в настоящий момент DTD.
  • XHTML Frameset DTD единственный XHTML DTD который поддерживает фреймы.

XHTML 1.1 DTD

Это новый DTD, который имеет строгость как у XHTML 1.0 Strict, и основан на фреймворке и модулях описанных в Modularization of XHTML (не стал искать что это такое:).

Статистика использования различных DTD

Староватая (с 2004 по 2008 гг), конечно, но новой не нашел.
www.qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_thrd=128

Получается что Более 50% сайтов работают в режиме quirk mode - то есть в режиме IE4!

Устаревшие тэги и аттрибуты

Устаревшие тэги в алфавитном порядке

  • Используйте тег.
  • используйте CSS.
  • используйте CSS.
  • используйте CSS.
  • используйте
      .
    • используйте CSS.
    • используйте CSS.
    • используйте 
      Или CSS.
    • замените тегом
        или CSS.
      • Используйте <pre>Или Source code.</li> <li><s>используйте<del> или <ins>.</li> <li><strike> используйте <del> или<ins>.</li> <li><u>используйте CSS.</li> <li><xmp> используйте <pre>И CSS стиль.</li> </ul><h3>Устаревшие HTML / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.</h3><ul><li>align</li> <li>alink</li> <li>background</li> <li>bgcolor</li> <li>color</li> <li>hspace</li> <li>vlink</li> <li>vspace</li> </ul><h2>Разница между HTML и XHTML (указаны правила для XHTML)</h2><ul><li>Тэги должны быть написаны в нижнем регистре, вместо <img src='/rates/dochernie-i-roditelskie-elementy-v-html-doctype-standarty-html-validnaya-verstka.html' loading=lazy>, как это было в HTML, нужно писать: <img src='https://i2.wp.com/resource/frankisboat.gif' height="227" width="389" loading=lazy></li> <li>Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф () например, или самозакрывающиеся тэги, как например (<br />).</li> <li>Все теги должны быть правильно вложены друг в друга, без перекрытий</li> <li>Не должны использоваться устаревшие теги</li> <li>Все аттрибуты должны быть набраны в нижем регистре</li> <li>Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки</li> <li>Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled="disabled" в XHTML против DISABLED в HTML</li> <li>Структура должна быть отделена от контента. Например тег <p>Это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).</li> </ul><h3>Совместимость и IE8</h3> IE8 имеет четыре режима: IE 5.5 режим совместимости, IE 7 стандартный режим, IE в 8 стандартном режиме и IE 8 в режиме совместимости. <br> Выбор способа зависит от данных из различных источников: DOCTYPE, meta элементов, заголовков HTTP, периодически загружаемых данных от Microsoft (!), интрасети, настроек, сделанных пользователем, настроек сделанных администратором, наличия сайта в блеклисте microsoft и прочее! <h4>Схема (черт ногу сломит) определения в каком режиме работать браузеру IE8</h4>http://hsivonen.iki.fi/doctype/ie8-mode.pdf <h3>Источники информации</h3>http://hsivonen.iki.fi/doctype/ - подробная таблица выбора режима работы (все браузеры) <p>Я думаю, что многие знают о <b>контекстных селекторах в CSS </b>. Они используются чаще всего, однако, опытные верстальщики прекрасно знают, что иногда контекстные селекторы вносят определённые проблемы. Это проблема связана с тем, что в структуре элемента может быть много одинаковых элементов, вложенных друг в друга. И необходимо применить стиль не для всех вложенных элементов, а только к непосредственно дочернему элементу. Вот для этого и используются <b>дочерные селекторы в CSS </b>.</p> <p>Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой <b>HTML-код </b>:</p><p> <div class="container"><br> <div><br> <p>Первый абзац</p><br> </div><br> <p>Второй абзац</p><br> </div> </p><p>И наша задача сделать красным только "<b>Второй абзац </b>". Если мы напишем с использованием контекстного селектора:</p><p>Container p {<br> color: red;<br> } </p><p>То у нас станут красным оба абзаца, что нам совсем не нужно. Данная задача очень просто решается с помощью <b>дочерних селекторов в CSS </b>:</p><p>Container > p {<br> color: red;<br> } </p><p>Всё, теперь красным у нас стал только "<b>Второй абзац </b>". Поскольку именно данный абзац является непосредственно дочерним для <b>.container </b>. А "<b>Первый абзац </b>" является дочерним для внутреннего <b>div </b>, таким образом, под действие дочернего селектора он не попадает.</p> <p>Вот так легко решаются такие задачи, однако, есть один огромный минус <b>дочерних селекторов в CSS </b> - они не работают в браузерах <b>Internet Explorer </b>. По этой причине, их использование крайне нежелательно. Но если Вы вдруг где-нибудь встретите, то теперь Вы будете знать, что означает данный тип селекторов и что он делает.</p> <p>Дочерние селекторы CSS - это селекторы, которые используются для применения стилей к элементам только в тех случаях, когда они являются дочерними по отношению к другим (родительским) элементам. Как и селекторы потомков, дочерние селекторы являются составными и складываются из простых селекторов (классы, идентификаторы и т.д.).</p> <p>И снова, если вы забыли, что такое дочерние элементы, то давайте вспомним, разобрав уже знакомый вам пример.</p><p> <тег1> <тег2>...</тег2> <тег3><тег4>...</тег4></тег3> </тег1> </p><p>Элемент называется дочерним по отношению к другому элементу, если он находится внутри него на первом уровне вложенности. В нашем примере <тег2> и <тег3> являются дочками <тег1> , а <тег4> - это дочка <тег3> .</p> <p>Дочерние селекторы состоят из двух или более простых селекторов разделенных знаком "> ", где сначала указывается родитель, потом его дочерний элемент, затем дочка этого <a href="/supertrip/dochernie-selektory-css-dochernie-selektory-obrashchenie-k.html">дочернего элемента</a> и т.д. То есть, как и в селекторах потомков, задается путь прохождения по дереву документа. Стили будут применены только к тем элементам, селекторы которых находятся последними в списке. Общий синтаксис:</p> <p>селектор1 > селектор2 { </p> <p>Пробелы с обоих сторон знака "> " можно ставить, а можно и нет, по желанию.</p> <p>Пример использования дочерних <a href="/yota/css-pervyi-kak-rabotaet-css-selektor-nth-child.html">селекторов CSS</a></p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Дочерние селекторы</title> <style type="text/css"> body > div { border: 2px green solid; /* стили рамки DIV, когда он дочка BODY */ margin: 20px; /* размер внешних полей */ padding: 0 10px; /* размер <a href="/beeline/zapomnim-navsegda-chem-otlichayutsya-margin-i-padding-padding-margin-i-border.html">внутренних отступов</a> */ } div > div > p { color: blue; /* <a href="/services/kakoi-cvet-predstavlen-zapisyu-0000ff-cvet-v-stilyah-mozhno.html">синий текст</a> параграфов, когда они дочерние у DIV, который является дочкой другого DIV */ } </style> </head> <body> <div> <div> <p>Параграф1.</p> </div> </div> <div> <p>Параграф2.</p> </div> </body> </html> </p><p>Результат в браузере</p> <p>Параграф1.</p> <p>Параграф2.</p> <p>В этом примере вам надо обратить внимание на два момента. Здесь имеется три элемента , но только у двух из них есть рамки, отступы и поля. Почему? И второй момент. Только у первого параграфа синий цвет текста.</p> <p>Internet Explorer 6.0 не понимает дочерние селекторы, поэтому, если вы создаете свой сайт с учетом этого старого браузера - помните об этом.</p> <h2>Дочерние селекторы в HTML-таблицах</h2> <p>Многие новички (а иногда уже и не новички) в создании сайтов сталкиваются с определенными проблемами при использовании дочерних селекторов в HTML-таблицах. Чтобы вы поняли, о чем <a href="/supertrip/pochemu-printer-kenon-pechataet-zelenym-cvetom-pochemu-moi-printer-pechataet-s.html">идет речь</a>, давайте посмотрим на такую обычную таблицу.</p><p> <table> <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td></tr> <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr> </table> </p><p>А теперь вопрос. Как вы поступите, если вам понадобится с помощью дочерних селекторов пройти от тега к ячейкам? Если вы решили написать вот так, то это неверно:</p> <p>table > tr > td { <span>свойство: значение; свойство: значение; ... } </p> <p>А догадываетесь, почему неверно? Нет? Дело в том, что вы забыли еще про один элемент - , который даже если не указан явно, то все равно незримо присутствует в каждой HTML-таблице. Просто у него нет обязательных открывающих и закрывающих тегов, поэтому про него часто забывают. Кстати да, в <i>HTML-учебнике </i> мы его с вами не проходили, так как в реальности его явное указание редко когда нужно. Ну, думаю вы уже догадались, какая будет <a href="/payments/nastroika-icq-zapolnenie-profilya-pravilnoe-udalenie-uchetnoi-zapisi.html">правильная запись</a>, но я вам все же покажу.</p> <p>table > tbody > tr > td { <span>свойство: значение; свойство: значение; ... } </p> <p>Кстати, не только таблицы имеют элементы с необязательными открывающими тегами, есть и еще такие элементы. Просто на практике «проблемы забывчивости» возникают чаще всего именно с таблицами, поэтому я и заострил ваше внимание на этом.</p> <p>Домашнее задание.</p> <ol><li>Установите на странице шрифт Arial с размером 0.9em и какой-нибудь фон.</li> <li>Напишите на странице несколько заголовков и параграфов, измените размер и цвет текста заголовков так, как посчитаете нужным.</li> <li>Сделайте так, чтобы ссылки непосредственно в параграфах страницы были <a href="/payments/skachat-filtr-sinego-sveta-polnaya-versiya-filtr-sinego-cveta-v-smartfone.html">синего цвета</a> без подчеркивания. Но при этом, если ссылки дополнительно обрамляются любым тегом, например для курсива, то они должны отображаться уже с подчеркиванием и красного цвета. Еще раз заостряю ваше внимание на том, что не надо прописывать стили ссылок с каждым обрамляющим тегом в отдельности, сделайте универсально. Как? Подумайте.</li> <li>Создайте <a href="/mts/odno-iz-deistvii-v-kontekstnom-prakticheskaya-rabota.html">небольшое меню</a> в правой части страницы и зафиксируйте его, для этого вам понадобится свойство и еще парочка сопутствующих ему свойств, там разберетесь. При этом, пусть меню не только остается на месте в пределах окна браузера, но и при скроллинге не наползает на содержимое страницы.</li> </ol><p>Думаю последний пункт урока будет для вас самым сложным, но не пытайтесь сразу полностью погрузиться в освоение позиционирования. Просто сделайте <a href="/megaphone/sobstvennye-i-strukturnye-tipy-dannyh-delphi-instruktazh-o.html">домашнее задание</a>. Кстати, этот пункт не будет работать в Internet Explorer 6.0, так как старичек не понимает фиксированное позиционирование.</p> <p>Приветствую Вас, <a href="/tele2/kakoi-zhestkii-disk-podoidet-ob-m-zhestkogo-diska-dobryi-den.html">уважаемые читатели</a>! Сегодня короткий материал о специальном теге doctype. В статье вы узнаете что такое doctype, зачем он нужен и какие бывают версии html-документов.</p> <p>В любом <a href="/mts/primer-stranicy-html-i-osnovnye-principy-sozdaniya-pravilnaya.html">правильном html-документе</a>, первым элементом в коде идет специальная директива <b><!DOCTYPE> </b>.</p> <h3>Что такое DOCTYPE и зачем он нужен</h3> <p>Элемент <!doctype> — DTD (document type definition, описание типа документа) указывает тип документа, который используется при <a href="/mts/pustoi-shablon-stranicy-html-shablony-html5-uproshchenie-napisaniya-doctype.html">написании html</a> кода. Это непарный тег, который должен стоять самым первым в коде каждой страницы вашего сайта.</p> <p>Директива doctype необходима, чтобы браузер понимал как обрабатывать текущую веб-страничку, так как существует несколько версий языка HTML, а еще имеется XHTML (EXtensible HyperText <a href="/internet/sredstva-gipertekstovoi-razmetki-osnovy-html-yazyk-razmetki.html">Markup Language</a>, расширенный язык разметки гипертекста), который похож на HTML, но различается с ним по синтаксису.</p> <p>Поэтому если вы хотите, чтобы ваш сайт отображался одинаково красиво и ровно во всех <a href="/rooms/populyarnye-internet-brauzery-kakoi-vybrat-brauzer-dlya.html">популярных браузерах</a>, то обязательно указывайте эту директиву с версией <a href="/tele2/yazyk-gipertekstovoi-razmetki-html-yazyk-razmetki-gipertekstovyh.html">языка html</a>, которую вы используете. Причем doctype следует указывать с общепринятыми правилами.</p> <p>Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, то браузер перейдет в хитрый режим уловок - <b>quirks mode </b>. И возможно странички вашего сайта отобразятся правильно в каких-то браузерах, но не факт, что они будут выглядеть также аккуратно в других популярных браузерах.</p> <h3>Основные типы документов</h3> <p>Ниже приведены основные типы документов:</p> <table border="1" cellspacing="0" cellpadding="5"><tbody><tr><td><b>DOCTYPE </b> </td> <td><b>Описание </b> </td> </tr><tr><td colspan="2"><b>HTML 4.01 </b> </td> </tr><tr><td><!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «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>HTML 5 </b> </td> </tr><tr><td><!DOCTYPE html> </td> <td> </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 colspan="2"><b>XHTML 1.1 </b> </td> </tr><tr><td><!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> </td> <td> </td> </tr></tbody></table><p>Пример использования <b>doctype для HTML5 </b>:</p> <p><!DOCTYPE html><br> <html><br> <head><br> <title>Страничка на HTML5</title><br> </head><br> <body><br> <p>Содержимое странички</p><br> </body><br> </html></p> <p>При выборе вида doctype следует иметь ввиду, что если вы пишите свой сайт в одном doctype, то не рекомендуется менять его в будущем на какой-то другой, так как скорей всего возникнут проблемы с правильным отображением сайта в различных браузерах, так как со сменой doctype вы поменяете правила обработки тегов браузерами.</p> <p>Таким образом указав doctype вы указываете браузерам по каким правилам обрабатывать ваш html-код. Если же doctype не указать, то соответственно <a href="/beeline/kak-vosstanovit-istoriyu-brauzera-vosstanovlenie-istorii-v-razlichnyh.html">различные браузеры</a> будут интерпретировать ваши теги по разному и следовательно отображение вашего сайта в некоторых браузерах скорей всего будет не корректным.</p> <h3>Какой doctype использовать?</h3> <p>Выбрать какой doctype использовать стало проще с выходом <a href="/supertrip/es-provodnik-pro-poslednyaya-versiya-izmeneniya-v-poslednei-versii-es-provodnik.html">последней версии</a> HTML5. Так как doctype html5 включает в себя правила <a href="/tele2/kak-otkatit-aifon-na-predydushchuyu-versiyu-vozvrashchenie-ustroistva-apple.html">предыдущих версий</a> и возможность работы с тегами html4.</p> <p><!DOCTYPE html></p> <h3>Вывод</h3> <p>Подведем итоги:</p> <ul><li><span><b>DOCTYPE </b> — это элемент, который указывает <b>тип документа </b> и определяет правила по, которым браузер будет обрабатывать ваш html-код; </span></li> <li>элемент doctype всегда должен быть размещен в первой строчке документа;</li> <li>всегда указывайте doctype, иначе ваши странички могут отображаться некорректно;</li> <li>если не знаете какой doctype использовать, указывайте <b>doctype html5 </b>: <!doctype html>.</li> </ul><p>На этом все, желаю вам успехов! До новых встреч!</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="Поиск" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Свежие записи</span></h3> <ul> <li> <a href="/services/kak-na-androide-pereklyuchit-pamyat-na-kartu-kak-sdelat-tak-chtoby-vse.html">Как сделать так, чтобы все сохранялось на карту памяти</a> </li> <li> <a href="/rates/kak-s-pomoshchyu-kompasa-nastroit-sputnikovuyu-antennu.html">Подключение спутникового ресивера к телевизору</a> </li> <li> <a href="/rostelecom/ne-zagruzhaet-gugl-plei-na-telefone-ne-rabotaet-play-market-podklyuchenie.html">Не работает Play Market, подключение отсутствует</a> </li> <li> <a href="/tele2/ustanovka-melodii-na-otdelnyi-kontakt-na-android-kak-postavit-melodiyu-na.html">Как поставить мелодию на контакт на "Андроид": советы, рекомендации, инструкции Как установить мелодию на группу контактов андроид</a> </li> <li> <a href="/internet/plei-market-versiya-2-3-6-servisy-google-play-vozmozhnosti-i-osobennosti.html">Плей маркет версия 2.3 6. Сервисы Google Play. Возможности и особенности приложения Сервисы гугл плей</a> </li> <li> <a href="/megaphone/upravlenie-linux-cherez-web-administrirovanie-linux-vvedenie-v-webmin-nastroika.html">Управление linux через web</a> </li> <li> <a href="/services/chto-delat-esli-v-nedforspid-chernyi-ekran-pochemu-nfs-rivals-ne.html">Почему NFS Rivals не запускается?</a> </li> <li> <a href="/beeline/ne-pokazyvaet-cifrovoe-kabelnoe-televidenie-kak-opredelit-pochemu-ne-rabotaet.html">Как определить, почему не работает цифровое телевидение</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> <div id="pugoza1" style="height:500px;width:300px;" align="center"></div> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> <div id="pugoza2" style="height:500px;width:300px;" align="center"></div> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">&copy; 2024 <a href="/" title="thetarif.ru"><span>thetarif.ru</span></a>. Мобильные операторы и тарифы.<br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">Есть вопросы?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name"> Имя </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email"> Email <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message"> Сообщение <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-buttons"> <div class="pweb-field"> <button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">Отправить</button> </div> </div> </div> </div> </div> <div class="pweb-msg pweb-msg-after"> <div id="pwebcontact1_msg" class="pweb-progress"> <script type="text/javascript"> document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..." </script> </div> </div> <input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token"> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(function() { jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block"); new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), { 'background_color': '#000000', 'color': '#ffffff', 'max_width': 250, 'opacity': 0.95, 'position': 'center' }); }); </script> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <div id="mistape_dialog" data-mode="comment" data-dry-run="0"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div id="mistape_confirm_dialog" class="mistape_dialog_screen"> <div class="dialog-wrap"> <div class="dialog-wrap-top"> <h2>Сообщить об опечатке</h2> <div class="mistape_dialog_block"> <h3>Текст, который будет отправлен нашим редакторам:</h3> <div id="mistape_reported_text"></div> </div> </div> <div class="dialog-wrap-bottom"> <div class="mistape_dialog_block comment"> <h3><label for="mistape_comment">Ваш комментарий (необязательно):</label></h3> <textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea> </div> <div class="pos-relative"> </div> </div> </div> <div class="mistape_dialog_block"> <a class="mistape_action" data-action="send" data-id="389" role="button">Отправить</a> <a class="mistape_action" data-dialog-close role="button" style="display:none">Отмена</a> </div> <div class="mistape-letter-front letter-part"> <div class="front-left"></div> <div class="front-right"></div> <div class="front-bottom"></div> </div> <div class="mistape-letter-back letter-part"> <div class="mistape-letter-back-top"></div> </div> <div class="mistape-letter-top letter-part"></div> </div> </div> </div> </body> </html>