Блочная верстка html5: div и HTML5 — учебник CSS

div и HTML5 — учебник CSS

Ранее в книге мы уже несколько раз упоминали о том, что верстка сайтов таблицами канула в Лету, и ее успешно заменила блочная верстка. HTML-таблицы должны использоваться сугубо по прямому назначению (структурирование и отображение данных с распределением по строкам и столбцам), но никак не для создания макета веб-страницы и организации всего ее контента.

Что касается оформления внешнего вида сайта, то в современной веб-разработке HTML-код должен содержать лишь теги и контент в них, а стилевые правила необходимо размещать отдельно от HTML, в файлах CSS. Inline-стили, которые прописываются прямо в веб-документе — это исключение из правил, к которому стоит прибегать лишь по очень уважительным причинам.

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

Блочная верстка с <div>

С помощью разметки определяется расположение элементов на веб-странице. Например, мы создаем шапку сайта, внутри которой размещаем необходимый нам контент (логотип, номера телефонов, навигационное меню и т. п.). Точно так же мы поступаем с основным разделом веб-страницы, а также боковой панелью и футером. Все эти элементы, по сути, являются определенными HTML-тегами. И тегом номер один в блочной верстке является тег <div>.

Элемент <div> можно назвать своеобразным фундаментом для построения веб-страниц. Изначально он ничем не выделяется внешне, кроме разве что того факта, что это блочный элемент, который по умолчанию занимает всю ширину документа, а следующий за ним элемент начинается с новой строки.

Тег <div> универсален и часто служит контейнером для других HTML-элементов. Например, шапка сайта, футер либо сайдбар — это зачастую не что иное, как блок div, содержащий в себе такие же блоки и/или другие HTML-элементы.

Через различные классы и идентификаторы div-блокам задается соответствующее CSS-оформление. К примеру, чтобы было удобнее писать стили для шапки сайта, можно добавить к блоку класс .header, а для футера — класс .footer.

Использование тегов <div> в верстке не означает, что нужно отказаться от других тегов. Если для решения ситуации иной тег подходит лучше, используйте его. Яркий пример — тег длинной цитаты <blockquote>. Согласитесь, нет смысла использовать вместо него <div>, ведь <blockquote> прекрасно справится со своей задачей. Кроме того, это решение будет более правильным с точки зрения семантики.

Блочная верстка с HTML5

И, раз уж мы заговорили о семантике в веб-документах, стоит упомянуть и о тегах, появившихся в HTML5. Новые семантические теги были специально созданы для группировки контента конкретного типа.

Например, шапка сайта может помещаться в HTML5-тег <header>, а подвал — в похожий тег <footer>. Кроме того, существует еще множество других семантических тегов — <nav>, <section>, <article> и т. д. Данными тегами можно заменять обычные теги <div> для объединения элементов.

Как вы могли догадаться, HTML5-теги дают более точную информацию о том, что в них содержится. Это дает определенные преимущества в плане идентифицирования роли того или иного контента веб-страницы, однако со стороны стилизации ничего не меняется: вы можете точно так же применять CSS-стили к семантическим тегам, как применяете их к простым блокам <div>.

---

Далее в учебнике: основные правила создания разметки веб-страниц.

Блочная верстка в HTML и HTML5

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

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

<div>
<ul>
 <li>Главная</li>
 <li>Блог</li>
	<ul>
	 <li>Новости</li>
	 <li>Статьи</li>
	</ul>

 <li>Контакты</li>
</ul>
</div>

В приведенном коде для примера представлено меню типичного сайта. Меню, в свою очередь, обёрнуто тегом div, который, как мы уже говорили, представляет собой логически обоснованный блок. К тегу div теперь можно применить CSS-стили для его отображения.

Или другой пример:

<div>
 <h2>Тег div и его особенности</h2>
   <div>
      <ul>
	<li>Опубликовано: 2 июня 2015</li>
	<li>Автор: Сыроежкин</li>
	<li>Категория: Сайтостроение</li>
      </ul>
   </div>
   <p>Контент</p>
 </div>

Здесь представлен пример HTML-кода статьи в блоге. Мы уже видим, что тег div можно также вкладывать в другой тег div, а тот в третий и т.д. Благодаря такому подходу верстка макета сайта сводится к созданию «дерева элементов» или «дерева блоков», каждый из которых логически и структурно обоснован.

В HTML4 и XHTML блочная верстка сайта осуществлялась описанным выше образом. Т.е. код HTML-страницы выглядер примерно так:

<html>
 <head>
  ...
  <title>Конструктор сайтов "Нубекс"</title>
  ...
 </head>
 <body>
   <div>...</div>
   <div><h2>Заголовок</h2></div>
   <div>
     	<div>...</div>
   </div>
  <div>...</div>
 </body>
</html>

С приходом нового стандарта HTML5 появились теги header, footer, author

и т.д., которые постепенно вытесняют тег div, но не блочную верстку как таковую. Просто теперь понятие «блок» стало применяться реже, вместо него всё чаще используется понятие «элемент». Но принцип блочной верстки остался:

<html>
 <head>
  ...
  <title>Конструктор сайтов "Нубекс"</title>
  ...
 </head>
 <body>
   <nav>...</nav>
   <header><h2>Заголовок</h2></header>
     	<article>...</article>
  <footer>...</footer>
 </body>
</html>

Как можно видеть из приведенного кода, стандарт HTML5 добавил логичности в новые теги, и это представляет преимущество не только для разработчиков, но и для поисковых систем. Согласитесь, поисковая система со 100% вероятностью определит, что между тегами

<header></header> будет именно заголовок, нежели между тегами <div></div>. Это предоставляет огромное преимущество при правильной индексации сайта, ранжировании его в результатах поиска и создания микроразметки.

Кроме того, блочная верстка является незаменимым инструментом при создании мобильной версии сайта или адаптивной верстке (то, как осуществлять мобильную верстку, описано в статье: Как сделать мобильную версию сайта).

Блок отображения HTML | Как блокировать отображение в HTML с примерами?

Блок отображения HTML — одно из наиболее важных свойств положения в HTML, которое отвечает за размещение элементов уровня блока в блоке отображения. При разработке веб-страницы всегда важно правильно расположить элементы в определенном месте. Установка правильного положения макета является одной из самых важных задач. По умолчанию свойство display используется как встроенное. Это всегда будет начинаться с новой строки и растягивать элементы слева направо, чтобы занимать место на всю ширину. Можно установить свойства высоты и ширины для элементов уровня блока, а также включить в него другие встроенные или блочные элементы.

Синтаксис:

• Каждый элемент размещается на веб-странице в определенном месте. Значение свойства помогает нам определить, как оно должно отображаться на веб-странице; будет следующим:

 дисплей :блок; 

• Синтаксис для отображения со значением позиции следующий:

 позиция :значение; 

• В приведенном выше синтаксисе позиция — это область размещения, где фактически будут размещаться элементы. В значение мы можем использовать Block для отображения элементов блочного уровня. Таким образом, он будет использоваться как:

 позиция :блок; 

• Этот блок HTML содержит такие элементы, как
  ,

  ,

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

 display: [ , ] [, , ] 

Существуют следующие значения display для HTML:

1. нет значения

 {
дисплей:нет;
} 

2. встроенное значение

 {
дисплей: встроенный;
} 

3. значение блока

 {
дисплей:блок;
} 

4. встроенное значение блока

 {
отображение: встроенный блок;
} 

Все вышеперечисленные значения помогают нам устанавливать и контролировать макет; в большинстве случаев значения макета являются либо встроенными, либо блочными. Блок отображения начинается с новой строки, покрывающей всю ширину контейнера, чтобы поместить элементы веб-страницы в блок отображения HTML. Элементы блочного уровня не позволяют использовать внутри себя другие блочные элементы.

Как отображается блок в HTML?

• В этом формате используются поля, расположенные друг за другом в вертикальном направлении. Он начнется с вершины содержащего блока.
• Эти блоки управляются вертикальным расстоянием между ними с использованием эквивалентного пространства, которое в CSS называется свойством поля.
• В этом процессе форматирования отображаемого блока левая внешняя сторона каждого блока присоединяется к левой стороне содержащего его блока. То же самое произойдет с правыми краями содержащих блоков.
• Другой способ определить блок отображения в HTML — расположить элементы блока в горизонтальном направлении, как в английском языке. Он расположит макет по вертикали ниже один за другим.
• Поскольку мы используем поля, это помогает создать пространство между двумя блоками или элементами, которое будет отделять элементы друг от друга.
• Элементы уровня блока будут занимать все пространство в линейном направлении, поэтому наши элементы будут разделены на содержащий их блок.
• Как мы знаем, мы можем задавать свойства высоты и ширины для макета в нем, поэтому это помогает размещать блоки друг под другом один за другим.

Примеры блока отображения HTML

Ниже приведены различные примеры.

Пример #1

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

Код:

 

<стиль>
. block_demo{
граница: 2 пикселя сплошного красного цвета;
ширина: 50%;
дисплей:блок;
}

<тело>
 
Список названий цветов:
 
<дел>
<ул>
Красный
Зеленый
Синий
Оранжевый
Фиолетовый
Розовый