version 18.02.2022

Вёрстка веб-страниц

отраслевой стандарт html.spec.whatwg.org

Пример разметки без семантики

<html> <head> <body> <div> Я ЗАГОЛОВОК! </div> <div> Я псевдо-параграф со <span>строчным</span> текстом и <a href="/">ссылкой</a>! </div> </body> </html>

Логика разметки, обзор вопросов семантики кода (HTML) html5

Принципиальные типы контейнеров и элементов (тэгов)HTML:

Неназначенный контейнер, не изменяющий содержимое: Блок, часть строки, анонимный бокс¹
семантический раздел{секция}: Основные контейнеры страниц, несущие иерархические задачи; Базовые контейнеры для структуризации контента, способны наполниться любым содержимым, без влияния на него
группа-структура{строгие}: Базовые контейнеры для группировки любых элементов; Базовые контейнеры для группировки определённых элементов {Элемент группы}
контейнер, изменяющий {содержимое}{вид}: Контейнеры, служащие для изменения и обработки содержимого; Контейнер, изменяющий другое содержимое
контейнер{анонимный}: Контейнер, содержащий определённо ожидаемое содержимое, не имеющий потомков
элемент{объект-символ}: как правило символ или пустой элемент для взаимодействия между элементами

Неназначенные

<div> <span> анонимный бокс¹ Prim ¹

раздел{секция}

Основные doctype - указание стандарта HTML <html> <head> - профиль, декларация документа и информация о нём <body> Базовые <header> - верхний колонтитул <main> - содержимое <footer> - нижний колонтитул Структурные PARENT [ <aside> <nav> <section> <article> <address> ]

группа-структура

{содержит любые элементы} <figure>{<figcaption>} {строго ожидаемые} <head> {<base/> <meta/> <title> <link/> </style>} <svg>² [Таблицы] <table>: {<caption> <colgroup>{<col>} <thead>{<tr>{<th>}} <tdbody><tfoot>{<tr>{<td>}}} [Интерактив] <details>{<summary>} [Текстовые] <p> - только inline <pre> <hgroup*>{<H1>-<H6>} <menu*>{<menuitem*><a><button>} <ruby>{<rbc><rtc>{<rb><rp><rt>}} <dl>{<dt><dd>} <ol><ul><dir*>{<li>} [Формы] <form>{ <fieldset>{<legend>} <label> <textarea> <input/> <output> <button> <keygen/*> <select>{<optgroup>{<option>}} <input/>+<datalist>{<option>} <meter> <progress> } Prim *
Prim ²

Контейнер изменяющий

{своё содержимое} [Веб-компоненты³] все [Скрипты] <canvas> [Текстовые] <bdi><bdo> [Формы] <meter> <progress> [Обособленные контейнеры] <applet> <embed> <iframe> <object> {изменяющий другое содержимое} [Веб-компоненты] все [Скрипты] </script> {вид} [Текстовые] <H1>-<H6> <address> <cite> <q> <pre> <dfn> <a>|<button> <abbr> <mark> <small> <ins> <tt*> <b><em><i><s><small><strong><sub><sup><u> <code> <xmp*> <data> <kbd> <samp> <var> [Формы] <fieldset> <textarea> <input/> <button> <select><datalist> Prim *
Prim ³

ожидаемое содержимое

[Текстовые] <time> [Медиа] все

пустой элемент, символ

Массив emptyTags = [area, base, br, col, command, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr] [Визуально блочная модель] <br/> <hr/> <img/> <input/> <wbr/>() [Скрытый] <!doctype/>  <area/> <base/> <col/> <embed/> <keygen/*> <link/> <meta/> <param/> <source/> <track/> [Символ]    © | © и т.д. Prim *

функциональные элементы

[Группировка: <figure>{<figcaption>} <form> <table> ] [Текстовые: <H1>-<H6> <p> <address> <blockquote> <cite> <q> <pre> <dfn> <bdi><bdo> <br/> <wbr/>() | <b><em><i><s><small><strong><sub><sup><u> <a>|<button> <abbr> <mark> <small> <time> <ins> <tt*> | <code> <xmp*> <data> <kbd> <samp> <var> <menu*> <dl>{<dt><dd>} <ol><ul><dir*>{<li>} <ruby>{<rbc><rtc>{<rb><rp><rt>}} ] [Формы: <form>{<fieldset>{<legend>} <label> <textarea> <input/> <output> <button> <keygen/*> <select>{<optgroup>{<option>}} <datalist>(<input/>+<datalist>{<option> ..}) <meter> <progress>} ] [Интерактив: <details>{<summary>} <dialog> <menu*>{<menuitem*>}] [Веб-компоненты: <content*><shadow*><element*> <template>{<slot>}] [Медиа: <img/>{<map>{<area/>}} <audio><video>{<source/><track/>}<picture>{<source/><img/>} <svg*>] [Скрипты: <canvas> </script>{<noscript*>}] [Обособленные контейнеры (импорт объектов): <applet> <embed>{<noembed*>} <iframe> <frameset*>{<frame*>} <object>{<param/>}] Prim *

Стандартныe шаблоны страниц

Layout cover (uses centred)

Layout landing

Layout Doc (uses aside)

Общие вопросы

Семантика кода HTML не заостряет внимания на блочности элементов, если дело не касается вопросов наследования.

Блочность Блочный контекст форматирования

Блочная модель {display: type;} определяет тип отображения, генерирующий основные качества блоков: внешний контроль (поведение в потоке, с соседями), внутренний (поведение потомков) и смеси этих качеств. Тест блочной модели

Строчные элементы (встроенные, генерируют внутристрочные контейнеры) {display: inline | inline-table}:<a> <abbr> <acronym> <area/> <b> <bdi> <bdo> <big> <cite> <code> <data> <dfn> <del> <em> <i> <ins> <kbd> <label> <map> <mark> <noscript> <output> <picture> <s> <samp> </script> <slot> <small> <span> <strong> <sub> <sup> <svg> <time> <template> <tt*> <q> <ruby> <u> <var> <wbr> Prim *

Строчно-блочные элементы (генерируют настоящие блочные контейнеры, но ограничены по ширине контентом и не вызывают разрыв строки) {display: inline-block}, по спеке w3: <input> <select>; по реальному поведению {inline-block}: <button> <img/> <keygen> <meter> <progress> <textarea>; "под подозрением", с генерацией {inline-block} в зависимости от браузера, doctype и т.п.: <audio> <canvas> <embed> <iframe> <object> <video>

Исключения: <br/> - относится к строчным, геренирует перевод строки, т.е. по факту создаёт пустой блок; <datalist> - изначально скрытый, позиционированный, по поведению блочно-строчный контейнер.

Все незарегистрированные тэги, например, введённые разработчиком самостоятельно, типа: <wrap>, являются строчными.

Все остальные зарегистрированные тэги - блочные (обычно вызывают разрыв строки): <address> <article> <aside> <blockquote> <details> <dialog> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <hgroup> <hr> <li> <main> <nav> <ol> <p> <pre> <section> <ul>

Исключения: <table> - элемент генерирует блок во всю ширину родителя, занимая в нём позицию строчно-блочного элемента {display: inline-block}, поведение как у {display: block;width: max-content;}

Вложенность

Вы не можете помещать блочные элементы внутри строчных (встроенных) элементов.

Исключения: <p> - не смотря на свою блочность, тэг P не должен содержать внутри себя другой элемент P, а также любой другой блочный элемент.

<a> - в тег A можно вставлять любые блочные элементы любой блочности, при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки

Примечания

* - проблемы спецификаций или поддержки браузерами

<тэг/> - пустой элемент, не требующий закрывающего тэга
Дополнение. Ряд тэгов, тебующих закрывающего тэга, закрываются автоматически, встречая следующий блочный тэг, некоторые закрываются автоматически без соседства со следующим, список: <html>, <head>, <body>, <li>, <dt>, <dd>, <p>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <rt>, <rp>, <optgroup>, <option> Рекомендовано взять за правило такие тэги закрывать!

¹ - "Aнонимный бокс" - дополнительная обёртка, генерируемая алгоритмом визуального форматирования для содержимого блока, разорванного др.блоком, этот бокс не связан ни с одним элементом и не имеет названия, CSS-стили невозможны, только наследуемые свойства, косвенно, через родителя. Обзор (Спеки: блок | строка | таблица)

² - <svg>{<svg> <use>^ie <defs> <foreignObject> <g> <элементы>}; <?xml/> <?xml-stylesheet/>{<svg>} автономность SVG используя XML

³ - Web_Components

Хак оступов `inline-block`

Лишние отступы inline-block (inline): При линейной группировке элементов display: inline-block (inline) появляются лишние отступы, например, 3 потомка с шириной 33.333% не входят в 100% ширины родителя.; Использовать свойство display: float; для таких элементов.

Хак псевдо-таблицы на основе свойства `.table-cell`

234567
890

234567
890

234567
890

234567
890

234567
890

Bootstrap Page Layout pattern

Task

BootstrapLayout

Оптимальная сетка шаблона веб-страницы


<html class="[global]">
<head>
	bootstrap.css
	bootstrap-fix.css
	fix-ie.css
</head>
<body class="[global] [body]">
    <section class="[global] [pagewrap]">
        
        <nav role="navigation" class="navbar"></nav>

        <main role="main" class="[global] [main]">

            <section class="container"></section>

        </main>

        <footer class="footer"></footer>
    </section>
  bootstrap.js
</body>
</html>

bootstrap-fix.css
глобальные стили, 
global [
h-100
h-auto h-md-100
]

Коробка для выравнивания элементов страницы,
pagewrap [
default: "d-flex flex-column justify-content-between",
widthContent: "mx-auto container"
]

header | nav
main [
default: "heightCover-widthFull",
heightMinTop: "mb-auto",
heightMinBottom: "mt-auto",
heightFull: "h-auto h-md-100",
heightFullWidthBetween: "h-auto h-md-100 d-flex flex-column justify-content-between",
heightFullWidthEvenly: "h-auto h-md-100 d-flex flex-column justify-content-evenly",
fullCover: "d-flex justify-content-center"
]

footer

CSS justify-content crossbrowsers

footer left footer right

Solution

v.09.2019

Card Title

test

btn_linktext