Какую роль выполняет doctype

Почему важен DOCTYPE и как его правильно использовать

Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на 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

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

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

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

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

Устаревшие HTML / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.

Разница между HTML и XHTML (указаны правила для XHTML)

• Тэги должны быть написаны в нижнем регистре, вместо , как это было в HTML, нужно писать:
• Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф ( ) например, или самозакрывающиеся тэги, как например (
  ).
• Все теги должны быть правильно вложены друг в друга, без перекрытий
• Не должны использоваться устаревшие теги
• Все аттрибуты должны быть набраны в нижем регистре
• Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки
• Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled=»disabled» в XHTML против DISABLED в HTML
• Структура должна быть отделена от контента. Например тег

  — это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).

Совместимость и IE8

IE8 имеет четыре режима: IE 5.5 режим совместимости, IE 7 стандартный режим, IE в 8 стандартном режиме и IE 8 в режиме совместимости.
Выбор способа зависит от данных из различных источников: DOCTYPE, meta элементов, заголовков HTTP, периодически загружаемых данных от Microsoft (!), интрасети, настроек, сделанных пользователем, настроек сделанных администратором, наличия сайта в блеклисте microsoft и прочее!

Схема (черт ногу сломит) определения в каком режиме работать браузеру IE8

Источники информации

upd: немного подправил ошибки

HTML — interview questions

Ничего нового миру сообщить не хочу: мне просто нужно место для структуризации своих знаний в области front end в рамках повышения своего профессионального уровня.

Вдохновлена первым успешно проваленным интервью) Провалила его действительно успешно: ребята-interviewers были мега-толковые, вопросы были мега-грамотные, к собеседованию не готовилась, пришла как есть — и в ответах плавала как гусь, но приобрела четкое понимание, где проседаю, за этим, собственно, и приходила.

Вопросы будут как нагугленные, так и из реального опыта.

Какую функцию выполняет DOCTYPE?

Doctype — Document Type Definition — директива, необходимая для уведомления браузера о том, в соответствии каким стандартам сверстан HTML-документ.

Какие варианты DOCTYPE вы знаете?

Для создания документа, сверстанного по стандартам HMTL5, ему нужно указать .

Для документов, сверстанных по стандарту HTML 4.01 предусмотрены следующие варианты DOCTYPE:

В чем различие между режимом стандартов и режимом совместимости?

В режиме совместимости игнорируются все стандарты, и поведение браузера становится непредсказуемым. В режиме совместимости новые браузеры сознательно эмулируют баги старых браузеров (вплоть до 4 интернет эксплорера — и кому, интересно, это нужно?)

А вот чем именно отличается это поведение — вагон нюансов, о которых можно подробно почитать по нижеприведенным ссылкам. Даже не знаю, стоит ли это держать в голове? Не хотелось бы.

Интересно, используют ли знания об особенностях режимов совместимости в реальных проектах?

• http://htmlbook.ru/samlayout/rezhimy-brauzerov/rezhim-sovmestimosti
• http://usabili.ru/news/2009/07/09/what_happens_in_quirks_mode.html

Какой элемент позволяет уведомить клиента о том, что у него отключен JavaScript?

Для этой цели существует элемент noscript

Все что расположено внутри элемента noscript будет показано только тем пользователям, у которых отключен JavaScript.

Чем HTML отличается от XML?

XML, как и HTML, является языком разметки, допускающим иерархическую структуру и описывающим разметку с помощью тегов, которые могут иметь атрибуты.

• Чувствителен к регистру тегов и атрибутов
• Оперирует произвольными тегами и атрибутами
• Требует закрытия всех тегов
• Нет логических атрибутов, все атрибуты являются парами имя — значение.

Что такое XHTML?

Это HTML, сверстанный по строгим правилам языка разметки XML.

В чем состоят ограничения при работе со страницами XHTML?

• Все тэги должны быть закрыты
• Недопустима сокращенная запись атрибутов (checked=”checked” a не checked)
• Только строчные буквы в именах тегов
• Обязателен один и только один корневой элемент
• Все спецсимволы должны быть представлены в виде кодов

Существуют ли трудности при работе с такими страницами как application/xhtml+xml?

IE не отображает файлы в таком формате, а пытается загрузить их как обычный файл.

Можно ли использовать синтаксис xhtml в html5?

Корректный xhtml-документ является корректным документом html5

Как работать со страницей, на которой присутствует контент на нескольких языках?

• Использовать атрибут lang в тэгах (В XHTML атрибут xml:lang) для указания языка, на котором написан данный элемент. Браузер использует этот атрибут для корректного отображения некоторых символов.
• атрибут lang в html — задает язык всей страницы
• передача языка в Content-Language HTTP заголовке

О чем следует помнить при оформлении или разработке многоязычных сайтов?

• Разная длина слов в языках — потенциальные проблемы с невлезающим контентом
• Необходимо грамотно использовать hreflang атрибут тега link — указывает язык документа, на который ведет ссылка.
• Для языков, читаемых справа налево нужно использовать dir rtl
• Необходимо задавать utf-8 кодировку в meta атрибуте
• Можно задавать разный размер шрифта для разных языков через :lang()

Для чего рекомендуется использовать атрибуты data-?

Для того, чтобы поместить в элемент информацию, не нарушая стандарты html и не создавая “левых” несуществующих тегов.

Что является строительными блоками HTML5?

• : Представляет блок заголовка страницы;
• : Подвал страницы;
• : Навигационные элементы страницы;
• : Основной контент страницы (статья);
• : Используется внутри статьи, чтобы разделить статью на секции;
• : Представляет боковой блок страницы.

У меня этот вопрос звучал в интерпретации: расскажите про эти элементы: header, footer, nav, article, aside. Можно ли поместить на страницу 2 элемента footer?

Почему-то интервьюеры скривились, когда я ответила на этот вопрос: “- Теоретически, можем”. И все же цитата из Новая Большая Книга CSS:

Footer содержит информацию, которая обычно помещается в нижнем колонтитуле страницы (информация об авторских правах и тд). Но на количество ограничений footer на одной странице ограничений не накладывается, вы можете, скажем, поместить нижний колонтитул внутри элемента article чтобы хранить в нем информацию, относящуюся к публикации, например, ссылки или выписки.

В каких браузерах поддерживаются семантические элементы HTML5? Что делать если надо поддерживать более “древние” браузеры?

Минимальные версии браузеров, поддерживающих семантический элементы HTML5, перечислены ниже.

Для поддержка более старых браузеров (кроме IE) необходимо определить блочное отображение неизвестных элементов:

article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary display: block;
>

Для IE lt IE9 поддержку неизвестных элементов можно подключить, зарегистрировав их с помощью JS.

Все это совмещено в т.н. HTML5 shiv, который необходимо подключить в head.

Что такое блочная модель? Какие box-модели есть в HTML4 и есть ли отличия в HTML5?

Каждый элемент в HTML документе выводится внутри отдельного прямоугольного блока, описываемого блочной моделью.

Согласно блочной модели, каждый блок состоит из

Существует 2 блочные модели:

• модель от W3C — поддерживается всеми браузерами
• традиционная модель — поддерживается IE6 в режиме обратной совместимости

Отличия: ширина блока в стандартной модели включает только ширину контентной части, в древней традиционной модели — все кроме margins.

Управлять блочной моделью можно с помощью свойства box-sizing:

• content-box — дефолтное значение — при расчете ширины учитывается только контент
• border-box — при расчете ширины учитываются паддинги и границы

Box-sizing не работает IE старше IE 8;

Про отличия в HTML4 и HTML5 я ничего не нашла.

Что такое ul и ol?

Unordered list и Ordered list

Что такое адаптивная и резиновая верстка?

• фиксированная — не реагирует на изменение ширины страницы
• резиновая — блоки тянутся при изменении ширины страницы
• адаптивная — при изменении ширины страницы изменяется разметка, причем рывками
• отзывчивая = адаптивная + резиновая

Здесь можно потягать страницу с примером и прочувствовать разницу

Как открыть ссылку в новом окне браузера?

С помощью значения _blank атрибута target элемента anchor.

В целом target может принимать следующие значения:

• _blank
• _self — поведение по умолчанию, открывает ссылку в том же окне
• _parent — открывает в родительском фрейме, если у родителя фрейма нет, работает как _self
• _top — oтменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
• framename —открывает во фрейме с заданнным именем

(_parent и _top какие-то странные).

Как сделать так, чтобы все ссылки на странице открывались в новом окне браузера?

Прописать желаемое поведение в base элементе внутри тега header

За что отвечает элемент base?

1. В нем можно указать базовый адрес текущего документа;
2. В нем можно задать целевое окно для всех ссылок на странице

На что влияет attribute type элемента input? Какие вы знаете types input’а?

Этот атрибут сообщает браузеру, какое именно поле мы создаем и полностью определяет внешний вид и поведение элемента.

Типы: button, checkbox, file, hidden, image, password, radio, reset, submit, text.

Новые типы в HTML5: color, date, datetime, datetime-local, email, number, range, search, tel, time, url, month, week.

Q: Объясните различие между , и

1. Загрузка происходит синхронно. Браузер видит тег , начинает его загружать, потом выполнять, и пока не завершит — дальше страницу не рендерит.

2. работает полностью асинхронно. Браузер видит тег , начинает его загружать, но при этом продолжает рендерить страницу.

• Скрипт начнет выполняться как только загрузится, вне зависимости от того, вся ли страница отрендерилась
• При загрузке нескольких ничего не гарантируется. Кто первый догрузится, тот первый и отработает, как повезет.
• Поддерживается всеми браузерами, кроме IE9.

3. работает также асинхронно. Браузер видит тег , начинает его загружать, но при этом продолжает рендерить страницу.

• Скрипт начнет выполняться только после того, как вся страница отрендерилась
• При загрузке нескольких гарантируется последовательный порядок их выполнения.
• Поддерживается всеми браузерами.

Илья Кантор как всегда объясняет шикарно.

Q: Почему хорошей практикой считается вставлять CSS s между тегами а JS сразу перед ? Знаете ли вы какие-либо исключения?

Стили нужно применять к странице сразу при ее отрисовке, а скрипты (обычно) могут и подождать.

Вполне вероятна ситуация, когда некоторые “тяжелые” стили (анимации или сложные градиенты) можно подгрузить попозже, а значит, поместить в конец body, а некоторый жизненно необходимый javascript (счетчик посещений, которому невмоготу ждать загрузки длинной нудной страницы) нужно загружать сразу же и потому стоит поместить в head.

Q: Что такое прогрессивный рендеринг?

Это такая технология загрузки страницы, когда браузер не ждет, пока весь контент страницы будет целиком загружен, а отрисовывает каждую поступившую часть сразу же.

А тут долго и в подробностях

Q: Использовали ли Вы какие-либо языки HTML шаблонов?

В ASP.NET был Razor, немного приходилось EJS крутить, но совсем капельку.

Для продолжения

Знакомы ли с подводными камнями вёрстки почтовых шаблонов?Способы оптимизации загрузки изображений?

HTML-теги, без которых в SEO никуда

Мы привыкли, что большинство манипуляций с HTML-кодом выполняет программист. Так и должно быть. Но это ни в коем случае не освобождает сеошника от необходимости знать базовые HTML-теги. Как минимум — для правильной постановки ТЗ, а как максимум — для понимания, как теги влияют на SEO. Какие теги и атрибуты важны для продвижения, как их правильно оформлять и зачем они нужны? Мы прошлись по самым важным для сеошников и диджитал-маркетологов тегам и составили список, чтобы вы могли освежить свои знания или же разобраться в основах HTML с нуля.

База — коротко о важном

HTML-код — это язык, с помощью которого страница сообщает браузеру, какие элементы она содержит, и что нужно выводить на экран. HTML — это основа большинства веб-страниц и одна из важнейших частей технического SEO. С помощью элементов HTML SEO-специалисты могут предоставлять информацию о страницах как пользователям, так и краулерам. Таким образом, можно понять, какая структура страницы и порядок ее содержимого, а также как одна страница связана с другими. Простыми словами, если зайти на страницу сайта, вы увидите сверстанный текст, с разделами и подзаголовками, картинками и ссылками. Но для браузера и поисковых систем такая страница представляет собой просто строки HTML-кода с определенными элементами. Мы уже затронули термины «элемент HTML» и «тег», но есть также метатеги и атрибуты. Вы легко можете запутаться, если не знаете, в чем разница. Поэтому давайте разберем основные термины, которые мы будем часто использовать в этой статье.

Структура элемента HTML

HTML-код состоит из элементов, каждый из которых может быть тегом или метатегом. Если у него есть дополнительные характеристики, это атрибуты. Элемент HTML -— это тип компонента HTML-документа, который состоит из дерева простых узлов HTML, таких как текстовые узлы. Такие элементы позволяют HTML-документу иметь определенную семантику и форматирование. На картинке детально показано, из чего состоит элемент HTML. В данном случае это заголовок, который обозначается в коде с помощью открывающего тега и закрывающего тега . У заголовка есть атрибут align=“left”, который выравнивает его по левой части страницы. Тег — это элемент языка HTML. С его помощью разграничивают начало и конец каждого элемента. Теги определяют, как браузеры форматируют и отображают содержимое страницы. Например, если мы хотим подчеркнуть текст на странице, используется тег . Теги могут быть парными, один из них открывающий, а другой — закрывающий (например, …), или одиночными (например, или ). Метатег — это разновидность тега. С его помощью поисковики и браузеры получают техническую информацию о странице сайта — описание страницы, ключевые слова, кодировку документа, правила индексирования для поисковиков и другие. Все метатеги должны находиться в теге документа. Интересно, что description и keywords являются метатегами, а title — тегом. Атрибут — дополнительная характеристика тега или метатега. Они представляют собой специальные слова, которые используются внутри начального тега для управления поведением элемента. Например, ранее мы говорили о теге, который добавляет на страницу картинку. А вот его атрибут alt задает альтернативный текст для изображения в случае, если оно не будет отображаться.

 
Добро пожаловать в мой блог о SEO
 

     Текст документа 

      
Это заголовок текста
 
А это абзац.
  

     
Это заголовок 
А это абзац.





  

      
Это заголовок
 
А это абзац.
  

src=”imagefile.png”

src=”/images/imagefile.png”

src=”https://www.website.com/images/imagefile.png”

Выделенный текст

Текст полужирным

Важный текст

 
 
Рейтинг стран
 
Япония
 
 

    
  
Напишите здесь заголовок 
Опубликовано Дарьей Ивановой 
Представьте ваш текст  
И детально напишите все, что хотели
 
  

Все о тегах для новичков в SEO 
Мы решили написать эту статью, потому что периодически получали вопросы в поддержку, связанные с HTML-тегами.
 
С чего начать 
Мы не будем учить вас писать код для сайта, а покажем, с какими тегами чаще всего сталкивается сеошник.

   
Футер
  
Автор: Дарья Иванова [email protected]">[email protected]
   

      
The div tag
  
Заголовок в теге div 
Текст в теге div.  
Текст вне тега div.





  

 
Лондон
 
Лондон — столица Англии и Соединенного Королевства. В самом центре Лондона находится здание парламента — Вестминстерский дворец, а также знаменитая часовая башня Биг-Бен и Вестминстерское аббатство. На противоположном берегу Темзы расположено колесо обозрения, с которого открывается панорамный вид не только на южный берег, но и на весь город.
 

   
Элемент nav
 
Элемент nav задает навигационные ссылки:
 HTML | CSS | JavaScript | Python   

     
Разум — это Будда, а прекращение умозрительного мышления — это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум — это Будда, что Будда — это сущность разума, и что разум подобен бесконечности.
  

    
Разум — это Будда, а прекращение умозрительного мышления — это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум — это Будда, что Будда — это сущность разума, и что разум подобен бесконечности.