Все визуальные (видимые) элементы делятся на две группы: блочные и линейные.
Блочные элементы
Блочные элементы представляют смысловые блоки.
Представление блочных элементов
Блочные элементы занимают всю доступную ширину и располагаются один под другим.
Перенос слов осуществляется в границах блочного элемента.
Как пример блочных элементов можно привести абзацы.
Абзацы выстраиваются один под другим, занимают всю ширину страницы. Текст в абзацах переносится по словам.
Абзацы - <p>
Абзацы — основной структурный элемент Web-страницы.
Абзацы создаются с помощью элемента <p>.
Его имя происходит от английского слова «paragraph» — «абзац».
Между тегами<p> и </p> располагается текст абзаца.
<p>
Тут находится текст первого абзаца.
</p>
<p>
Тут находится текст второго абзаца.
</p>
Текст в абзацах переносится автоматически.
Абзацы являются блочными элементами.
В абзацы нельзя включать другие блочные элементы.
Элемент <p> включаются в элемент <body>.
Заголовки <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
Заголовки разбивают страницу на смысловые фрагменты.
Заголовки бывают шести уровней.
Заголовок первого уровня является названием страницы. Он создаётся с помощью элемента <h1>.
Заголовок второго уровня разбивает страницу на логические разделы. Он создаётся с помощью элемента <h2>.
Заголовок третьего уровня разбивает разделы на смысловые части. Он создаётся с помощью элемента <h3>.
Заголовок четвёртого уровня является подзаголовком для элемента <h3>. Он создаётся с помощью элемента <h4>.
Заголовок пятого уровня является подзаголовком для элемента <h4>. Он создаётся с помощью элемента <h5>.
Заголовок шестого уровня является подзаголовком для элемента <h5>. Он создаётся с помощью элемента <h6>.
Первым элементом на странице всегда должен быть элемент <h1>.
Заголовки являются блочными элементами. Заголовки нельзя включать в абзацы, а абзацы — в заголовки.
Элементы <h1>, <h2>, <h3>, <h4>,<h5> и <h6> включаются в элемент <body>.
В HTML 3.2 выравнивание заголовков задавалось с помощью атрибута align с возможными значениями «left», «right» и «center».
Теперь для этих целей используется свойство text-align.
Размеченный текст <pre>
Элемент <pre> позволяет легко вставлять в страницу листинги программ.
Как помните, в XHTML пробелы и начала строк игнорируются.
Если Вы хотите обойти такое стандартное поведение обозревателя, воспользуйтесь элементом <pre>.
Текст внутри элемента <pre> выводится в том же виде, в каком он был сохранён, с соблюдением всех пробелов и новых строк.
<pre>
Тут будут сохранены все
пробелы
и строки.
</pre>
Элемент <pre> удобен для листингов — исходных кодов программ.
Он позволяет сохранить все отступы.
Элементы <pre> включаются в элемент <body>.
Линейные элементы
Линейные элементы используются для выделения букв, слов и фраз.
Представление линейных элементов
Линейные элементы занимают ровно столько места, сколько им необходимо.
При необходимости, линейный элемент может разорваться и продолжиться на следующей строке.
Линейные элементы располагаются слева направо и могут свободно включаться в текст.
К линейным элементам относятся элементы логического форматирования: <strong> и <em> и ссылки — элемент <a>.
<strong> и «эмфазис» <em>
Элементы <strong> и <em> служат для логического выделения.
Линейные элементы <strong> и <em> используются для расстановки логических ударений в тексте.
Поскольку эти элементы линейны, они позволяют выделить букву, слово или фразу.
Обычно <strong> отображается полужирным, а <em> — курсивом.
Но это стандартное поведение легко может быть переопределено в стилях.
Ранее использовались элементы «полужирность» <b> и курсив <i>. Теперь они заменены на элементы <strong> и <em> соответственно.
Отказ от элементов <b> и <i> обусловлен большим количеством методов работы с Web.
Карманные компьютеры (handheld PCs, PDAs) и мобильные телефоны могут выделять текст только большей яркостью.
Средства синтеза речи также не могут произнести текст «полужирно».
Элементы <b> и <i> несут информацию только о визуальном представлении, а элементы <strong> и <em> позволяют организовывать любые выделения: начертанием, звуком, цветом.
Сосуществование блочных и линейных элементов
Линейные элементы могут включаться как в блочные, так и в линейные элементы. Блочные элементы включаются только в блочные элементы.
В абзацы никакие блочные элементы включаться не могут.
В линейные элементы нельзя включать блочные, так как при этом нарушаются сами определения блочности и линейности.