2. HTML: Понятие, стандарты, тэги и атрибуты

Понятие языка разметки гипертекста. Современные HTML-стандарты: HTML4 / 5, XHTML. Элементы HTML и их разновидности, структура тегов. Основные атрибуты тегов, классификация.

HTML: Понятие, стандарты, тэги и атрибуты

HTML теги. Блочные и строчные теги.
HTML теги. Семантические теги.
HTML теги. Классификация атрибутов:
1. Универсальные атрибуты
2. Уникальные атрибуты
3. Специфические атрибуты
4. Событийные атрибуты

Понятие языка разметки HTML

HTML (HyperText Markup Language) – это не язык программирования (как, например, Python), а так называемый язык разметки. Он необходим для сообщения браузеру способа отображения посещаемой вами веб-страницы. Вместо того, чтобы показывать сплошной текст, HTML позволяет обернуть его в специальные элементы (теги). Это обеспечивает особое поведение передаваемой информации: она может выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и иных мультимедиа-данных.
Теги способны нести как структурный смысл (например, показать, что перед нами таблица некоторой размерности с заголовком), так и семантический (выделить информацию определенным образом для поисковых роботов, чтобы те лучше индексировали ваш сайт, или браузеров).

Полезно знать HTML разработал британец Тим Бернес-Ли в конце 1980-х годов, а как официальный стандарт HTML функционирует с 1993 года. Им же опубликован первый в мире сайт – http://info.cern.ch/hypertext/WWW/TheProject.html - работающий по сей день. На нем содержится информация о технологии World Wide Web, базирующейся на протоколе HTTP, адресации URI, разметке HTML.

Сегодня Тим Бернес-Ли возглавляет W3-Консорциум (World Wide Web Consortium), основная задача которого: разработка и внедрение стандартов Интернета с учетом современных потребностей.

Изначально HTML был кроссплатформенным, что создавало определенные трудности. Разные браузеры отображали теги по-своему, некоторые элементы могли восприниматься не всеми программами. Причина: отсутствие единого стандарта, поддерживаемого разработчиками. Особую проблему доставлял Internet Explorer (Microsoft долгое время следовала своим наработкам в понимании HTML), что требовало от сайтостроителей учета разных видов браузеров, чтобы содержимое страниц выглядело более-менее одинаковым у пользователей.
В последние годы данная проблема фактически решена, так как крупные игроки на рынке браузеров пришли к соглашению. На просторах Интернета еще можно встретить сайты, учитывающие старые браузеры, но это уже не обязательное требование к верстальщикам. Чаще всего вас просто попросят обновить свой браузер, чтобы вы смогли увидеть сайт в задуманном виде (для эксперимента попробуйте зайти в любую социальную сеть с очень старого браузера).

Современные стандарты HTML

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

До этого 17 лет главенствующим стандартом являлся HTML 4 (с 1997 года). Он встречается и сегодня на ряде сайтов. Определить его можно на основании так называемого доктайпа.

Доктайп HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

Несмотря на строгую типизацию в языке HTML, ряд браузеров достаточно лояльно относится к документам. Так, тег абзаца (обозначается <p><\p>) разработчик вполне может написать по своему усмотрению:

<p>Абзац<\p> (написание в соответствии со стандартом);
<P>Абзац<\P> (браузеры редко учитывают регистр тегов);
<p>Абзац (некоторые верстальщики могут забыть поставить закрывающий тег, что никак не смутит новую версию практически любого браузера).

Хорошая практика показывает, что нужно придерживаться некоего единого стиля. Чтобы как-то ограничить вольности программистов, внедрили стандарт XHTML. Он сочетает в себе HTML и XML форматы. Первоочередная задача данного стандарта – замена HTML 4. Однако после появления HTML5 эта потребность несколько снизилась. Тем не менее, многие разработчики используют его и сегодня, чтобы гарантировать отсутствие ошибок в написании кода.

Ключевые особенности стандарта XHTML:

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

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

Охарактеризуем специфику HTML5:

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

Итог
Таким образом, базис современной разработки – стандарт HTML5.

Консорциум Всемирной сети

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

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

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

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

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

HTML теги. Структура тега

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

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

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

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

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

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

Только авторизованные участники могут оставлять комментарии.

book51.ru

Содержание