HTML - Строчные и блочные элементы. Блочные элементы

В первой статье про html я приводил список тэгов, которые, по моему мнению нужно знать верстальщику. Остальные тэги, по сути, являются избыточными или даже лишними, по моему мнению. В этой статье я хотел бы рассказать об основах html и о тэгах html, head, title, body, а так же о div и span. Эти теги, по моему мнению - хорошая основа для начала изучения html.

К сожалению, современные браузеры очень лояльно относятся к веб-верстальщикам. Они пытаются интерпретировать все, что им скармливают. Незакрытые тэги, тэги в разных регистрах, непонятные тэги, теги, стоящие там, где их быть не должно и т.д. Например, лично видел сайт, где контейнер head располагался внутри body, а тег title был даже вне контейнера head. При этом, внешне сайт выглядел нормально!

Я очень надеюсь, что когда-нибудь стандарты станут жесткими, и неправильно сверстанные страницы не будут отображаться верно. Правда, для этого нужно, чтобы все браузеры обрабатывали html и CSS одинаково… Ну да меня занесло.

Как обычно в таких случаях, сначала накидаем план занятия:

1. Общие правила
2. Структура документа

Общие правила

Для начала, стоит сказать, что html — довольно лояльный язык. Существует версия html, стандарт которой ужесточен, — xhtml. Я стараюсь придерживаться этого стандарта. В частности, этот стандарт предполагает, что все теги написаны в нижнем регистре и закрыты. Даже одиночные. Как — будет показано ниже. Все атрибуты написаны в нижнем регистре, а их значения заключены в двойные кавычки и имеют обозначение величины, в которой измеряется их значение. Будем придерживаться этих правил.

Стандартами предусмотрено определенное расположение некоторых элементов. Если элемент, который должен располагаться где-то, располагается в другом месте — это считается ошибкой. Вообще-то, такой документ не должен обрабатываться или должен обрабатываться с ошибкой. Но браузеры щадят нерадивых разработчиков. Точнее, своих пользователей, которые смотрят сайты, разработанные нерадивыми разработчиками.

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

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

Пример контейнера (парные теги):

Пример одиночного тега

текст одной строки
этот текст уже на другой строке

В примере контейнера использовалась конструкция Это комментарий. Все, что заключено внутрь двух стрелочек не анализируется браузером и не выводится на экран. Эти комментарии иногда очень удобно использовать при верстке запутанных моментов, или для отделения логических частей макета в коде.

Блочные и внутристрочные теги

Различие между блочными и внутристрочными (inline) тегами состоит в том, что блочный элемент стремится занять весь экран по ширине (если не явно не указана его ширина) , а внутристрочный занимает ровно столько места, сколько занимает его содержимое. Кроме того, все, что следует за блочным элементом, будет отображаться с новой строки, а то, что за внутристрочным — прямо за ним. Контейнер div является по-умолчанию, блочным, а тег span - внутристрочным. (правда, это поведение легко изменить при помощи CSS). Проиллюстрируем поведение этих тегов.

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

Неправильно:

Есть еще одна вещь, о которой хочу сказать: у тегов могут быть атрибуты. Атрибут задает определенное поведение или как-то дополняет тег. Атрибут пишется прямо в теге, через пробел от его названия, в формате: ИМЯ_АТРИБУТА="ЗНАЧЕНИЕ[мера]". ИМЯ_АТРИБУТА и ЗНАЧЕНИЕ, думаю, понятно что такое. А мера — это обозначение единиц измерения. Если единицы измерения нет, то и выдумывать ее не надо.

Здесь мы задаем атрибут высоты для контейнера div (вообще-то, это лучше делать при помощи CSS, но в данном случае, я написал это, чтобы показать как это вообще может выглядеть) . Атрибуты могут быть назначены только в открывающих тегах. Количество пробелов не имеет значения. Можно ставить пробелы между названием тега и атрибутом, между названием атрибута и знаком равенства, между знаком равенства и кавычкой. Можно ставить пробелы в кавычках, но только не между величиной и единицами ее измерения! Кавычки не обязательно должны быть двойными, можно применять "одинарные кавычки", но только в паре. Вариант "кавычки" не прокатит. В этом случае, одинарная кавычка, как и все, что следует после, будут интерпретированы как часть значения атрибута.

Вроде, это все, что я хотел сказать, в общем. Так что, к делу!

Структура документа

То, что будет описано ниже, как раз относится к разряду обязательного к соблюдению. Так что не стоит думать, что если "и так отображается", то это нормально. Это НЕ нормально.

Каждый документ должен быть заключен в теги Эти теги, как видно, парные. Так что не забывайте открывать такой тег в начале документа и закрывать в конце. По идее, все, что идет за закрвающим тегом уже не должно анализироваться брауезром. Но оно анализируется и даже отображается. Но не советую использовать это. Что примечательно, до открывающего тега может идти другое содержимое. Но в этой статье я не буду об этом говорить. Кто хочет, может поискать про DOCTYPE.

Все остальное содержимое документа должно содержаться в контейнере html. Документ делится на две части. Одна несет управляющую функцию и дополнительную информацию для браузера. А другая — информацию для пользователя. Управляющая часть называется , а содержательная — . Причем контейнер head должен стоят всегда перед body. Эти два контейнера не должны включать друг друга.

Каждый документ должен иметь название. Название документа является очень важным элементом страницы. Оно выводится в названии окна браузера, ему придают огромное значение поисковики. Название страницы можно задать с помощью контейнера . Этот контейнер должен обязательно располагаться в контейнере . Добавлю, что чем выше (по строкам) находится title, тем лучше страничка индексируется поисковиками.

Таким образом, простейший html-документ выглядит примерно так:

Здесь тело документа

Можете скопировать этот текст в блокнот (или похожий текстовый редактор), сохранить этот файл с расширением.html и перетащить в окно своего браузера. Вы увидите, что текст, содержащийся в контейнере title, отобразился в заголовке страницы, а текст из body отобразился в пользовательской части.

Закончим рассмотрение основных тегов документа и возьмемся за теги представления содержимого.

Теги для логического разделения содержимого

Для начала скажу, что теги, которые я рассмотрю ниже, могут находиться только в теге body.

Этот контейнер предназначен для того, чтобы объединять некий текст в логический блок, отделенный от остального содержимого страницы. Если вы возьмете текст нашего простейшего документа и заключите текст из тела документа в этот контейнер, то никаких внешних изменений не заметите. Однако, они, все же, есть. Для текста, заключенного в контейнер div, можно задать одно стилевое оформление. Этот блок можно сделать определенной ширины, задать для него другой шрифт, сделать выравнивание по правому краю или что угодно еще. Вот пример использования тега div (для краткости, не буду приводить весь текст документа целиком. Но вы должны помнить, что нижестоящую конструкцию вы должны вставить в контейнер body для того, чтобы увидеть ее работу.):

Не стоит пугаться незнакомого атрибута style и непонятных слов в нем (таких ли уж непонятных?). Просто контейнер div лучше было показать вместе с этим атрибутом. Чаще всего, в правильной верстке, для контейнеров используются атрибуты id и class, которые служат для связи тега с CSS или идентификации его для JavaScript. Но это уже забегание вперед;)

Контейнер div является блочным элементом. Но это поведение легко изменить.

Контейнер span предназначен для выделения некоторой части текста. Его использование так же, заметно только после придания тегу особых свойств. Часто, нужного эффекта добиваются при помощи CSS. Простой пример применения тега span мы видели, когда изучали разницу между блочными и внутристрочными элементами, поэтому не будем на нем останавливаться.

Итог

В этой статье мы познакомились с общими правилами html, узнали о минимальной структуре документа html, о парных и непарных тегах, и о блочных и внутристрочных контейнерах. Мы увидели разницу между контейнерами разного типа, а так же, познакомились с логическими контейнерами div и span.

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

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

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