Блочная верстка в HTML тесно связана с блочными элементами. Блочные элементы HTML — это часть большого раздела HTML, который посвящен элементам. Ведь каждый HTML-документ, по сути, состоит из множества HTML-элементов, которые образуют ту самую гипертекстовую разметку веб-ресурса.
HTML характеризуется элементами и тегами. Эти два термина часто путают, но это не одно и то же. Теги служат только для обозначения начала и конца элементов. А элементы включают в себя теги и все содержимое между ними. При этом теги бывают парными, когда есть открывающийся тег «<>» и закрывающийся тег «</>». Между парными тегами есть какое-то содержимое, что в совокупности образует элемент.
Также теги бывают одиночными, они не несут в себе никакого содержимого, то есть они пустые и несут в себе лишь указание для браузера, как отразить элемент страницы. К таким тегам относятся:
<br>;
<area>;
<hr>;
<col>;
<input>;
<link>;
и др.
Важно запомнить, что парные теги всегда должны содержать открывающийся и закрывающийся теги. Иногда можно не закрывать парный тег, и это не будет ошибкой, но в других случаях это может вызвать некорректное отображение страницы. Теперь переходим к элементам.
Блочная верстка HTML: блочные и строчные элементы
Все HTML-элементы делятся на две большие группы:
блочные элементы;
строчные элементы.
Теперь подробнее остановимся на каждой группе элементов.
Блочные элементы HTML
Блочные элементы HTML — это такие элементы, которые в результате их объявления образуют блок на странице. Блоку можно:
придать фон,
обвести его контуром,
задать отступы от других блоков,
задать отступы элементам внутри блока,
переместить его в любую часть страницы,
и др.
На каждом сайте в интернете можно различить такие блоки. Обычно они выделяют контент на странице по логическому принципу. Примеры таких блоков на странице:
«шапка сайта»;
блок меню;
сайдбар слева или справа;
каждый элемент сайдбара;
«подвал сайта»;
рекламные блоки;
форма обратной связи;
и др.
Блочные элементы HTML представлены в большом количестве. Приведем в пример несколько блочных элементов, которые обозначаются тегами:
<address>;
<video>;
<article>;
<table>;
<canvas>;
<section>;
<div>;
<p>;
<figure>;
<nav>;
<footer>;
<form>;
<h1> – <h6>;
<header>;
и др.
У каждого блочного элемента есть открывающийся и закрывающийся теги.
Строчные элементы HTML
Строчные элементы HTML не образуют блоков. А это значит, что они не размечают себе часть страницы. Их невозможно обвести контуром. Такие элементы прямиком воздействуют на контент внутри блока. Например, у нас есть какой-то текст. Мы хотим выделить часть текста либо одно предложение, одно слово и даже одну букву жирным шрифтом или другим цветом. Для этого мы помещаем нужный нам текст в тег <strong> или <b>, и текст выделится жирным. Либо выделяем текст тегами <span> и задаем ему класс для CSS, а потом при помощи таблиц стилей изменяем размер или цвет.
Строчный элемент отображается в «линию» или в «строку», поэтому ему нельзя задать размер высоты или ширины. Такой элемент занимает столько места на странице, сколько нужно для отображения элемента внутри него.
Главное отличие строчных элементов от блочных:
блочный элемент HTML создает вокруг элемента «разрыв страницы» с отступами, выделяя элемент среди остальных, поэтому такой элемент может быть любого размера;
строчный элемент ничего не создает вокруг элемента: ни разрывов, ни отступов, в общем, никак не отделяет элемент от других элементов, поэтому его размер зависит от содержимого.
Несколько примеров строчных элементов, которые обозначаются тегами:
<a>;
<var>;
<stong>;
<abbr>;
<b>;
<br>;
<big>;
<button>;
<code>;
<em>;
<img>;
<input>;
<label>;
<map>;
<script>;
<span>;
и др.
Строчные элементы HTML внутри собственных тегов могут содержать только какие-то данные или другие строчные элементы. Строчные элементы HTML не могут внутри себя содержать блочные элементы.
Блочные элементы HTML внутри себя могут содержать:
множество других блочных элементов;
строчные элементы;
контент любого рода.
Заключение
Блочная верстка HTML осуществляется блочными элементами. Теперь вы знаете, как выглядят блочные и строчные элементы в HTML. Знание элементов HTML, плюс знания основ CSS откроют вам возможность создавать несложные, но полноценные сайты. Ведь HTML и CSS — это основа сайтостроения.
Web
