Основные концепции HTML и CSS: DOM, теги, группы элементов
В современном вебе существует ряд концепций, которые нужно знать и понимать. Рассмотрим некоторые из них.
DOM или DOM-дерево (Document Object Model)
Когда браузер считывает ваш документ, он создаёт его объектную модель. Существуют несколько терминов используемых в разговорах о структурах.
Элементы, внутри которых лежат другие элементы, называются родителями этих элементов. В свою очередь, элементы внутри родителей называются их детьми.
Элементы, стоящие на одном уровне в иерархии, называются сестринскими.
Семантика
Мы используем очень много разных тегов, хотя можем ограничиться всего восьмью. Это обусловлено несколькими вещами.
Во-первых, мы пишем код для людей. Используя больше метафор мы сообщаем больше информации тому, кто читает код.
Во-вторых, мы пишем код для машин. Мы должны писать такой код, который будет понятен машине, например браузеру пользователя и поисковику.
Вот что пишет об этом сообщество W3C: Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.
These definitions allow HTML processors, such as Web browsers or search engines, to present and use documents and applications in a wide variety of contexts that the author might not have considered. — EXISTING_LINK_0_1761842164953_mn6×854rb
Элементы HTML и группы элементов
Как известно, самая большая проблема в программировании — это именование. В HTML и CSS мы тоже с ней сталкиваемся, но во многом нам помогает спецификация.
Элементы представляют из себя контент разного типа, осуществляют разную функциональность.
Metadata content
base, link, meta, noscript, script, style, template, title
Flow content
a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr
Sectioning content
article, aside, nav, section
Heading content
h1, h2, h3, h4, h5, h6
Phrasing content
a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr
Embedded content
audio, canvas, embed, iframe, img, math, object, svg, video
Interactive content
a, audio, button, embed, iframe, img, input, keygen, label, object, select, textarea
Структурные группы элементов
Элементы, кроме того, что они представляют собой какой-то вид контента, также принадлежат к структурообразующим группам.
The root element
html
Document metadata
head, title, base, link, meta, style
Sections
body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address
Grouping content
p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main
Text-level semantics
a, em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rb, rt, rtc, rp, bdi, bdo, span, br, wbr
Edits
ins, del
Embedded content
img, iframe, embed, object, param, video, audio, source, track, map, area, svg
Links
a, area, link
Tabular data
table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
Forms
form, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter, fieldset, legend
Scripting
script, noscript, template, canvas
Box-model
Каждый элемент — это коробочка с информацией. И у каждого элемента есть свойства отвечающие за его размер и отступы.
margin (составное свойство)
Внешний отступ
border (составное свойство)
Обводка, контур (аналог Stroke в Illustrator и Figma)
padding (составное свойство)
Внутренний отступ
width
Ширина
min-width, max-width
Минимальная/максимальная ширина до которой может сжиматься/растягиваться элемент
height
Высота
min-height, max-height
Минимальная высота до которой может сжиматься элемент
