Вверх A A A
Октябрь 2018
Нед Пн Вт Ср Чт Пт Сб Вс
40
1
2
3
4
5
6
7
41
8
9
10
11
12
13
14
42
15
16
17
18
19
20
21
43
22
23
24
25
26
27
28
44
29
30
31
45
Основные элементы и их типы

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

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

Мы уже познакомились с элементами <!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 / 627


850

Эта статья находится в разделах:

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

Основные элементы и их типы
Свернуть