Современный Интернет предоставляет множество функций, таких как обмен мгновенными сообщениями, электронная почта, потоковое видео. Однако основой, на которой держится сеть интернет являются сайты. На сегодняшний момент количество сайтов в сети более 10 миллиардов, и каждый день число увеличивается. В основе практически всех сайтов сети лежат три технологии, которые позволяют обеспечить представление информации в различных ее видах:

• технология HTML — отвечает за структурирование информации и выделение логических блоков на странице сайта
• технология CSS — используется для оформления и позиционирования, представления информации на странице
• технология JavaScript — используется для реализации динамики и интерактивного взаимодействия с пользователем.

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

Введение в язык разметки. Язык разметки гипертекста HTML

Язык разметки гипертекста — HTML (hyper text markup language), это набор правил и знаков (тегов), которые используются для структурирования (разметки) текстовой информации, добавления в текст внешних изображений, создания таблиц, списков и т.д. Текст, размеченный с помощью HTML интерпретируется браузером, в результате чего, пользователи видят не исходный код с элементами разметки, а итоговый результат обработки страницы.

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

Развитие HTML, версии. Текущие используемые версии HTML и XHTML

Удобство использования и простота освоения позволили HTML выйти за пределы инструмента для научного использования и определили его как основу сети Интернет.

В ходе становления и развития HTML принято выделять следующие этапы (версии):

• HTML 0.9 — описывал основы языка и протоколов использования, принят в 1991 году
• RFC 1866 (иначе HTML 2.0) — принятый в ноябре 1995 года содержал подробное описание языка, правил написания, тегов, атрибутов, ввел описание версий в документе HTML. В данной версии вводятся большинство современных тегов, без которых немыслимо применение HTML на данный момент: заголовки, параграфы, изображения, гиперссылки и списки.
• HTML 3.2 (принят в январе 1997 года) — главной особенностью версии стала поддержка ее производителями браузеров (Microsoft и Netscape), что в дальнейшем заставило разработчиков придерживаться существующего стандарта. В данной версии вводятся таблицы, обтекание текстом элементов, верхние и нижние индексы.
• HTML 4.0 (декабрь 1997 года) — является не стандартом, а набором рекомендаций W3C, включал в себя три вида рекомендаций: строгий, транзитный и frameset. Основной задачей рекомендаций 4.0 были уменьшение кроссбраузерной несовместимости, легализация тегов, которые самовольно вводили в использование производители браузеров.
• HTML 4.01 (декабрь 1999 года) — вначале выпущен как набор рекомендаций, а спустя два года как международный эталон организации по стандартизации. Утвердил основные правила использования тегов и атрибутов.
• HTML5 (2014 год) — основное направление действий стандарта это появление “семантических” тегов, ориентировка на системы автоматической обработки страниц. Появляется большое количество новых тегов, некоторые теги меняют первоначальный смысл.
• HTML 5.1 — на текущий момент в разработке. Ориентировочное время выпуска осень-зима 2016 года.
  Параллельно с HTML долгое время существовал XHTML (extensible hypertext markup language — расширяемый язык гипертекстовой разметки) — язык разметки на основе XML.

Файлы написанные на XHTML имели более строгий синтаксис повторяющий XML правила, и обрабатывались парсером XML, при этом исправления ошибок не производилось. Данный формат был внедрен для расширения возможностей HTML и совместимости с различными сервисами сети.

Следствием большой схожести синтаксиса HTML и XHTML приводило к путанице правил написания и появлению огромного множества некорректно написанных документов.

С появлением стандарта HTML5 работа над XHTML прекращена, таким образом HTML5 вобрал в себя два стандарта.

Вопросы межбраузерной совместимости. Война браузеров

Как видно из версий HTML и принятия стандартов, первое время, усилия контролирующих органов были направлены на согласование правил отображения, которые реализовывались в различных браузерах по разному. Более того, наличие всего нескольких игроков на рынке, а долгое время господствовали браузеры от Microsoft и Netscape, позволяло данным игрокам не ориентироваться на стандарты, а навязывать правила отображения и обработки страниц пользователям.

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

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

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

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

Гонки технологий между браузерами, причиной которых явилась конкуренция, называется война браузеров. Данная “война” — позволила создать большое количество популярных на сегодняшний момент браузеров, которые в своем развитии значительно ушли вперед от простого отображения страниц.

На сегодняшний момент, существует множество решений для просмотра страниц, как на desktop, так и на mobile платформах, что вынуждает разработчиков, реализовывать кроссбраузерную совместимость, как выполнением стандартов, так и реализаций совместимости, за счет использования JavaScript, или подгрузкой стилей CSS предназначенных для конкретного браузера.

W3C

Популярность языка разметки HTML и использование его в качестве основы сети Интернет, привело к необходимости управления стандартами HTML. Разработчик идеи гипертекста Тим Бернерс-Ли основал в 1994 году и возглавил организацию которая занимается развитием HTML и ее стандартов. Данная компания получила название World Wide Web Consortium, или сокращенно W3C.

Основной задачей консорциума является обеспечение открытости стандартов сети Интернет и ее интернационализации. В соответствии с этой идеей вся документация по регулированию принципов работы сети носит статус “рекомендаций”, и является открытой. Любой разработчик имеет право на реализацию стандартов, без каких-либо ограничений и отчислений W3C.

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

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

Валидация — это проверка соответствия html документов заявленному в них стандарту HTML. В результате валидации разработчик либо проходит валидацию, либо получает список рекомендованных исправлений.

Валидатор — программа, которая проверяет соответствие загруженного файла стандартам HTML. В ходе работы валидатор проверяет следующие пункты:

• правильное написание тегов;
• актуальность тегов и возможность их применения в данной версии HTML;
• правильность закрытия и вложения тегов;
• правильность использования атрибутов и многое другое.

Результат, выводится в виде списка ошибок и предупреждений.

Пример валидатора от разработчика стандартов для сети Интернет: The W3C Markup Validation Service

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

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

В ходе эксплуатации рекомендаций, часто вносятся исправления и дополнения, которые публикуются на сайте. Так, например тег hgroup введенный в стандарте HTML5 спустя некоторое время было рекомендовано не использовать в документах.

Все рекомендации доступны на сайте W3C и содержат большое количество примеров.

Теги — основные элементы структуры HTML

Понятие тегов и атрибутов

Для управления отображением документа, язык HTML использует управляющие структуры (иногда встречается название дескрипторов) — теги. Для выделения тегов среди остального текста документа, используются специальные символы — угловые скобки (angle brackets). Пример тега:

Теги можно разделить на две категории:

Парные теги — теги, состоящие из открывающего тега (например

) и закрывающего тега (для примера выше это

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

Парными тегами в документе являются теги:

Непарные теги — теги состоящие из одного элемента. Непарные теги создают один элемент на странице, либо служат для изменения свойств документа, подключения файлов и т.д.

В приведенном выше примере непарными тегами являются:

Часто, функции парных и непарных тегов изменяются за счет атрибутов, которые указываются внутри угловых скобок после имени тега. Например, атрибутами в примере являются:

Количество атрибутов в теге не ограничено.

По умолчанию все теги можно разделить по способу отображения на две большие группы:

• блочные элементы — элементы которые занимают всю строку при отображении, даже если их содержимое меньше ширины окна браузера. По умолчанию блочные элементы не могут располагаться на одной строке, т.е. растягиваются на всю ширину окна браузера. Заголовки (h1, h2, h3, h4…) и параграфы — блочные элементы;
• строчные элементы — элементы отображаются в одной строке друг за другом.

Рассмотрим назначение тегов.

Рассмотрим теги используемые в пустом HTML документе:

<!DOCTYPE html> — непарный тег, который находится в начале документа. Указывает браузеру какой стандарт необходимо использовать для интерпретации файла. Данный тег указывает на использование современного стандарта HTML 5. Указание на стандарт ставит ограничения на используемые теги, правила верстки. Стандарты версий 4.01, 4.0, 3.2 на сегодняшний момент считаются устаревшими и не рекомендуются к применению;

<html> — тег, который открывает и закрывает страницу HTML. Парный тег. Указывает область файла, которая обрабатывается браузером как HTML документ. Закрывающий должен быть последним элементом на html странице.

<head> — парный тег, который называют заголовком страницы. Заголовок страницы это служебная область, которая служит для настроек страницы, управлением отображением страницы, подключением внешних файлов. Чаще всего теги, заключенные внутри заголовка не отображаются пользователю, но непосредственно влияют на вид страницы.

<meta> — многофункциональный тег, расширяемый с помощью атрибутов. В данном контексте он определяет кодировку страницы. Кодировка UTF-8 изначально разработанная для ОС, постепенно стала использоваться для веба. Преимуществами UTF-8 являются возможности работы с несколькими языками одновременно, обойтись без кодовых таблиц, добавлять в код символы иероглифы.

<title> — тег, в который прописывается название страницы. Чаще всего отображается в браузере на вкладке. Внутри тега title другие теги html не обрабатываются, и будут выведены в браузере так, как записаны в html файле. Парный тег.

<body> — содержит весь контент страницы. Все, что мы видим на странице содержится в теге body. Парный тег.

<h1>..</h1>, <h2>..</h2>, <h3>..</h3>, <h4>..</h4>, <h5>..</h5>, <h6>..</h6> — заголовки используются для создания заголовков к разделам текста. Поскольку текст может содержать несколько заголовков разного уровня и значимости, в HTML введены 6 уровней заголовков. По умолчанию заголовки отображаются жирным шрифтом, размер шрифта зависит от уровня заголовка.

<p>..</p> — параграф используется для выделения логических завершенных блоков текста. Является блочным элементом.

<hr> — горизонтальная линия используется для визуального разделения элементов на странице. Блочный элемент.

<img src=”” alt=””> — Изображение (img) непарный тег. Изображение является строчным (inline) элементом, т.е. если подряд идут несколько изображений, то по умолчанию они отображаются в одну строку (если размеры изображений и окна браузера позволяют это сделать). Для правильного его изображения необходимо два атрибута:

• src=” ” — указывает расположение файла с изображением. Таким образом, внутри HTML документа хранится только ссылка на рисунок, а сам файл может располагаться как на локальном хранилище, так и на удаленном. Многие браузеры игнорируют тег img если атрибут src пустой или отсутствует;
• alt=” ” — альтернативный текст, который до HTML5 выводился пользователю если изображение не могло быть загружено. С выходом HTML5 атрибут стал обязательным и используется для программ чтения с экрана. При отсутствии атрибута alt браузер отобразит изображение, однако валидацию данный документ не пройдет.

<a href=””>..</a> — гиперссылка (anchor — якорь) используется для создания гиперперехода на другой документ в сети, или для перехода на метку в текущем документе. При наведении мыши на гиперссылку курсов принимает вид руки с вытянутым пальцем (pointer), а текст гиперссылки подчеркивается и выделяется синим цветом. Гиперссылка — парный тег, строчный. Внутри тегов <a></a> можно располагать не просто текст, но и другие теги. При клике на ссылке возможны следующие варианты:

• если ссылка указывает на другую страницу, то данная страница будет загружена и отображена в браузере, т.е. будет совершен переход на новую страницу;
• если ссылка указывает на файл отличный от html то возможны варианты: так, если браузер может отобразить данный документ, то он будет отображен (так происходит с pdf), если нет — откроется диалоговое окно загрузки файла;
• если ссылка указывает на метку в текущем документе — будет осуществлен переход к указанному месту текущего документа.

<b>..</b> — в стандарте HTML5 данный тег используется для выделения слова или словосочетания жирным шрифтом.

<i>..</i> — в стандарте HTML5 данный тег используется для выделения слова или словосочетания курсивом.

^.. — создание верхнего индекса. При применении к символу или слову, приподнимает их над уровнем основного текста и уменьшает в размерах.

_.. — создание нижнего индекса. При применении к символу или слову, опускает их ниже уровня основного текста и уменьшает в размерах.

— разрыв строки. При использовании разрывает строку и переносит на следующую линию. Не является альтернативой параграфу.

Правила написания тегов и атрибутов

Согласно, текущему стандарту HTML 5 теги можно писать как в нижнем так и в верхнем регистре:

• <BODY> — правильное написание;
• <body> — правильное написание;
• <BoDy> — правильное написание;
• < body> — неправильное написание, пробел между открывающейся угловой скобкой и именем тега недопустим.

Хотя стандарт HTML 5 дает широкие возможности написания тегов, рекомендуем придерживаться стиля написания, который используют крупнейшие компании мира: теги пишутся в нижнем регистре, т.е. <body>, <html></p> Также, все парные теги должны закрываться в обязательном порядке.

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

• lang=”en” — правильно, для значения атрибута используются двойные кавычки;
• lang=’en’ — правильно, для значения атрибута используются одинарные кавычки;
• lang=en — правильно, для значения не содержащего пробела можно использовать написание без кавычек.

Если значение атрибута содержит кавычки, то значение берется в скобки.

Хорошим тоном в верстке считается использование двойных кавычек.