Теги
Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования
и применяются теги. Общий синтаксис написания тегов следующий.
Как видно из данного примера, теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется
самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты,
которые разделяются между собой пробелом. Впрочем, есть теги без всяких дополнительных атрибутов. Условно атрибуты
можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит
от цели применения тега.
В примере 3.1 показан типичный HTML-документ с тегами и текстом.
Пример 3.1. Теги в документе HTML 4.01 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Lorem ipsum</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetuer cursus pede pellentesque vitae
pretium. Tristique mus at elit lobortis libero Sed vestibulum ut eleifend habitasse.
Quis Nam Mauris adipiscing Integer ligula dictum sed at enim urna. Et scelerisque
id et nibh dui tincidunt Curabitur faucibus elit massa. Tincidunt et gravida
Phasellus eget parturient faucibus tellus at justo sollicitudin. Mi nulla ut
adipiscing.</p>
</body>
</html>
В данном примере используется одиночный тег <meta>, а парных тегов сразу несколько: <html>, <head>, <title>,
<body> и <p>.
Парные теги
Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег.
Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег>. Допускается
вкладывать в контейнер другие теги, однако следует соблюдать их порядок.
Не все контейнеры требуют обязательно закрывающего тега, иногда его можно и опустить. Тем не менее,
закрывайте все требуемые теги, так вы приучитесь сводить к нулю возможные ошибки.
Правила применения тегов
Для тегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для
выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
Атрибуты тегов и кавычки
Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных ("пример") или одинарных
кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно
обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 3.2).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Кавычки в атрибуте alt</title>
</head>
<body>
<p><img src="images/arena.png" alt="Вид заголовка" width="400" height="101"></p>
<p><img src="images/arena.png" alt=Вид заголовка width="400" height="101"></p>
</body>
В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за
этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как
ошибочное значение. Поэтому всегда приучайтесь указывать атрибуты тегов в кавычках.
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их атрибуты нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как
писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении
всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со
строчными символами или смешанный.
Переносы строк
Внутри тега между его атрибутами допустимо ставить перенос строк. В примере 3.3 показана одна и та же строка, но
оформленная разными способами.
Пример 3.3. Переносы строк в коде тега HTML 4.01 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Кавычки в атрибуте alt</title>
</head>
<body>
<p><img src="images/arena.png" alt="Вид заголовка в IE" width="400" height="101"></p>
<p><img src="images/arena.png" alt="Вид заголовка в браузере IE" width="400" height="101"></p>
</body>
В данном примере первый тег <img> набран в одну строку, включая все его атрибуты, а второй тег <img> разбит на
несколько строк.
Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе
ухудшается восприятие кода и его становится сложнее править.
Неизвестные теги и атрибуты
Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать
текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет
валидацию.
Порядок тегов
Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера
<head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять
местами теги <title> и <meta>, на конечном результате это никак не скажется.
Закрывайте все теги
Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий
тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде
<br> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как
добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая
необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.
Атрибуты тегов
Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров и применяются
атрибуты тегов.
Для атрибутов тегов используются значения по умолчанию
Когда для тега не добавлен какой-либо допустимый атрибут, это означает, что браузер в этом случае будет подставлять
значение, заданное по умолчанию. Если вы ожидали получить иной результат на веб-странице, проверьте, возможно,
следует явно указать значения некоторых атрибутов.
Атрибуты без значений
Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения, как показано в примере 3.4.
Пример 3.4. Атрибуты без значений HTML 4.01 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Добавление формы</title>
</head>
<body>
<form action="self.php">
<p><input type="text"></p>
<p><input type="submit" disabled></p>
</form>
</body>
В данном примере используется атрибут disabled, у которого явно не задано значение. Подобная запись называется
«сокращенный атрибут тега».
Порядок атрибутов в тегах
Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида
<img src="/images/title.gif" width="438" height="118"> и <img height="118" width="438" src="/images/title.gif"> по своему действию
равны.
Формат атрибутов
Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно
должен учитываться при написании атрибута. Так, в примере 3.3 упоминается тег <img>, он добавляет на веб-страницу
рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение
будет проигнорировано и возникнет ошибка при валидации документа.
Типы тегов
Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование
таблиц и не могут применяться для других целей.
Условно теги делятся на следующие типы:
- теги верхнего уровня;
- теги заголовка документа;
- блочные элементы;
- встроенные элементы;
- универсальные элементы;
- списки;
- таблицы.
Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и <ul>
относятся к категории списков, но также являются и блочными элементами.
Теги заголовка документа
К этим тегам относятся элементы, которые располагаются в контейнере <head>. Все эти теги напрямую не отображаются в
окне браузера, за исключением тега <title>, который определяет название веб-страницы.
<title>
Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю
название сайта и другую информацию, которую добавляет разработчик.
<meta>
Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например,
механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Хотя тег <meta> всего один, он имеет несколько атрибутов, поэтому к нему и применяется множественное число.
Так, для краткого описания содержимого веб-страницы используется значение description атрибута name, как показано в
примере 5.2.
Пример 5.2. Использование description HTML 4.01 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<title>HTML</title>
<meta name="description" content="Сайт об HTML и создании сайтов">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<p>...</p>
</body>
Описание сайта, заданное с помощью тега <meta> и значения description, обычно отображается в поисковых системах или
каталогах при выводе результатов поиска. Значение keywords также предназначено в первую очередь для повышения
рейтинга сайта в поисковых системах, в нем перечисляются ключевые слова, встречаемые на веб-странице (пример 5.3).
Пример 5.3. Использование keywords HTML 4.01 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<title>HTML</title>
<meta name="keywords" content="HTML, META, метатег, тег, поисковая система">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<p>...</p>
</body>
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который
они используют.
Блочные элементы
Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его
содержимым, и он всегда начинается с новой строки.
<blockquote>
Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно
отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым
пространством сверху и снизу.
<div>
Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без
дополнительных свойств. Также с помощью тега <div> можно выравнивать текст внутри этого контейнера с помощью
атрибута align.
<h1>,...,<h6>
Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции,
расположенной после заголовка.
<hr>
Рисует горизонтальную линию, которая по своему виду зависит от используемых атрибутов. Линия всегда начинается с
новой строки, а после нее все элементы отображаются на следующей строке.
<p>
Определяет параграф (абзац) текста.
<pre>
Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со
всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается
как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.
Следующие теги не должны размещаться внутри контейнера <pre>: <big>, <img>, <small>, <sub> и <sup>.
Строчные элементы
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента,
например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
<a>
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия
атрибутов name или href тег <a> устанавливает ссылку или якорь.
<b>
Определяет жирное начертание шрифта.
<big>
Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в
условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление
тега <big> увеличивает текст на одну условную единицу.
<br>
Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>,
использование тега <br> не добавляет пустой отступ перед строкой.
<em>
Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
<i>
Устанавливает курсивное начертание шрифта.
<img>
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если
необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг
изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
<small>
Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег
<big>, но действует с точностью до наоборот.
<span>
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
<strong>
Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
<sub>
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки
и уменьшенного размера — H2O.
<sup>
Отображает шрифт в виде верхнего индекса. По своему действию похож на <sub>, но текст отображается выше базовой
линии текста — м2.
Разница между блочными и строчными элементами следующая.
- Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо
вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы
никак не могут хранить блочные элементы.
- Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
- Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна
их содержимому плюс значения отступов, полей и границ.
Универсальные элементы
Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или
встроенные элементы.
<del>
Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование
позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере
<del> как перечеркнутый.
<ins>
Тег <ins> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <del>.
Браузеры помечают содержимое контейнера <ins> подчеркиванием текста.
Теги для списков
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры.
Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и
удобном для пользователя виде.
<ol>
Тег <ol> устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается
по нарастающей.
<ul>
Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.
<li>
Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный
или нумерованный.
<dd>, <dt>, <dl>
Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера <dl>,
куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dd> не
обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем
является закрывать все теги.
Теги для таблиц
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для
упорядочения и представления табличных данных.
<table>
Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые
задаются с помощью тегов <tr> и <td>.
<td>
Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою
очередь располагается внутри тега <table>.
<th>
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке
отображается браузером обычно жирным шрифтом и выравнивается по центру.
<tr>
Тег <tr> служит контейнером для создания строки таблицы.
Теги для фреймов
Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких
областей загружается самостоятельная веб-страница определяемая с помощью тега <frame>. С помощью фреймов веб-
страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм
фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Допустимо
также использовать вложенную структуру элементов, это позволяет дробить фреймы на мелкие области.
<frame>
Тег <frame> определяет свойства отдельного фрейма, на которые делится окно браузера.
<frameset>
Тег <frameset> заменяет собой элемент <body> на веб-странице и формирует структуру фреймов.
<iframe>
Тег <iframe> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область
заданных размеров любые другие независимые документы.
