HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

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

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

<p>Моя кошка очень раздражена</p>

Давайте рассмотрим элемент абзаца более подробно.

• все элементы пишутся строго в нижнем регистре;
• закрываются даже одиночные теги (например, <img />);
• основная кодировка – UTF-8;
• все атрибуты записываются только в развернутом виде (например, если в HTML5 отключить возможность выбора элемента из выпадающего списка можно указанием простого атрибута disabled, то в XHTML обязательно писать disabled=«disabled»).

Верстать код сайта на основании стандарта XHTML не обязательно, так как HTML5 и современные браузеры не столь требовательны, но он может встретиться (и этого не нужно пугаться).

• добавлены семантические элементы (<nav>, <section>, <article> и др.), которые облегчают чтение структуры страницы как разработчикам, так и поисковым машинам;
• внедрена поддержка векторной графики и специальных форматов (svg, canvas, MathML);
• представлены новые элементы управления (dates, email, tel);
• удалены устаревшие теги (big, center, isindex).

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

Некоммерческая организация W3-Консорциум (www.w3.org) разрабатывает единые принципы и рекомендации для производителей Интернет-контента, чтобы обеспечить максимальную совместимость между продуктами, платформами, программами. Это позволяет делать Всемирную сеть максимально удобной и универсальной.

Помимо непосредственно стандартов HTML компания занимается утверждением и других связанных положений:

1. CSS (каскадные таблицы стилей),
2. DOM (объектная модель документа),
3. PNG (формат хранения растровых изображений),
4. HTTP (протокол передачи данных),
5. RDF (модель представления метаданных),
6. XPath (язык для доступа к частям XML-документов) и др

Важно и то, что вы всегда можете проверить соответствие вашего кода стандарту при помощи валидаторов. В сети их огромное множество и для разных целей: HTML, CSS, JavaScript. Сервисы позволяют валидировать свой или чужой код. Для этого требуется ввести в поисковике требуемый (например, HTML5 валидатор), вставить туда код и произвести проверку. Все нарушения будут подсвечены соответствующим цветом и подсказками. Ими пользуются все разработчики для верификации качества работы программистов. Все современные IDE дают возможность валидировать код (в большинстве случаев для этого потребуется установка плагина).

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

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

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

Рассмотрим типичную структуру web-элемента:

1. Открывающий тег (все теги представляются в угловых скобках, в открывающем, если требуется, перечисляются атрибуты);
2. Закрывающий тег (присутствует не во всех тегах, идентифицируется косой чертой);
3. Атрибут, свойство (название свойства и его значение предпочтительно в двойных кавычках, возможно использовать и одинарные);
4. Содержимое (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов).

Первичное знакомство с разнообразием html-элементов можно осуществить на любом сайте. Если вы находитесь в браузере Chrome, то прямо сейчас можно нажать сочетание клавиш CTRL + U (откроются Инструменты разработчика) и просмотреть код данной страницы . Фактически, весь этот набор тегов и свойств в сочетании с JavaScript обрабатывается браузером, чтобы вы смогли удобно пользоваться текущим сайтом.

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

Далее поговорим о классификации тегов и атрибутов. Более детальное их описание и примеры будут представлены в следующем уроке.

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

Одиночных элементов насчитывается 16 штук. Наиболее часто используемые:

1. <!doctype> Некая инструкция браузерам для определения того, к какому типу относится документ, какую версию HTML использовать.
2. <meta> Необходим для задания дополнительной информации о странице, указывается в заголовке HTML-документа. Как и вышеупомянутый тег, не влияет на внешний вид страницы, так как носит служебный характер.
3. <hr> Задает горизонтальную линию для визуального отделения элементов страницы, применяется для отделения заголовка от основного текста, выделения логических блоков. По умолчанию представляет собой серую линию толщиной в 1 пиксель.
4. <br> Перенос нижеидущего содержимого на новую строку. Может потребоваться для избегания длинных полотен текста. Небольшие куски информации воспринимаются лучше, чем огромный абзац.
5. <img> Чтобы вставить на страницу графический элемент. Рисунки можно демонстрировать в одном из следующих форматов: jpg, png, gif. Само изображение в документ не вставляется непосредственно, указывается ссылка на него (локальная или из другого источника), а уже браузер загружает картинку и демонстрирует пользователю.
6. <input> Применяется в формах и задает тип полей (могут быть текстовыми, числовыми, позволяют выбирать дату, файл, отмечать те или иные элементы списка и т.п.).

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

1. <p>Текст</p> Представляет заключенный внутри текст в виде отдельного абзаца. По умолчанию он имеет отступ и отделяется от предыдущего и последующего элементов дополнительным разрывом (это поведение можно поменять).
2. <a href=«#»>Текст ссылки</a> Используется для задания и представления в документе ссылки (она может вести на другую страницу сайта, определенный участок на самой странице или любой адрес в Интернете).
3. <small>Текст</small> Делает текст меньшего масштаба по сравнению с основным.
4. <mark>Текст</mark> Выделяет текст по подобию маркера (аналог того, как на листах бумаги подчеркивают самое важное фломастером) желтым цветом.

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

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

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

1. Блочный тэг