Блочные и строчные элементы в HTML: подробное руководство

Блочная верстка в 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 — это основа сайтостроения.