Это старая версия документа!
Содержание
2. HTML: Понятие, стандарты, тэги и атрибуты
Понятие языка разметки гипертекста. Современные HTML-стандарты: HTML4 / 5, XHTML. Элементы HTML и их разновидности, структура тегов. Основные атрибуты тегов, классификация.
HTML: Понятие, стандарты, тэги и атрибуты
Оглавление
-
- HTML теги. Блочные и строчные теги.
- HTML теги. Семантические теги.
- HTML теги. Классификация атрибутов:
- Универсальные атрибуты
- Уникальные атрибуты
- Специфические атрибуты
- Событийные атрибуты
Понятие языка разметки 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-элемента:
- Открывающий тег (все теги представляются в угловых скобках, в открывающем, если требуется, перечисляются атрибуты);
- Закрывающий тег (присутствует не во всех тегах, идентифицируется косой чертой);
- Атрибут, свойство (название свойства и его значение предпочтительно в двойных кавычках, возможно использовать и одинарные);
- Содержимое (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов).