Текстовые блоки DIV и P, а так же их выравнивание

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

Оба эти тега являются контейнерами, т.е. парными: <DIV>текст</DIV> <P>текст</P>.
Для того что-бы при помощи этих тегов можно было выравнивать текст нужно вставить в них атрибут ALIGN с нужным значением вот так:

  <html>
   <head>
    <title>Как выравнять текст</title>
   </head>
  <body>
  <DIV align="center">Выровнять текст по центру.</DIV>
  <DIV align="right">Выровнять текст по правому краю.</DIV>
  <DIV align="left">Выровнять текст по левому краю.</DIV>
  <DIV align="justify">Выровнять текст по  обоим краям.</DIV>
Тоже самое происходит с тегом P: 
  <P align="center">Выровнять текст по центру.</P>
  <P align="right">Выровнять текст по правому краю.</P>
  <P align="left">Выровнять текст по левому краю.</P>
  <P align="justify">Выровнять текст по  обоим краям.</P>
  </body>
  </html>

У вас наверно возник вопрос, зачем в хтмл два одинаковых тега? Но на самом деле это совсем не так. Все теги которые помещаются в тег BODY, делятся на две категории строчные и блочные. Теги-блоки(блочные теги) в хтмл выполняют 2 роли:
1) выполняют свои функции, например тег P выравнивает текст;
2) выполняет автоматический перенос содержимого не помещенного в этот тег, т.е.

    <P align="right">содержимое тега</P> не содержимое.
Не содержимое перенесется на другую строку автоматически. Кстати, тег P можно использовать вообще без атрибута align, тогда он будет выполнять функции абзаца.
Ну а строковые(строчные) теги не выполняют авто переноса, в этом и вся разница, исходя из этого тег P является блочным, а тег DIV блочным, после которого при необходимости переноса нужно ставить тег BR. И еще теги H1-H6 так-же являются блочными.

Теперь еще раз вернемся к нашим тегам P и DIV и рассмотрим как писать нельзя. В чистом HTML(без использования CSS) у вас проблем не возникнет, т.к. нет необходимости вкладывать один тег Р в другой или тег Р в DIV, но на будущее нужно запомнить что тег P не может в себе содержать тег DIV или другой тег P, а вот тег DIV может содержать P или другие DIV.

    Правильный вариант:
    <DIV>
      <DIV></DIV>
      <P></P>
    </DIV>
    Не правильный вариант:
    <P>
      <DIV></DIV>
      <P></P>
    </P>

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

Смотрите также: