Краткий курс 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