2.4. Типы тегов
В HTML, теги делятся на несколько типов или моделей:
Inline (встроенные, уровня строки) — все, что выводят эти теги на страницу, всегда отображается браузером на одной сроке. И только если доступной ширины (например, ширины окна браузера) не хватает, то происходит перенос строки на следующую и т.д.
Пример использования встроенных тегов
<b>Жирный шрифт</b><i>Курсивный шрифт</i>
Block (блочные, уровня блока) — все, что выводит каждый из таких тегов на страницу, отображается браузером с новой строки, После себя такие элементы также создают переносы строк.
Пример использования блочных тегов
<p>Параграф 1</p><p>Параграф 2</p>
2.5. Атрибуты html-тегов
Атрибуты используются для добавления HTML-элементам новых свойств, изменений уже существующих или передачи элементам специальных, необходимых им для работы, инструкций. Каждый тег содержит свой, персональный набор атрибутов. В общем случае их указание происходит следующим образом:
<тег1 атрибут1="значение" атрибут2="значение">...</тег1>
<тег2 атрибут1="значение">
В первой строке показаны атрибуты парного тега, во второй — пустого. Указывать их можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные кавычки (" ").
Пример правильного использования атрибутов тегов
<span style="color:green">Зеленый текст</span>
<span style="color:red">Красныйтекст</span>
Результат в браузере
В этом примере происходит изменение цвета текста внутри тегов. А вот в следующем примере присутствует ошибка, так как внутри одного тега находится два одинаковых атрибута style.
Пример неправильного использования атрибутов тегов
<span style="color:green" style="color:red">НЕПРАВИЛЬНО</span>
Всегда будьте внимательны при написании тегов, атрибутов и, особенно, их значений, так как неправильно написанные параметры браузеры просто проигнорируют. Если вы используете HTML-редакторы с подсветкой синтаксиса, то они всегда вам покажут неправильно написанный тег или атрибут, чего не скажешь про значения атрибутов. Дело в том, что значения могут быть абсолютно разными (например, размеры изображений), поэтому их синтаксис очень трудно отследить программно.
Атрибуты можно указывать в одну строку, а можно в несколько
Да, атрибуты, как и теги, можно указывать в одну или несколько строк. В следующем примере показан один и тот же, но написанный по-разному, тег.
Пример переноса строк внутри тега
<img src="images/image.png" width="100" height="80" alt="Атрибуты тегов">
<img src="images/image.png"
width="100" height="80"
alt="Атрибуты тегов">
Как видите, если указание тегов на разных строках повышает удобочитаемость HTML-кода, то подобное указание атрибутов его часто снижает. Хотя, на вкус и цвет, как говорится...
Порядок указания атрибутов тегов
Атрибуты тегов можно указывать абсолютно в любой последовательности, поэтому пишите их так, как вам удобней. В следующем примере оба варианта верны.
Пример указания атрибутов в разном порядке
<img src="images/image.png" width="100" height="80" alt="Атрибутытегов">
<img width="100" src="images/image.png" alt="Атрибутытегов" height="80">
Значения по умолчанию, обязательные атрибуты
Многие теги уже изначально имеют определенные значения своих атрибутов, поэтому, если вы не хотите их менять, то и атрибуты можно не указывать в принципе. Главное — следите и не забывайте о том, что существуют обязательные атрибуты тегов, которые необходимо проставлять всегда. Ну, об этом мы еще будем говорить с вами в дальнейших уроках.