Курсы HTML/CSS
Урок 3. Строчные элементы. Валидация документа
Закрывающие и открывающие теги. Пустые элементы
В языке HTML есть закрывающие элементы, пустые элементы и кроме того, есть как бы сказать "странные" элементы, которые являются парными (у них есть открывающий и закрывающий тег), но в то же время закрывающий тег технически допускается не ставить. Правильной рекомендации в таком случае нет, однако я рекомендую привыкать закрывать все закрывающие теги
Пример обязательно закрываемого парного тега: <h1>Заголовок</h1> Пример пустого элемента: <hr /> (горизонтальная линия) можно и так: <hr> Пример необязательного закрывающего тега у парного элемента: <p>Параграф</p> или так: <p> Параграф без закрывающего тега
Но как же браузер в таком случае определит, где заканчивается, например открытый тег <p>? Все очень просто: технически в теге <p> не может быть никаких блочных элементов и как только браузер наткнется на новый открывающий тег, он автоматически закроет открытый ранее тег <p>. Однако еще раз повторюсь - так лучше не делать и не привыкать к этому!
Кавычки в значениях атрибутов
Как и в случае парных тегов, у атрибутов, а точнее у их значений сложилась такая же история - кавычки в значениях атрибутов можно ставить, а можно и не ставить. Однако я опять-таки рекомендую кавычки ставить и приучиться к этому! Кавычки могут быть одинарными или двойными (так: 'значение' или так: "значение"). Если в значении атрибута каким-то чудом есть пробел, то кавычки обязательны!
<div align="center">Раздел</div> здесь: align - атрибут; "center" - значение атрибута
Элементы и атрибуты в спецификациях
В каждой спецификации, будь то HTML5 или какая- либо другая, одни элементы выводят из обращения, новые добавляют и т.д. То же касается и атрибутов. Запомните следующее в спецификациях:
New - нововведенный элемент
Deprecated - устаревший элемент, нежелательный к употреблению, т.к. он может перейти в разряд Obsolete
Obsolete - полностью отмененный элемент
Атрибуты:
Implied - необязательные (подразумеваемые) атрибуты.
Recuired - обязательные атрибуты.
Кроме того, каждый элемент имеет семантику, т.е. свое смысловое значение даже несмотря на то, что одни элементы могут быть схожи по своему поведению с другими.
К счастью новые спецификации выходят ни так часто и переписывать свои коды под них вам придется редко. Все спецификации вы можете посмотреть на сайте консорциума W3.org
Следует учитывать, что документ HTML читается не только браузерами, но и поисковыми системами, поэтому нужно составлять его правильно, и даже если технически допускается чего-то не дописать, например кавычки в значениях атрибутов, то этого лучше не делать, а составлять документ правильно потому, что в будущем могут возникнуть проблемы и придется лезть в свои старые коды и все дописывать и переделывать, что, скажу я вам, очень муторно и неприятно.
Inline (строчные) элементы
Строчные элементы чаще всего встраиваются в блочные и воздействуют не на все содержимое, а на отдельную его часть, например на отдельный кусочек текста. Возьмём такой пример кода:
<head><title>Строчные элементы</title></head>
<body>
<p>Строчный элемент воздействует на <em>отдельный</em> участок текста</p>
</body>
</html>
Результат отображения в браузере будет таким:
Давайте в качестве примера рассмотрим некоторые строчные элементы и узнаем их семантику (смысловое значение):
<head><title>Элементы с семантикой</title></head>
<body>
<strong>Выделение важного текста</strong>
<em>Акцент на части текста</em>
<ins>Добавление текста</ins>
<del>Удаление текста</del>
<cite>Цитирование</cite>
</body>
</html>
Результат отображения этих элементов в браузере будет таким:
Помимо элементов с семантикой, есть строчные элементы для простого форматирования текста. Рассмотрим несколько примеров:
<head><title>Форматирование текста</title></head>
<body>
<b>Полужирное начертание</b>
<i>Наклонное начертание</i>
<u>Подчеркивание текста</u>
<strike>Перечеркивание текста</strike>
<s>Перечеркивание текста</s>
</body>
</html>
Вот так это будет выглядеть в браузере:
Из приведенных примеров видно, что различные элементы могут давать одинаковый результат отображения в браузере, но нести разную смысловую нагрузку. В большей степени на это обращают внимание поисковые машины, которые будут индексировать ваш сайт, поэтому будьте внимательны и используйте элементы по назначению!
Для своей практики попробуйте использовать в качестве практической работы изученные элементы.
Валидация документа
DTD (Document Type Definition) программа, в которой описаны синтаксис, грамматика и все остальные правила языка HTML. Валидатор - это программа, которая используя правила DTD проверяет документ на техническую правильность составления.
Указываемый тип документа для HTML5 значительно упростили, и теперь она выглядит так: <!DOCTYPE html>. Тип документа указывается в самом начале документа перед открывающим тегом <html>.
<!DOCTYPE html> <html> <head><title>Заголовок документа.</title></head> <body> Содержание документа. </body> </html>
Валидатор для HTML5 находится по адресу: http://validator.w3.org/nu. Помимо официального сайта консорциума W3.org, его можно найти и на других сайтах.
После того, как вы вставите весь свой документ в валидатор он определит по типу документа (строка <!DOCTYPE ...>) с какими правилами (для какой версии HTML) документ нужно сверять и, после проверки, покажет вам ваши ошибки в документе.
Универсальный атрибут id
В конце третьего урока мы с вами познакомимся с одним из универсальных атрибутов - это атрибут id. Универсальный - говорит о том, что этот атрибут может применяться у любого элемента HTML. Служит он для того, чтобы к элементу, у которого есть атрибут id можно было обратиться из любого другого документа (например из файла CSS) или с любого места кода внутри документа и повлиять на него. Значение этого атрибута обязательно должно начинаться с латинской буквы, далее могут идти цифры и знаки ( _ ) и (-). Использование русских букв недопустимо.
<!DOCTYPE html> <html> <head><title>Универсальный атрибут id</title></head> <body> <p id="paragraf">Параграф с атрибутом id="paragraf"</p> </body> </html>
Более подробно с этим универсальным атрибутом и другими мы познакомимся на следующих уроках.