HTML элементы
В этой главе:
-
Синтаксис элемента
-
Пустые элементы
-
Вложенные элементы
-
Пробельные символы
-
Блочные и строчные элементы
Синтаксис элемента
Элемент HTML - это основная структурная единица веб-страницы, написанная на языке HTML. Изображение ниже демонстрирует синтаксис элементов. Для большинства тегов синтаксис элементов будет выглядеть одинаково, за исключением одиночных тегов.
Все элементы в HTML следуют одному формату:
-
Элемент начинается с открывающего тега.
-
Элемент заканчивается закрывающим тегом.
-
Содержимым элемента является все, что находится между открывающим и закрывающим тегами.
-
Некоторые элементы не имеют содержимого (пустые элементы).
-
Большинство элементов могут содержать атрибуты
Примечание: не забывайте в закрывающем теге ставить символ "/", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом.
Пустые элементы
В HTML есть несколько элементов, которые не имеют закрывающего тега, например <img> или<br>. Такие элементы называются пустыми, потому что они не содержат в себе никакого содержимого и не имеют закрывающего тега.
Вложенные элементы
Все HTML-документы состоят из вложенных элементов. Большинство из них могут либо содержать в себе другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:
1
2
3
4
5
6
7
|
< html > < body > < p >Мой первый абзац</ p > </ body > </ html > |
В этом примере элемент <p> вложен в элемент <body>, который, в свою очередь, вложен в элемент <html>.
Когда вы размещаете один элемент внутри другого, стоит быть внимательными и следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, следующий пример является неверным:
1
|
< p >Это < em >очень</ p > интересно</ em > |
Здесь элемент <em> выходит за пределы элемента <p>:
Пример с правильной вложенностью:
1
|
< p >Это < em >очень</ em > интересно</ p > |
Здесь элемент <em> правильно вложен - он находится полностью в элементе <p>:
Пробельные символы
Браузер игнорирует большинство пробельных символов в HTML-коде, поэтому их можно использовать с пользой для себя. В примере, расположенном ниже, представлен код, в котором используются отступы и пробельные символы.
1
2
3
4
5
6
7
8
9
10
11
|
< html > < head > < title >Заголовок</ title > </ head > < body > < h1 >Мой первый заголовок</ h1 > < p >Мой первый абзац</ p > </ body > </ html > |
Они добавлены для более удобного зрительного восприятия кода и удобства отслеживания вложенности элементов. Код примера можно было бы написать и в одну строку, но такой код будет менее удобен для чтения и понимания.
1
|
< html >< head >< title >Заголовок</ title ></ head >< body >< h1 >Мой первый заголовок</ h1 >< p >Мой первый абзац</ p ></ body ></ html > |
Символы табуляции, перенос строки и пробелы в HTML-документе можно использовать в любом количестве для придания коду удобочитаемого вида. Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность и понимание кода.
Блочные и строчные элементы
Все HTML элементы делятся на две группы:
-
блочные (block)
-
строчные (inline)
Блочные элементы представляют собой большие строительные блоки вашей веб-страницы. При отображении браузер автоматически добавляет разрыв строки до и после блочного элемента, при этом он занимает всю доступную ширину (по умолчанию отображается на веб-странице в виде прямоугольника), а высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. Текст в блочных элементах по умолчанию выравнивается по левому краю.
Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (например: верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.
Строчные элементы используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости. В большинстве случаев внутрь строчных элементов допустимо помещать другие строчные элементы, вставлять блочные элементы внутрь строчных запрещено.