Для включения элементов в код применяют закрывающий и открывающий теги. Последний начинается с левой угловой скобки, затем следует имя элемента. Замыкает правая угловая скобка.
- <a>
- <p>
- <div>
Неправильно:
<m> <!-- Элемент 'm' не существует -->
< div> <!-- Перед именем элемента не должно быть пробела -->
Если элемент идет с атрибутами, их записывают в открывающем теге после имени. Потом разделяют пробелами. Все атрибуты – пары «имя/значение».
Ради обеспечения удобства чтения атрибут записывается в нижнем регистре. Его значение заключают в кавычки. В зависимости от типа он может быть чувствителен к регистру.
В открывающем теге любого элемента он указывается всего один раз.
Верно:
http://www.standardista.com
<p class="racket-tailed drongo">
<div id="content">
Неаккуратно, но пройдет валидацию:
http://www.yahoo.com
<!-- Все значения атрибутов лучше заключать в кавычки -->
Непройдет:
<p class="racket-tailed" class="drongo">
<!-- Дублирование атрибутов не допускается. -->
<p class=Racket-Tailed Drongo>
Чтобы закрыть элемент, ставят левую угловую скобку и прямой слеш. За ними следует имя элемента, которое написано в открывающем теге. Затем идет правая угловая скобка. Если элемент является пустым, то его можно завершить опциональным прямым слешем, идущим перед правой угловой скобкой открывающего тега:
http://standardista.com/mobile/ch2/Файлы для этой главы
<p class="racket-tailed drongo">Экзотическиептицы</p>
<div id="content">. . .</div>
Контент помещается между закрывающим и открывающим тегами. Он включает в себя текстовые узлы и/или другие элементы. Правила вложения нужно соблюдать!
Если один элемент включается в другой как дочерний, то другой должен быть как открыт, так и закрыт до окончания родительского элемента:
- <div id="content">
- <p class="files">
- Примеры главы http://standardista.com/mobile/
- В Интернете</a>
- </p>
- </div>
Самозакрывающиеся теги
Закрывающие теги есть у всех элементов, кроме тех, которые называются самозакрывающимися (синоним — пустые элементы). По синтаксическим правилам XHTML, такие элементы закрываются сами с помощью ведущего обратного слеша.
- <img/> — изображение;
- <br/> — переход на новую строку;
- <meta/> — метаданные;
- <hr/> — горизонтальная разделительная линия;
- <base/> — базовый URL и стандартная цель для ресурсов и ссылок;
- <link/> — ссылка;
- <keygen/> — элемент формы для генерирования пары криптографических ключей;
- <area/> — область карты-изображения;
- <col/> — столбец таблицы;
- <command/> — команда меню;
- <embed/> — плагин (подключаемый модуль);
- <input/> — элемент формы;
- <param/> — параметр объекта;
- <source/> — медиаисточник (аудио или видео);
- <track/> — синхронизированное отслеживание медиа;
- <wbr/> — возможность разрыва строки.