Краткий курс HTML 5

4. Основные элементы и их типы

Мы уже познакомились с элементами <!DOCTYPE>, <html> и <body>, составляющими основу нашего документа. Однако их явно недостаточно, поскольку даже перенести строку и выделить абзацы невозможно простым нажатием Enter. Для этого также существуют теги.

Для переноса строки применяется пустой тег <br />:

Этот текст содержит перенос,<br />
и поэтому занимает две строки

Для выделения абзацев предназначен контейнер <p>:

<p>Это текст абзаца</p>

Также стандартом HTML предусмотрены заголовки 6-и уровней. В браузере они отличаются кеглем шрифта:

<h1>Самый крупный заголовок</h1>
...
<h6>Самый мелкий заголовок</h6>

Традиционно <h1> используется для озаглавливания всего документа, <h2> — главных его разделов, <h3> — подразделов и т. д. После заголовка, а также между абзацами автоматически ставится перенос строки с некоторым отступом, поэтому в этих местах нет необходимости использовать тег <br />.

Блочные, строчные и структурные элементы

Каждому элементу присущ свой синтаксис и способ отображения в браузерах. В некоторых запрещено размещать определенное содержимое, другие автоматически переносятся на новую строку и т. д. Несмотря на многообразие элементов, эти правила одинаковы для многих из них, и поэтому логично было бы объединить их в группы по общим свойствам.

Одной из таких групп являются блочные (block) элементы. Особенность их состоит в том, что они занимают всю ширину родительского элемента, независимо от длины своего содержимого. Таким образом, блочный элемент всегда начинается с новой строки, равно как и следующий за ним. Примерами являются те же заголовки и абзацы.

В отличие от них элементы, не прерывающие течения строки, называются строчными (inline). Несмотря на то, что <br /> переносит текст на следующую строку, его относят именно к строчным, поскольку он не занимает всю ширину родительского элемента.

Этот пример демонстрирует форматирование тегов браузером.
Блочные и строчные элементы

Строчные элементы могут располагаться как внутри блочных, так и друг в друге. Но блочные обычно не могут применяться внутри строчных, и чаще всего вложение их друг в друга также недопустимо.

Неправильно:<p><h1>Такое вложение недопустимо</h1></p>
Правильно:<p>Абзац содержит <b>вложенные <i>строчные</i> теги</b></p>

Элементы, формирующие таблицы, списки и другие составные конструкции, назовем структурными (structural). По одиночке они не применяются, а правила их использования существенно отличаются друг от друга и будут рассмотрены в дальнейших главах. Примерами структурных элементов являются уже знакомые вам <html>, <body> и <head>, правила использования которых были описаны в предыдущей главе.

Как вы помните, теги делятся на пустые и парные. С другой стороны, элементы бывают блочные, строчные и структурные. Эти характеристики отражают различные качества и встречаются в разных комбинациях. Например, существует пустой блочный элемент <hr />, который позволяет вставить в документ разделитель в виде сплошной горизонтальной черты, указывающей на смену тематики текста.

Комментарии

Тег комментария не похож на остальные и выглядит следующим образом:

<!-- Это комментарий -->

Этот тег не поддерживает атрибуты. Применяется он для комментирования исходного кода, чтобы облегчить в дальнейшем его редактирование. Комментарии игнорируются браузером, и не видны пользователю. Однако некоторые программы для работы с HTML-кодом сохраняют в них вспомогательную информацию.

5 комментариев

Пробовал абзац на KDE линуксе в браузерах хром и фаерфокс - не работают :( других не было.

Максим @ 3 марта 2013

Максим, что именно не работает? Что вы видите в браузере?

Алексей @ 3 марта 2013

Выводится текст сначала строки, не с абзаца.

Максим @ 3 марта 2013

Если вы о том, что нет отступа от первого слова, как обычно это бывает в типографских книжках, то его и не должно быть по умолчанию. Чтобы добавить такой отступ, используйте CSS-свойство text-indent:

p {text-indent: 20px}

Или в inline-виде:

<p style="text-indent: 20px">Какой-то длинный текст.</p>

Алексей @ 3 марта 2013

Спасибо, попробую. Классный сайт у вас)

Максим @ 3 марта 2013

Оставить комментарий