[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-html-chem-otlichaetsya-div-ot-span":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":18,"progress":19,"seo":20},1239,"chem-otlichaetsya-div-ot-span",39,"osnovy-html","Основы HTML","📄","Чем отличается div от span","`\u003Cdiv>` — это блочный элемент, а `\u003Cspan>` — строчный. Блочный элемент занимает всю доступную ширину и начинается с новой строки, строчный — занимает только ширину своего содержимого и не разрывает строку.\n\n> Аналогия из жизни: `\u003Cdiv>` — это коробка, которая всегда ставится на отдельную полку. `\u003Cspan>` — это наклейка, которую можно приклеить прямо на слово в тексте, не нарушая строку.\n\n### Сравнение\n\n| Критерий | `\u003Cdiv>` | `\u003Cspan>` |\n|----------|---------|----------|\n| Тип элемента | Блочный (block) | Строчный (inline) |\n| Поведение | Начинается с новой строки, занимает всю ширину | Остаётся в потоке текста |\n| Вложенность | Может содержать блочные и строчные элементы | Только строчные элементы |\n| Типичное применение | Обёртка для секций, групп элементов | Выделение части текста |\n| width\u002Fheight | Работают | Не работают (нужен `display: inline-block`) |\n\n### Пример\n\n```html\n\u003Cdiv style=\"background: lightblue;\">\n    Этот блок занимает всю ширину.\n    \u003Cspan style=\"color: red;\">А это выделенное слово\u003C\u002Fspan> внутри текста.\n\u003C\u002Fdiv>\n\u003Cdiv style=\"background: lightyellow;\">\n    Этот блок начинается с новой строки.\n\u003C\u002Fdiv>\n```\n\n### Семантическая замена\n\nВ HTML5 вместо универсального `\u003Cdiv>` рекомендуется использовать семантические теги (`\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Carticle>`, `\u003Csection>`, `\u003Cfooter>`), когда содержимое имеет смысловую нагрузку. `\u003Cdiv>` остаётся для случаев, когда нужна обёртка без семантики.\n\n> **На собеседовании:** ключевое отличие — `\u003Cdiv>` блочный (новая строка, вся ширина), `\u003Cspan>` строчный (внутри текста). Согласно спецификации, строчный элемент не может содержать блочные. В HTML5 лучше использовать семантические теги вместо `\u003Cdiv>` где это возможно.","","junior",[15,16,17],"основы","html","frontend",[],null,{"title":21,"description":22,"ogTitle":21,"ogDescription":23,"keywords":24,"schemaAnswer":33,"featuredSnippetReady":34},"Чем отличается div от span — Gymterview","Отличия div от span в HTML: блочный vs строчный элемент, поведение, вложенность, применение. Когда использовать div, а когда span. Семантические замены в HTML5.","div — блочный элемент (новая строка, вся ширина), span — строчный (внутри текста). Сравнение, примеры, семантические замены.",[25,26,27,28,29,30,31,32],"div","span","блочный элемент","строчный элемент","block","inline","HTML","собеседование","\u003Cdiv> — блочный элемент, занимает всю ширину и начинается с новой строки. \u003Cspan> — строчный, остаётся в потоке текста. div используется для обёртки секций, span — для выделения части текста. Строчный элемент не может содержать блочные. В HTML5 рекомендуются семантические теги вместо div.",true]