Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML

HTML: Элементы

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

синтаксис html-элементов

Все элементы в HTML следуют одному формату:

Примечание: не забывайте в закрывающем теге ставить символ "/", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "/" в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.

Пустые элементы

В HTML есть несколько элементов, которые не имеют закрывающего тега, например <img> или <br>. Такие элементы называются пустыми, потому что они не содержат в себе никакого содержимого и не имеют закрывающего тега.

Вложенные элементы

Все HTML-документы состоят из вложенных элементов. Большинство из них могут либо содержать в себе другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.

Следующий пример состоит из трех элементов, два из которых вложенные:

<html>
  <body>

    <p>Мой первый абзац</p>

  </body>
</html>

В этом примере элемент <p> вложен в элемент <body>, который, в свою очередь, вложен в элемент <html>.

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

<p>Это <em>очень</p> интересно</em>

Здесь элемент <em> выходит за пределы элемента <p>:

Пример с неправильно вложенным элементом

Пример с правильной вложенностью:

<p>Это <em>очень</em> интересно</p>

Здесь элемент <em> правильно вложен - он находится полностью в элементе <p>:

Пример с правильно вложенным элементом

Пробельные символы

Браузер игнорирует пробельные символы в HTML-коде (между элементами и атрибутами), поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. В примере, расположенном ниже, представлен код, в котором используются пробельные символы:

<html>
  <head>
    <title>Заголовок</title>
  </head>
  <body>

    <h1>Мой первый заголовок</h1>
    <p>Мой первый абзац</p>

  </body>
</html>

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

<html><head><title>Заголовок</title></head><body><h1>Мой первый заголовок</h1><p>Мой первый абзац</p></body></html>

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

    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь