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

HTML: Элементы

Элемент HTML - это основная структурная единица веб-страницы, написанная на языке HTML.

Синтаксис HTML элементов

Синтаксис HTML элементов, состоящих из парных тегов:

синтаксис парных HTML тегов

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

Синтаксис HTML элементов, состоящих из одиночных тегов:

синтаксис пустых HTML тегов

Элементы, состоящие из одиночных тегов называются пустыми. Всего в HTML 10 таких элементов:

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

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

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

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