Стандартный код html страницы. !DOCTYPE

Конечно, это не полная спецификация языка XHTML, в нем есть ряд ограничения, связанный со скриптами и еще Бог знает с чем. С полной спецификацией можно ознакомится в соответствующем разделе сайта W3C (хоть там все и на английском, но с красочными примерами правильного и ошибочного синтаксиса, так что желающий понять – поймет).

Как я говорил ранее XHTML – это расширяемый язык гипертекстовой разметки. Однако, вся эта расширяемость плохо воспринимается поисковиками, некорректно работает в IE6 и IE7, возникает необходимость настраивать заголовки, передаваемые сервером и выполнять строгие правила формата XML, чтобы все достоинства XTML работали в полную силу.

Достоинства языка XHTML – это вовсе не строгость синтаксиса, а возможность использовать хитрые теги разметки, например, принадлежащие пространству имен MathML (пример , который нужно запускать только в нормальных браузерах; IE6, вместо интерпретации XHTML кода, поднимет диалог сохранения файла) или придумывать теги самостоятельно в своем собственном пространстве имен (этот процесс детально описан на сайте W3C , анг. язык).

Дальнейшее развитие революционной ветки XHTML – это выход стандарта XTML 2.0 , значительно отличающегося от привычного HTML и несовместимого с XHTML 1.0. Окончание работ над XHTML 2.0 планировалось на 2009 год.

Стандарт XHTML 2.0 был заброшен и организация W3C переключил на разработку HTML 5.

Утвердить стандарт HTML 5 планируется не ранее 2020 года.

Теперь, вооружившись знаниями истории стандартов, снова вернемся к статье на htmlbook.ru про DOCTYPE .

Мы знаем, что такое HTML 4.01 и XHTML 1.0. Остаются открытыми три вопроса:

• Что такое строгий и переходный синтаксис?
• Какой стандарт выбрать?
• Как научится верстать в соответствии с выбранным стандартом?

Теперь я последовательно отвечу на все поставленные вопросы.

Что такое строгий и переходный синтаксис

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

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

Теперь поэкспериментируем.

Сначала я выберу строгий синтаксис формата HTML 4.01 и укажу соответствующую директиву DOCTYPE:

Эта абракадабра означает, что HTML-код, идущий ниже, соответствует стандарту 4.01, принятому организацией W3C (вот этот кусок абракадабры "-//W3C//DTD HTML 4.01//EN" ). Инструкции, написанные организацией W3C, касательно данного стандарта, находятся вот там: "http://www.w3.org/TR/html4/strict.dtd" и браузер может прогуляться по этому адресу для уточнения.

Экспериментировать будем с вот таким HTML-кодом:

Проверочка

Немного текста

Основное внимание нужно обратить на присутствие в коде запрещенных элементов: align="center" и тега .

Теперь проверим этот код на соответствие стандартам. Как я неоднократно говорил ранее, есть замечательное расширение для FireFox под названием . Програмулина показывает две ошибки в HTML-коде:

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

Заменим первую строчку на доктайп стандарта HTML 4.01 переходного синтаксиса :

Теперь абракадабра сообщает браузеру, что HTML документ написан в соответствии с переходным синтаксисом стандрата HTML 4.01, потому что автору документа, периодически, непреодолимо хочется использовать запрещенные стандартом директивы. Поставив этот DOCTYPE в код, приведенный выше, повторим валидацию.

Вуаля, уважаемый читатель, тех двух ошибок как не бывало:

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

Переходный доктайп стандарта XHTML 1.0 позволит использовать HTML-директивы для задания внешнего вида, но за соответствием идеологии XML будет следить пристально и реагировать ошибкой валидации на каждый незакрытый одиночный тег или отсутствие alt-свойства у картинки.

Какой стандарт выбрать

Я считаю, что нужно верстать валидно в соответствии со строгим синтаксисом стандарта. Это заставит использовать HTML по его прямому назначению и не мешать котлеты с мухами в одной тарелке. Кроме того, если сайт сверстан валидно и неправильно отображается в каком-либо браузере – то это проблема браузера, новые версии которого все лучше и лучше соответствуют стандартам организации W3C и исправляют ошибки интерпретации валидного кода. А вот если вы реализовали какую-то сложную структуру извращенным, невалидным способом, то где гарантии того, что новые версии браузеров не порвут вашу верстку в клочки?

Так что, никаких переходных синтаксисов, только строгое соответствие стандартам .

За строгое соответствие стандартам выступает еще один довод. Ноги этого довода растут из нашего спора с Takobus, разгоревшегося в комментариях к статье о . Оказывается, IE8, все-таки, прекрасно понимает назначение CSS-свойства display: table-cell , правда в случае, если объявлен строгий синтаксис стандарта HTML 4.01. В переходном синтаксисе IE8 отказывается работать с данным CSS-свойством.

Теперь определимся с выбором между актуальными стандартами: HTML 4.01 и XHTML 1.0.

Вы собираетесь расширять язык HTML? Если нет, то и не нужно использовать гнилую ветку XHTML, которая так и не переродилась в версию 2.0.

Если вы хотите защитить свой продукт на будущее, чтобы в дальнейшем не возникло проблем при расширении функционала, из-за несоответствия HTML-кода стандартам XML, то помучайте себя слешами в одиночных тегах и обязательными alt-параметрами картинок. Но не делайте это напрасно, просто так использовать XHTML-стандарт не вижу никакой необходимости.

Есть еще DOCTYPE директивы, предназначенные для HTML-документов, использующих фреймы. Что-то я сомневаюсь, чтобы вы использовали древнюю технологию фреймирования 🙂

Для тех, кто не в теме:

Фреймы – это независимые браузерные окна, отображаемые на одной Web-странице. Каждое окно связано с независимым файлом HTML.

Теперь ясно, какой!DOCTYPE оказывается максимально подходящим:

Строгий синтаксис формата HTML 4.01

Как научится верстать в соответствии с выбранным стандартом

Оказывается, очень просто. Нужно установиться рекомендованное мной расширение для FireFox , которое популярным образом, с примерами, объяснит причину ошибки в HTML и покажет как ее устранить. Вот вам и валидный код.

P.S. Продолжается бессрочная акция по обмену постовыми. Я с радостью обменяюсь ссылками с тематическими блогами и сайтами. Если у вас есть желание, пишите в .

В продолжении к вышесказанному размещаю постовой.

Интересуешься веб-дизайном? Создаешь сайты? Тогда на Web 2.0 Portal ты найдешь много интересного.

Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и "хорошо сформированный" код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.

Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.

Возможно, когда-нибудь программам, вроде программ чтения XML данных, потребуется прочитать ваш HTML код. Таким образом, использование хорошо сформированного, близкого к XHTML синтаксиса будет вполне разумным подходом.

Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.

На первой строке всегда декларируйте тип документа:

Если вы хотите соблюдать последовательность с написанием тегов в нижнем регистре, то вы можете использовать следующее определение типа документа:

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

• Смешение больших и маленьких букв в именах тегов считается плохой практикой

Это параграф текста.

Очень плохо:

Это параграф текста.

Это параграф текста.

В HTML5 вы не обязаны закрывать все элементы (например, элемент

Это параграф текста.

Это параграф текста.

Это параграф текста.

Это параграф текста.

В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.

Допустимо:

Также допустимо:

Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.

Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!

В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.

• Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
• Разработчики обычно используют маленькие буквы (как в XHTML)
• Написание в нижнем регистре выглядит чище
• В нижнем регистре легче писать

HTML5 допускает написание значений атрибутов без кавычек. Однако мы рекомендуем всегда заключать значения атрибутов в кавычки, потому что

• Смешение больших и маленьких букв в значениях считается плохой практикой
• Значения в кавычках легче читать
• Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы

Очень плохо:

Это не будет работать, потому что в значении есть пробелы

При определении изображений всегда используйте атрибут "alt". Этот атрибут важен, когда изображение по какой-то причине не отображается.

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

HTML5 допускает пробелы вокруг знака равно. Однако, когда пробелов нет, то такой код легче читать, и это лучше группирует сущности.

При использовании HTML редактора, неудобно читать HTML код, если приходится прокручивать окно влево или вправо.

Следует стараться, чтобы строка кода в длину не превышала 80 символов.

Не следует без веских причин добавлять пустые строки.

Для лучшей читабельности пустые строки следует добавлять только для разделения больших и логически единых блоков кода.

Также, для лучшей читабельности добавляйте два пробела отступов. Не используйте для этого табуляцию.

Не используйте ненужные пустые строки и отступы. Нет необходимости ставить отступ перед каждым элементом.

Необязательно:

Famous Cities Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.

Famous Cities Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.

По стандарту HTML5 тег и тег могут не использоваться.

Следующий код согласно стандарту HTML5 считается валидным:

Заголовок страницы Это текстовый заголовок

Это абзац текста.

Элемент - это корень документа. Это рекомендованное место для определения языка страницы:

Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем.

Кроме этого, если не написать тег или тег , то это может сломать структуру DOM и XML приложения. А пропуск тега к тому же может привести к ошибками в старых браузерах (IE9).

Согласно стандарту HTML5 тег может не использоваться.

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

Вы можете снизить сложность структуры HTML, пропустив тег :

Заголовок страницы Текстовый заголовок

Это текстовый абзац.

Элемент является обязательным в HTML5. Заголовок страницы должен быть наполнен значением:

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

Стандарты синтаксиса и кодирования в HTML5

"Вьюпорт" - это видимая пользователю область веб-страницы. Эта область разница от устройства к устройству и на мобильных телефонах будет меньше, чем на экране компьютера.

В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега .

Следует всегда использовать элемент управления вьюпортом в следующей форме на всех веб-страницах:

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

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана текущего устройства (которая будет разной в зависимости от используемого устройства).

Часть initial-scale=1.0 устанавливает начальный уровень увеличения, когда страница впервые загружается браузером.

Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него:

Страница с мета тегом вьюпорта

Короткий комментарий должен писаться на одной строке:

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

Пример 1. Исходный код веб-страницы

Пример веб-страницы Заголовок

Первый абзац.

Второй абзац.

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Элемент (жарг. доктайп) предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях - современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

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

Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ).

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента . Внутри могут располагаться следующие элементы: , , , , или .

Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

Пример веб-страницы

Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в быть не должно. Но допустимо добавлять разные текстовые символы, например, так: Adobe™ Photoshop® .

Закрывающий тег показывает, что «голова» документа завершена.

«Тело» документа предназначено для размещения элементов и содержимого веб-страницы.

Заголовок

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность раздела, расположенного после заголовка. Так, элемент представляет собой наиболее важный заголовок первого уровня, а элемент служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы ... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него браузер добавляет пустое пространство.

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

Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.

Что такое тег в HTML?

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

Существует два типа тегов это парные теги и одинарные теги :

• Парные теги это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега. Примеры: и ; и ; и ; и ; ;
• Одинарные теги это теги, которые не имею закрывающего тега. Примеры одинарных тегов:
  .

У html страницы есть базовая структура . Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью . Если не укажем этот элемент то браузер отобразит страницу некорректно.

Вот как выглядит базовый каркас html страницы:

Главная страница

Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body , и откроем еще раз эту страницу в браузере.

Моя первая html страница

Вот как выглядит страница в браузере после того как изменили ее код:

Анализируем данный пример

В начале страницы, перед тегом html всегда указываем DOCTYPE , то есть тип документа.

Каждая html страница начинается с тега < html> и заканчивается тегом и состоит из заголовка < head> и тела < body> .

Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:

• Мета теги . Главные из них это мета-тег кодировки , через которого указываем кодировку страницы (), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords) .
• Заголовок страницы, который указывается внутри тега < title> . Этот заголовок отображается во вкладке браузера.
• Блок с внутренними стилями. < style type=” text/ css”>Внутренние стили.
• Одинарный тег < link /> , через которого подключаем внешние файлы.
• А также блок < script src =" library.js " type =" text/javascript " > в котором пишутся различные скрипты JavaScript .

Внутри тега < body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.

Имена тегов можно писать в любом регистре, то есть если напишем < BODY>, < bOdY>,< Body> или < body> , то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть < body> .

Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура html страницы.