Синтаксис элемента
Элемент 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-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность и понимание кода.