Блок html: Блочная модель | htmlbook.ru

Быстрый старт / Методология / БЭМ

Введение

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Содержание

• Блок

• Элемент

• Когда создавать блок, когда — элемент?

• Модификатор

• Микс

• Файловая структура

Блок

Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.

Особенности:

• Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Пример

<!-- Верно.  Семантически осмысленный блок `error` -->
<div></div>
<!-- Неверно. Описывается внешний вид -->
<div></div>

• Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.

• В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или id.

Таким образом обеспечивается независимость, при которой возможно повторное использование или перенос блоков с места на место.

Принцип работы с блоками

Вложенность

• Блоки можно вкладывать друг в друга.

• Допустима любая вложенность блоков.

Пример

<!-- Блок `header` -->
<header>
    <!-- Вложенный блок `logo` -->
    <div></div>
    <!-- Вложенный блок `search-form` -->
    <form></form>
</header>

Элемент

Составная часть блока, которая не может использоваться в отрыве от него.

Особенности:

• Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

• Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

Пример

<!-- Блок `search-form` -->
<form>
    <!-- Элемент `input` блока `search-form` -->
    <input>
    <!-- Элемент `button` блока `search-form` -->
    <button>Найти</button>
</form>

Принципы работы с элементами

• Вложенность

• Принадлежность

• Необязательность

Вложенность

• Элементы можно вкладывать друг в друга.

• Допустима любая вложенность элементов.

• Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

Пример

<!--
    Верно. Структура полного имени элементов соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form>
    <div>
        <input>
        <button>Найти</button>
    </div>
</form>
<!--
    Неверно. Структура полного имени элементов не соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form>
    <div>
        <!--
            Рекомендуется:
            `search-form__input` или `search-form__content-input`
        -->
        <input>
        <!--
            Рекомендуется:
            `search-form__button` или `search-form__content-button`
        -->
        <button>Найти</button>
    </div>
</form>

Имя блока задает пространство имен, которое гарантирует зависимость элементов от блока (

Блок может иметь вложенную структуру элементов в DOM-дереве:

Пример

<div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

Однако эта же структура блока в методологии БЭМ всегда будет представлена плоским списком элементов:

Пример

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Это позволяет изменять DOM-структуру блока без внесения правок в коде каждого отдельного элемента:

Пример

<div>
    <div>
        <div></div>
    </div>
    <div></div>
</div>

Структура блока меняется, а правила для элементов и их названия остаются прежними.

Принадлежность

Элемент — всегда часть блока и не должен использоваться отдельно от него.

Пример

<!-- Верно. Элементы лежат внутри блока `search-form` -->
<!-- Блок `search-form` -->
<form>
    <!-- Элемент `input` блока `search-form` -->
    <input>
    <!-- Элемент `button` блока `search-form` -->
    <button>Найти</button>
</form>
<!-- Неверно.
   Элементы лежат вне контекста блока `search-form` -->
<!-- Блок `search-form` -->
<form>
</form>
<!-- Элемент `input` блока `search-form` -->
<input>
<!-- Элемент `button` блока `search-form` -->
<button>Найти</button>

Необязательность

Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.

Пример

<!-- Блок `search-form` -->
<div>
    <!-- Блок `input` -->
    <input>
    <!-- Блок `button` -->
    <button>Найти</button>
</div>

Когда создавать блок, когда — элемент?

Создавайте блок

Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Создавайте элемент

Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

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

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

• Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

• Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Типы модификаторов

Булевый

• Используют, когда важно только наличие или отсутствие модификатора, а его значение несущественно. Например, «отключен»: disabled. Считается, что при наличии булевого модификатора у сущности его значение равно true.

• Структура полного имени модификатора соответствует схеме:

  • имя-блока_имя-модификатора;

  • имя-блока__имя-элемента_имя-модификатора.

Пример

<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form>
    <input>
    <!-- Элемент `button` имеет булевый модификатор `disabled` -->
    <button>Найти</button>
</form>

Ключ-значение

• Используют, когда важно значение модификатора. Например, «меню с темой оформления islands»: menu_theme_islands.

• Структура полного имени модификатора соответствует схеме:

  • имя-блока_имя-модификатора_значение-модификатора;

  • имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Пример

<!-- Блок `search-form` имеет модификатор `theme` со значением `islands` -->
<form>
    <input>
    <!-- Элемент `button` имеет модификатор `size` со значением `m` -->
    <button>Найти</button>
</form>
<!--
    Невозможно одновременно использовать два одинаковых модификатора
    с разными значениями
-->
<form>
    <input>
    <button>
        Найти
    </button>
</form>

Принципы работы с модификаторами

Модификатор нельзя использовать самостоятельно

С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее.

Пример

<!-- Верно. Блок `search-form` имеет модификатор `theme` со значением `islands`-->
<form>
    <input>
    <button>Найти</button>
</form>
<!-- Неверно. Отсутствует модифицируемый класс `search-form` -->
<form>
    <input>
    <button>Найти</button>
</form>

Зачем в именах модификаторов и элементов указывать имя блока?

Микс

Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.

Миксы позволяют:

• совмещать поведение и стили нескольких сущностей без дублирования кода;

• создавать семантически новые компоненты интерфейса на основе имеющихся.

Пример

 <!-- Блок `header` -->
<div>
    <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
    <div></div>
</div>

В данном примере мы совместили поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости.

Файловая структура

Принятый в методологии БЭМ компонентный подход применяется и к организации проектов в файловой структуре. Реализации блоков, элементов и модификаторов делятся на независимые файлы-технологии, что позволяет нам подключать их опционально.

Особенности:

• Один блок — одна директория.

• Имена блока и его директории совпадают. Например, блок header — директория header/, блок menu — директория menu/.

• Реализация блока разделяется на отдельные файлы-технологии. Например, header.css, header.js.

• Директория блока является корневой для поддиректорий соответствующих ему элементов и модификаторов.

• Имена директорий элементов начинаются с двойного подчеркивания (__). Например, header/__logo/, menu/__item/.

• Имена директорий модификаторов начинаются с одинарного подчеркивания (_). Например, header/_fixed/, menu/_theme_islands/.

• Реализации элементов и модификаторов разделяются на отдельные файлы-технологии. Например, header__input.js, header_theme_islands.css.

Пример

search-form/                           # Директория блока search-form
    __input/                           # Поддиректория элемента search-form__input
        search-form__input.css         # Реализация элемента search-form__input
                                       # в технологии CSS
        search-form__input.js          # Реализация элемента search-form__input
                                       # в технологии JavaScript
    __button/                          # Поддиректория элемента search-form__button
        search-form__button. css
        search-form__button.js
    _theme/                            # Поддиректория модификатора
                                       # search-form_theme
        search-form_theme_islands.css  # Реализация блока search-form, имеющего
                                       # модификатор theme со значением islands
                                       # в технологии CSS
        search-form_theme_lite.css     # Реализация блока search-form, имеющего
                                       # модификатор theme со значением lite
                                       # в технологии CSS
    search-form.css                    # Реализация блока search-form
                                       # в технологии CSS
    search-form.js                     # Реализация блока search-form
                                       # в технологии JavaScript

Такая файловая структура позволяет легко поддерживать и повторно использовать код.

Разветвленная файловая структура предполагает, что в production код будет собираться в общие файлы проекта.

Придерживаться рекомендуемой файловой структуры не обязательно. Вы можете использовать любую альтернативную структуру проекта, соответствующую принципам организации файловой структуры БЭМ, например:

• Flat

• Flex

Забудьте про div, семантика спасёт интернет / Хабр

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.

Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.

Почему семантика важна

Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.

Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.

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

Классический пример — расписание поезда «Сапсан» в выдаче Google.

Разработчики tutu.ru сверстали таблицу тегом <table> вместо <div> и их сниппет оказался в выдаче Google по важному коммерческому запросу.

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div > для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и <span>. В спецификации для каждого семантического элемента описана его роль.

Ну и представьте, насколько проще читать <nav></nav> вместо <div></div>. Или вот такой код. Смотрите и сразу понятно, что тут и зачем.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
    <header>
      <!— Шапка сайта —>
    </header>
    <main>
      <!— Основное содержимое страницы —>
    </main>
    <footer>
      <!— Подвал сайта —>
    </footer>
  </body>
</html>

Основные семантические теги HTML

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег <p>, который обозначает параграф. При этом теги <i> или <b> не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

<article>

• Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.

• Особенности: желателен заголовок внутри.

• Типовые ошибки: путают с тегами <section> и <div>.

<section>

• Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.

• Особенности: желателен заголовок внутри.

• Типовые ошибки: путают с тегами <article> и <div>.

<aside>

• Значение: побочный, косвенный для страницы контент.

• Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.

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

<nav>

• Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.

• Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в <nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен <footer> сам по себе.

• Типовые ошибки: многие считают, что в <nav> может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.

<header>

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

• Особенности: этих элементов может быть несколько на странице.

• Типовые ошибки: использовать только как шапку сайта.

<main>

• Значение: основное, не повторяющееся на других страницах, содержание страницы.

• Особенности: должен быть один на странице, исходя из определения.

• Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

<footer>

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

• Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.

• Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

1. Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.

2. Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.

3. Заголовок всего документа и заголовки смысловых разделов. Теги: <h2>-<h6>.

4. Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.

5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

• Получилось найти самый подходящий смысловой тег — использовать его.

• Для потоковых контейнеров — <div>.

• Для мелких фразовых элементов (слово или фраза) — <span>.

Правило для определения <article>, <section> и <div>:

1. Можете дать имя разделу и вынести этот раздел на другой сайт? — <article>

2. Можете дать имя разделу, но вынести на другой сайт не можете? — <section>

3. Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — <div>

Как точно не нужно делать

Не используйте семантические теги для украшательств. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

1. Тег <blockquote> должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.

2. Тег <ul> тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег <ul> можно вкладывать только теги <li> и ничего больше.

3. Тег <p> использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и курсах HTML Academy. Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена станет ещё приятнее.

В конце концов, один раз живём.

Использование HTML и CSS. Турбо‑страницы для контентных сайтов

1. Поддерживаемые теги
2. Пример HTML
3. Пример CSS
4. Пример результата
5. Пример RSS-канала

Для своих Турбо-страниц вы можете использовать один из режимов обработки HTML:

• режим по умолчанию — в этом режиме атрибуты class, id будут проигнорированы, исходная структура тегов может быть изменена. См. пример RSS-канала для данного режима.

• режим с применением turbo:extendedHtml — в этом режиме используются атрибуты class, id и сохраняется исходная структура тегов. См. примеры ниже для данного режима.

Примечание. Пользовательские HTML и CSS не работают внутри блоков RSS-канала.

Все перечисленные теги при использовании параметра turbo:extendedHtml поддерживают атрибуты class, id.

Блочные

main, div, footer, aside, section, pre, h2—h6, hr, blockquote, table.

Строчные

ins, del, small, big, u, abbr, span, a.

Форматирования

b, strong, i, em, sub, sup, code.

Списков

ol, ul.

Внимание. Теги span, aside, main, footer,section будут перенесены на Турбо-страницу, если включен параметр turbo:extendedHtml .

<header>
    <h2><span>Ресторан «Полезный завтрак»</span></h2>
</header>
<div>Вкусно и полезно</div>
<div>
    <div>
        <img src="https://avatars.mds.yandex.net/get-turbo/1683990/rthbee79622d4d555cff702b7d5d1e52287/orig">
    </div>
    <div>
        <img src="https://avatars. mds.yandex.net/get-turbo/3611801/rthb52c0e885feecd3c3b4f65b93b387bd2/orig">
    </div>
    <div>
        <img src="https://avatars.mds.yandex.net/get-turbo/2916822/rthaff163472730718b6eae066a7904c301/orig">
    </div>
    <div>
        <img src="https://avatars.mds.yandex.net/get-turbo/2799516/rth0b82b0afdb2dc030e328bf1cb983cf05/orig">
    </div>
</div>
<div>
    <a href="https://example.com/">Cайт</a>
</div>
<p>Как хорошо начать день? Вкусно и полезно позавтракать!</p>
<p>Приходите к нам на завтрак. Фотографии наших блюд ищите <a href="#">на нашем сайте</a>.</p>
<h3>Меню</h3>
<figure>
    <img src="https://avatars.mds.yandex.net/get-sbs-sd/369181/49e3683c-ef58-4067-91f9-786222aa0e65/orig">
    <figcaption>Омлет с травами</figcaption>
</figure>
<p>В нашем меню всегда есть свежие, вкусные и полезные блюда.</p>
<p>Убедитесь в этом сами. </p>
<button formaction="tel:+7(123)456-78-90" data-background-color="#5B97B0" data-color="white"
        data-primary="true">Заказать столик</button>
<p>Наш адрес: <a href="#">Nullam dolor massa, porta a nulla in, ultricies vehicula arcu.</a></p>
<p>Фотографии — http://unsplash.com</p>

.title {
    text-align: center;
}
.custom.subtitle {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 25px;
    text-align: center;
    padding: 25px;
}
.image-grid {
    line-height: 0;
    padding-bottom: 20px;
}
.image-grid .cell {
    display: inline-block;
    width: 49%;
}
.user .img-wrapper {
    width: 100px;
    min-width: 100px;
}
.user .img-wrapper .turbo-image {
    border-radius: 50%;
}
.site {
    width: 75px;
    height: 75px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: 0 0 5px #aaa;
    z-index: 100;
}
. site .site-link {
    position: relative;
    top: 25px;
    display: block;
    text-align: center;
}

<item turbo="true">
    <title>Заголовок страницы</title>
    <turbo:extendedHtml>true</turbo:extendedHtml>
    <link>https://example.com/restoran</link>
    <turbo:content>
        <![CDATA[
        <header>
            <h2><span>Ресторан «Полезный завтрак»</span></h2>
        </header>
        <div>Вкусно и полезно</div>
        <div>
            <div>
                <img src="https://avatars.mds.yandex.net/get-turbo/1683990/rthbee79622d4d555cff702b7d5d1e52287/orig">
            </div>
            <div>
                <img src="https://avatars.mds.yandex.net/get-turbo/3611801/rthb52c0e885feecd3c3b4f65b93b387bd2/orig">
            </div>
            <div>
                <img src="https://avatars. mds.yandex.net/get-turbo/2916822/rthaff163472730718b6eae066a7904c301/orig">
            </div>
            <div>
                <img src="https://avatars.mds.yandex.net/get-turbo/2799516/rth0b82b0afdb2dc030e328bf1cb983cf05/orig">
            </div>
        </div>
        <div>
            <a href="https://example.com/">Cайт</a>
        </div>
        <p>Как хорошо начать день? Вкусно и полезно позавтракать!</p>
        <p>Приходите к нам на завтрак. Фотографии наших блюд ищите <a href="#">на нашем сайте</a>.</p>
        <h3>Меню</h3>
        <figure>
            <img src="https://avatars.mds.yandex.net/get-sbs-sd/369181/49e3683c-ef58-4067-91f9-786222aa0e65/orig">
            <figcaption>Омлет с травами</figcaption>
        </figure>
        <p>В нашем меню всегда есть свежие, вкусные и полезные блюда.</p>
        <p>Убедитесь в этом сами. </p>
        <button formaction="tel:+7(123)456-78-90"
                data-background-color="#5B97B0"
                data-color="white"
                data-primary="true">Заказать столик</button>
        <p>Наш адрес: <a href="#">Nullam dolor massa, porta a nulla in, ultricies vehicula arcu.</a></p>
        <p>Фотографии — http://unsplash.com</p>
        ]]>
    </turbo:content>
</item>

Написать в службу поддержки

Была ли статья полезна?

Изучаем html блоки тег div — верстка, примеры, видео

Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка.

У вас наверняка возникли вопросы, особенно если вы новички, что же это такое?

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

Приступим к изучению.

Содержание

• 1 HTML div блоки и верстка
• 2 Примеры использования тегов div
  • 2. 1 Рекомендую ознакомиться с этими статьями:

HTML div блоки и верстка

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

Вот примерно таким было создание сайтов. Это очень примитивный пример, зато вы наглядно можете представить как создавались сайты в те далекие времена. Технологии интернет не стоят на месте и в какой-то момент к нам пришло такое понятие как html div верстка. И тут, как говорится, понеслось.

Ее значение в сайтостроении действительно велико. Теперь создавать сайты и управлять блоками html стало проще простого. Сайты стали получаться красивыми, интересными. Теперь весь мир верстает ими только в путь.

Вот так теперь можно изобразить упрощенно модель использования div html блоков.

Удобство заключается в независимости блоков друг от друга, ими легко управлять по отдельности, двигать как вам угодно, добавлять стили, можно задавать общие стили через CSS правила для нескольких групп Div. Согласитесь это удобно.

Примеры использования тегов div

Давайте разберем на практике несколько примеров как можно применить теги div на html странице. На простом примере мы создадим 4 блока на странице. Я буду всегда использовать в этом и дальнейших примерах программу Notepad++

Итак, давайте поясню. У нас есть конструкция <!DOCTYPE html>  она годна для современных браузеров и поддерживает разметку html 5 про нее мы поговорим в дальнейших выпусках.

Далее открывается большой «родительский» контейнер <html> . Он парный его нужно закрыть в конце обязательно! Потом идет открытие служебного тега <head> , который тоже парный и в нем содержится служебная информация о кодировке <meta charset> , самый главный seo заголовок страницы title, описание (его сюда я не включал, ибо нет необходимости, мы разбираем чисто технический аспект), сюда же подключают CSS стили, шрифты (библиотека Google Fonts), яваскрипты.

Следующим идет тег <body> . В нем уже будет хранится вся наша разметка блоков и все контейнеры с тегами. Просто запомните его как огромную «бочку».

И вот, наконец, пошли наши контейнеры div.

<div></div> <div></div> <div></div> <div></div>

Важно! Они тоже парные их нужно также наряду с другими тегами закрывать.

Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их. Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс.

Можно задавать не только атрибут class, но также можно использовать и id (идентификатор). Вы можете задать вопрос: «А какая мне разница, какой использовать?» Отвечу, для верстки можете применить любой способ. С одним лишь отличием — по приоритету id имеет больше привилегий, чем class .

Это я поясню в видео шпаргалке ниже.

У каждого свой стиль создания сайтов, мне больше нравится использовать именно class, поскольку эта запись в CSS отображается с точкой .selector

Да, кстати, хочу сказать, что header, sidebar, content, footer — это все селекторы CSS, а они уже будут иметь атрибуты.

Итак, продолжаем разгребать кашу в головах пользователей. Div блоки с class мы создали теперь приступим к CSS.

Откроем внутри тега head css правила для нашей страницы, т.е оформим ее. Сделаем это вот так:

Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>Пример использования div тегов</title> <style> .header { width:600px; height:120px; border:1px solid black; } .sidebar { width:200px; height:300px; border:1px solid black; float:left; } .content { width:370px; height:300px; border:1px solid black; margin-left:230px; } .footer { width:600px; height:130px; border:1px solid black; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>

У блока с контентом .content я добавил отступ от левого края margin-right:230px; О том, как сделать отступы я говорил вот в этой статье.

Чтобы увидеть границы наших div блоков я применил атрибут border  и задал значение 1px, solid  — сплошная линия и выбрал цвет черный black.

Также вы наверняка обратили внимание, что у селектора . sidebar я добавил атрибут float:left;  Это обеспечивает «обтекание» других блоков по левому краю. Вот что получилось бы, если мы уберем этот элемент:

Теперь предлагаю вашему вниманию видео урок, где я подробно рассказываю про возможности html div верстки. Смотрите внимательно и просто повторяйте. Ниже можете скачать исходник с нашим примером. Спасибо за внимание!

[sociallocker id=»3259″]Скачать Исходник

Элементы DOM – React

React реализует независимую от браузера систему DOM для повышения производительности и кроссбраузерной совместимости. Это позволило избавиться от некоторых шероховатостей в браузерных реализациях DOM.

В React все свойства и атрибуты DOM (включая обработчики событий) должны быть в стиле camelCase. Например, HTML-атрибут tabindex соответствует атрибуту tabIndex в React. Исключение составляют атрибуты aria-* и data-*, которые следует писать в нижнем регистре. В частности, вы можете оставить aria-label как aria-label.

Различия в атрибутах

Есть ряд атрибутов, которые по-разному работают в React и HTML:

checked

Атрибут checked поддерживается компонентами <input> типа checkbox или radio. Он нужен для того, чтобы узнать выбран ли компонент. Это полезно для создания управляемых компонентов. defaultChecked — это неуправляемый эквивалент, который определяет, выбран ли компонент на момент первого монтирования.

className

Чтобы указать класс CSS, используйте атрибут className. Это относится ко всем обычным элементам DOM и SVG, таким как <div>, <a> и т. д.

Если вы используете React с веб-компонентами (что встречается редко), используйте вместо этого атрибут class.

dangerouslySetInnerHTML

Свойству innerHTML в DOM браузера соответствует dangerouslySetInnerHTML в React. Как правило, вставка HTML из кода рискованна, так как можно случайно подвергнуть ваших пользователей атаке межсайтового скриптинга. Таким образом, вы можете вставить HTML непосредственно из React используя dangerouslySetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это небезопасно. Например:

function createMarkup() {
  return {__html: 'Первый · Второй'};
}
function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

htmlFor

Поскольку for является зарезервированным словом JavaScript, для определения HTML-атрибута for в элементах React вместо него используйте htmlFor.

onChange

Событие onChange ведёт себя ожидаемо: событие срабатывает при изменении поля формы. Мы намеренно не используем существующее поведение браузера, потому что имя onChange плохо передаёт, что происходит на самом деле. Вместо этого, React-реализация onChange опирается на браузерное событие для обработки ввода в реальном времени.

selected

Если вы хотите отметить некоторый пункт списка <option> выделенным, задайте его значение в атрибуте value тега <select>. Изучите «Тег select» для получения подробных инструкций.

style

Примечание

Некоторые примеры в документации используют для удобства style, но использование атрибута style для оформления элементов не рекомендуется. В большинстве случаев для ссылки на классы, определённые во внешнем CSS, следует использовать className. Атрибут style в React чаще всего используется при добавлении динамически вычисляемых стилей во время рендера. Смотрите FAQ: Стилизация и CSS.

Атрибут style принимает JavaScript-объект со свойствами в camelCase вместо CSS-строк. Такой подход повышает эффективность и защищает от XSS. Например:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
  return <div style={divStyle}>Привет, мир!</div>;
}

Обратите внимание, что браузерные префиксы не добавляются к стилям автоматически. Для поддержки старых браузеров необходимо добавить соответствующие свойства стиля:

const divStyle = {
  WebkitTransition: 'all', // обратите внимание на заглавную букву W
  msTransition: 'all' // 'ms' — единственный префикс в нижнем регистре
};
function ComponentWithTransition() {
  return <div style={divStyle}>Это будет работать в разных браузерах</div>;
}

Ключи стилей записываются в camelCase для обеспечения доступа к аналогичным свойствам DOM из JS (например, node.style.backgroundImage). Префиксы браузера кроме ms должны начинаться с заглавной буквы. Вот почему WebkitTransition начинается с заглавной «W».

React автоматически добавит суффикс «px» к свойствам стилей с числовым значением. Если вы хотите использовать единицы измерения, отличные от «px», укажите значение в виде строки с желаемой единицей измерения. Например:

// Результат: '10px'
<div style={{ height: 10 }}>
  Привет, мир!
</div>
// Результат: '10%'
<div style={{ height: '10%' }}>
  Привет, мир!
</div>

Однако не все свойства стилей преобразуются в пиксельные строки. Некоторые из них остаются без единиц (например, zoom, order, flex). Полный список свойств без единиц измерения можно увидеть здесь.

suppressContentEditableWarning

Обычно, когда элемент с потомками помечен как contentEditable, появляется предупреждение, что он не будет работать. Данный атрибут скрывает это предупреждение. Поэтому используйте его, только если вы создаёте похожую на Draft.js библиотеку, которая управляет contentEditable вручную.

suppressHydrationWarning

Если вы используете рендеринг React на стороне сервера и клиент с сервером рендерят разный контент, то как правило, об этом выдаётся предупреждение. Однако в редких случаях очень сложно или невозможно гарантировать точное совпадение. Например, ожидается, что временные метки будут различаться на сервере и на клиенте.

Если для suppressHydrationWarning установлено значение true, React не будет предупреждать вас о несоответствиях в атрибутах и содержимом этого элемента. Он работает только на один уровень глубины и предназначен для использования в качестве запасного решения. Не злоупотребляйте этим. Вы можете прочитать больше о гидратации на странице ReactDOM.hydrateRoot().

value

Атрибут value поддерживается компонентами <input>, <select> и <textarea>. Он устанавливает значение компонента. Это полезно для создания управляемых компонентов. defaultValue — это неуправляемый эквивалент, который устанавливает значение компонента во время первого монтирования.

Поддержка всех HTML-атрибутов

Начиная с React 16, полностью поддерживаются любые стандартные или пользовательские атрибуты DOM.

React всегда предоставлял JavaScript-ориентированный API для DOM. Поскольку компоненты React часто принимают как пользовательские, так и связанные с DOM пропсы, React использует стиль camelCase так же, как DOM API:

<div tabIndex={-1} />      // То же, что и node. tabIndex DOM API
<div className="Button" /> // То же, что и node.className DOM API
<input readOnly={true} />  // То же, что и node.readOnly DOM API

Эти пропсы работают аналогично соответствующим атрибутам HTML, за исключением особых случаев, описанных выше.

Некоторые из атрибутов DOM, поддерживаемые React:

accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap

Кроме того, полностью поддерживаются все SVG-атрибуты:

accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesRequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

Вы также можете использовать пользовательские атрибуты, если они написаны в нижнем регистре.

Расширение шаблона · HonKit

Ещё одной удобной вещью в Django является расширение шаблонов. Что это значит? Ты можешь использовать одни и те же блоки HTML-кода для разных частей своего веб-сайта.

Так тебе не придётся повторяться каждый раз, когда потребуется использовать ту же информацию/структуру. И если появится необходимость что-то изменить, не придётся вносить правки в каждую страницу: достаточно скорректировать шаблон!

Базовый шаблон — это наиболее общая типовая форма страницы, которую ты расширяешь для отдельных случев.

Давай создадим файл base.html в директории blog/templates/blog/:

blog
└───templates
    └───blog
            base.html
            post_list.html

Теперь открой его и скопируй всё из post_list.html в base.html:

blog/templates/blog/base.html

{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn. bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div>
            <h2><a href="/">Django Girls Blog</a></h2>
        </div>
        <div>
            <div>
                <div>
                {% for post in posts %}
                    <div>
                        <div>
                            {{ post.published_date }}
                        </div>
                        <h2><a href="">{{ post.title }}</a></h2>
                        <p>{{ post.text|linebreaksbr }}</p>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </body>
</html>

Затем в файле base. html замени всё между тегами <body> и </body> следующим кодом:

blog/templates/blog/base.html

<body>
    <div>
        <h2><a href="/">Django Girls Blog</a></h2>
    </div>
    <div>
        <div>
            <div>
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>

Мы просто заменили всё между {% for post in posts %}{% endfor %} следующим:

blog/templates/blog/base.html

{% block content %}
{% endblock %}

Что это означает? Ты только что создала block — тег шаблона, позволяющий вставлять HTML-код этого блока в другие шаблоны, расширяющие base.html. Мы покажем, как это сделать, через секунду.

Теперь сохрани всё и открой blog/templates/blog/post_list.html снова. Тебе нужно удалить всё до {% for post in posts %} и после {% endfor %}. В итоге файл будет выглядеть следующим образом:

blog/templates/blog/post_list.html

{% for post in posts %}
    <div>
        <div>
            {{ post.published_date }}
        </div>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

Мы хотим использовать это фрагмент в твоём шаблоне для отображения содержимого. Пора добавить теги блоков в этот файл!

Нам нужно, чтобы новый тег блока соответствовал тегу в файле base.html. Также нам необходимо включить весь код, который соответствует твоему блоку с содержимым. Для этого расположи всё между {% block content %} и {% endblock %}. Вот так:

blog/templates/blog/post_list.html

{% block content %}
    {% for post in posts %}
        <div>
            <div>
                {{ post.published_date }}
            </div>
            <h2><a href="">{{ post. title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}

Осталось последнее: нам нужно связать эти два шаблона друг с другом. Ведь именно для этого и нужно расширение шаблонов! Мы сделаем это, добавив тег extends в начало файла. Вот так:

blog/templates/blog/post_list.html

{% extends 'blog/base.html' %}
{% block content %}
    {% for post in posts %}
        <div>
            <div>
                {{ post.published_date }}
            </div>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}

Готово! Проверь, что твой веб-сайт работает нормально 🙂

Если появилась ошибка TemplateDoesNotExists, это значит, что нет файла blog/base.html и runserver запущен в командной строке. Попробуй остановить его (одновременно нажми Ctrl + C) и перезапусти веб-сервер командой python manage.py runserver.

Блочные элементы — HTML: язык гипертекстовой разметки

В этой статье мы рассмотрим блочные элементы HTML и их отличия от встроенных элементов.

Элементы HTML ( Язык разметки гипертекста ) исторически классифицировались как элементы «блочного уровня» или элементы «встроенного уровня». Поскольку это презентационная характеристика, в настоящее время она определяется CSS в Flow Layout. Элемент уровня блока занимает все горизонтальное пространство своего родительского элемента (контейнера) и вертикальное пространство, равное высоте его содержимого, тем самым создавая «блок».

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

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

Следующий пример демонстрирует влияние блочного элемента:

HTML

 

  Этот абзац является элементом уровня блока; его фон был окрашен в
  отображать родительский элемент абзаца.

 

CSS

 р {
  цвет фона: #8abb55;
}
 

• Элементы уровня блока могут появляться только внутри элемента .

Существует несколько ключевых различий между блочными элементами и встроенными элементами:

Модель содержимого

Как правило, блочные элементы могут содержать встроенные элементы и (иногда) другие блочные элементы. Неотъемлемой частью этого структурного различия является идея о том, что блочные элементы создают «более крупные» структуры, чем встроенные элементы.

Форматирование по умолчанию

По умолчанию блочные элементы начинаются с новой строки, но встроенные элементы могут начинаться в любом месте строки.

Различие блочных и встроенных элементов использовалось в спецификациях HTML до версии 4. 01. Позже это бинарное различие заменяется более сложным набором категорий контента. В то время как «встроенная» категория примерно соответствует категории фразового контента, категория «блочного уровня» напрямую не соответствует какой-либо категории HTML-контента, но «блочные» и «встроенные» элементы, объединенные вместе , соответствуют потоковому содержимому в HTML. Существуют также дополнительные категории, например. интерактивный контент.

Ниже приведен полный список всех HTML-элементов «блочного уровня» (хотя термин «блочный уровень» технически не определен для новых элементов HTML5).

<адрес>

Контактная информация.

<артикул>

Содержание статьи.

<в сторону>

Дополнительное содержимое.

<цитата>

Длинная («блочная») котировка.

<детали>

Виджет раскрытия информации.

<диалог>

Диалоговое окно.

<дд>

Описывает термин в списке описаний.

<дел>

Отдел документов.

<дл>

Список описаний.

<дт>

Термин списка описания.

<набор полей>

Метка набора полей.

Подпись к рисунку.

<рисунок>

Группирует мультимедийный контент с заголовком (см.

Нижний колонтитул раздела или страницы.

<форма>

Форма ввода.

,

,

,

,

,

Уровни заголовков 1-6.

Заголовок раздела или страницы.

Информация заголовка группы.

<час>

Горизонтальная линейка (разделительная линия).

Элемент списка.

<основной>

Содержит центральное содержимое, уникальное для этого документа.

<навигация>

Содержит навигационные ссылки.

<ол>

Упорядоченный список.

Параграф.

<пред>

Предварительно отформатированный текст.

<раздел>

Раздел веб-страницы.

<таблица>

Таблица.

<ул>

Ненумерованный список.

• Линейные элементы
• дисплей
• Блочная и встроенная компоновка в обычном потоке

Последнее изменение: 14 сентября 2022 г. , участниками MDN

Блочные, встроенные и организационные элементы

Урок 7: Блочные, встроенные и организационные элементы

/en/basic-html/interactive-elements-in-html/content/

Блочные, Встроенные и организационные элементы

Этот урок является частью серии по  компьютерному программированию . Вы можете перейти к Введение в программирование , если хотите начать с самого начала.

Когда вы загружаете веб-страницу в браузере, все HTML-элементы на странице имеют по умолчанию 9 способов.0005 визуально организуют себя . Например, 

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

Элементы блочного уровня

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

• по

1119927