Блочные и строчные элементы
Блочные элементы всегда отображаются отдельно так, словно перед ними и после них идет разрыв строки. Браузеры вставляют пустую строку перед и после блочного элемента. Блочные элементы отображают свое содержимое отдельным блоком.
Строчные элементы находятся внутри абзаца, идут в основном тексте без вынесения на отдельную строку.
<h1>, <h2>, …, <h6>, <p> , <blockquote>, <ol>, <ul>, и <li> - это блочные элементы.
<q>, <a>, <img> и <em> - это строчные элементы.
Можно сравнить строчные и блочные элементы так: блочные элементы – это большие строительные блоки вашей веб-страницы, в то время как строчные элементы размечают маленькие части содержимого. Когда вы разрабатываете дизайн страницы, вы обычно начинаете с больших частей (блочных элементов), а затем добавляете строчные элементы для усовершенствования страницы.
Понимание разницы между строчными и блочными элементами имеет большое значение в дальнейшем, когда будет создаваться дизайн HTML-страницы с применением CSS.
Пустые элементы
Существует элемент <br>, который добавляет разрыв строки там, где это нужно, не создавая при этом пустой строки, в отличие от элемента <p>, который, оформляя абзац, создает пустую строку до и после текста.
Задача элемента <br> просто обрывать поток текста и переходить на новую строку. У этого элемента нет ни содержимого, ни закрывающего тега. Такие элементы называются пустыми. Существуют и другие элементы такого типа, т.е. элементы без содержимого. Например, <img> также пустой элемент.
Итак, элементы, изначально не имеющие HTML-содержимого, называются пустыми. Если вам нужно использовать пустой элемент, например, <br> или <img>, то просто указывайте открывающий тег. Это удобная краткая форма, уменьшающая количество кода в HTML-документе.
Вложенность элементов
Когда мы помещаем один элемент внутрь другого, мы называем это вложенностью. Говорят, что элемент <p> вложен в элемент <body>. Мы уже помещали элемент <body> в элемент <html>, <title> в <head>, <q> в <p>. Таким образом и создаются веб-страницы.
Чтобы понять отношения вложенности, изобразим это графически в виде генеалогического древа. В самом верху расположены бабушки и дедушки, внизу – их дети, внуки и т.д. (с.140)
<html> всегда находится в корне древа. <html> содержит два вложенных элемента: <head> и <body>. Можно называть их «детьми» элемента <html>. <title> вложен в элемент <head>. <p> - «родитель» <q>, <body> - «родитель» <p>, <html> - «родитель» <body>.
Чтобы понять, как вложены элементы друг в друга, рассмотрим пример:
<p> Я планирую поместить <em> это </em> в блог </p> - В этом коде элемент <em> вложен в <p>.
<p> Я планирую поместить <em> это </p> в блог </em> - В этом коде совершена ошибка, так как <em> не вложен в <p>.
Для чего нужна информация о вложенности? Если вы пишите HTML-код, не соблюдая вложенности элементов, то ваши страницы могут работать в одних браузерах и не работать в других. Но если вы постоянно заботитесь о вложенности, то сможете избежать несоответствия тегов, а ваши страницы будут хорошо отображаться во всех браузерах. Это имеет большое значение для соответствия стандартам HTML, а также, когда речь будет идти о наследовании признаков.