И в течение долгого времени эти две организации не сходились во взглядах и не работали вместе, так что они действительно шли в двух разных направлениях. Но в конце концов, примерно в 2007, 2009 годах, WHATWG и W3C начали совместную работу, и создали то, что мы имеем сейчас, стандарт HTML5.
Теперь, W3C отвечает за стандарты, а WHATWG отвечает за реализацию стандартов браузерами.
И чтобы узнать, будет ли ваш HTML работать в браузерах, вы можете использовать валидатор, который есть на веб-сайте W3.org.
Здесь вы можете проверить свой код HTML, является ли он действительным и будет ли он хорошо работать в браузере.
С помощью сайта CanIUse вы можете проверить конкретную HTML функцию, совместима ли она с конкретными браузерами, что может помочь вам легче принимать решения по дизайну и разработке.
Здесь таблицы совместимости указывают не только на то, поддерживает ли конкретный браузер технологию или нет, но и в какой степени, на случай частичной совместимости в определенных версиях.
При этом узнать долю использования браузера в Интернете вы можете с помощью сайта w3schools.com.
В основе HTML лежат теги HTML. Поэтому очень важно понимать, из чего состоит HTML-тег и как правильно, синтаксически правильно кодировать HTML-тег.
Как правило, теги HTML имеют открывающий и закрывающий тег. И они окружают какой-то контент.
В данном случае, тег p, обозначающий абзац, сообщает нам, что содержимое в середине следует рассматривать как абзац.
С технической точки зрения, сам по себе p называется элементом. И вместе с угловыми скобками это называется тегом.
И у большинства HTML-тегов есть закрывающий тег, который совпадает с открывающим тегом, но не у всех.
Например, теги br и hr, br означает разрыв строки, а hr означает горизонтальную разделительную линию, имеют только открывающий тег. У них вообще нет закрывающего тега.
Теперь, каждый элемент HTML может иметь предопределенные атрибуты.
Атрибут – это пара «имя-значение», представляющая собой своего рода метаданные о самом элементе, к которому он применяется.
(Метаданные – информация о другой информации, или данные, относящиеся к дополнительной информации о содержимом или объекте.)
В этом примере мы присваиваем myId как значение атрибута id, который представляет идентификатор элемента HTML.
И каждый атрибут имеет свои собственные правила для присваивания его значения.
Так, например, значение атрибута id должно быть уникальным в рамках всего HTML-документа. Если есть другой элемент с тем же значением для id, это будет означать, что веб-страница содержит недопустимый HTML-код.
Что касается синтаксиса, между открывающей скобкой и именем тега не должно быть пробелов. Точно так же не допускается пробел между открывающей скобкой и косой чертой перед закрывающим тегом. Однако у вас должен быть хотя бы один пробел между самим тегом и любым из его атрибутов.
И еще одно правило – атрибуты могут быть указаны только в открывающем теге, поэтому вы не можете указать атрибут в закрывающем теге.
Также рекомендуется всегда заключать значение атрибута в одинарные или двойные кавычки. Неважно, используете ли вы одинарные или двойные кавычки, так как они эквивалентны в HTML.
Более интересный случай возникает, когда само значение атрибута содержит кавычки. В такой ситуации рекомендуется использовать и одинарные и двойные кавычки.
Вы можете начать с двойных кавычек, или вы можете начать с одинарных кавычек.
Создание первой HTML страницы
Для создания кода HTML страницы откроем редактор Sublime.
И введем вышепоказанный код.
И каждая HTML-страница должна начинаться с объявления типа документа. То есть все HTML-документы должны начинаться с объявления <!DOCTYPE>, которое не является тегом HTML. Это «информация» для браузера о том, какой тип документа браузеру ожидать.
Тип документа – это какой спецификации HTML следует код страницы.
Если код страницы следует спецификации HTML 5, объявление типа документа простое – <!doctype html>.
Для HTML 4.01, такое объявление было гораздо сложнее:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Слово doctype или HTML может быть написано строчными или прописными буквами. Единственное, на что вы должны обратить внимание, это то, что между восклицательным знаком и словом doctype не должно быть пробела.
И если вы пропустите объявление типа HTML-страницы, это будет сигналом для браузера, что он должен рассматривать ваши страницы как страницы, не соответствующие стандарту HTML.
Поэтому ваш код HTML может работать не совсем правильно.
Далее идет тег html, и это тег, внутри которого содержится весь html-документ.
После тега html идет тег head. И тег head содержит элементы, относящиеся к описанию содержимого страницы.
Например, какую кодировку символов должен использовать браузер для отображения контента страницы.
Тег head также может содержать заголовок страницы, это тег title, и ссылки на любые ресурсы, необходимые для правильного отображения страницы.
Таким образом, тег head содержит метаданные об основном контенте страницы.
Здесь тег meta с атрибутом charset указывает какую кодировку необходимо использовать для отображения символов нашей веб-страницы.
UTF-8 – это наиболее часто используемый стандарт кодирования символов, позволяющий компактно хранить и передавать символы Юникода.
И обратите внимание, что у тега meta нет закрывающего тега.
Далее мы указываем заголовок страницы с помощью тега title. И заголовок – это один из обязательных тегов, без которого HTML страница будет недействительная.
И заголовок отображается во вкладке браузера.
После тега head идет тег body. Тег body содержит весь основной контент, видимый пользователю.
Сохраним нашу страницу как index.html, так, как правило, называется главная страница сайта. И теперь давайте посмотрим, как это выглядит в браузере.
Но сначала установим плагин Browsersync для Sublime Text.
Для этого скачаем Github репозиторий проекта Browsersync по адресу https://github.com/iamdjones/sublime-text-browser-sync.
Распакуем папку и сохраним ее в каталоге пакетов Sublime Text, который мы найдем с помощью меню Preferences – Browse Packages.
В результате у нас появится пункт меню Browser Sync.
