Для чего был сделаны исключения в элементах?

Question

[Andre1997]

Читая книжку и немного удивляюсь
Есть тег p
Прочел, что он блочный
Для чего его сделали блочным, а не строчным?
По логике, если в элементе текст, то он должен быть строчным.

Для чего сделали разновидность строчно-блочных?
Ведь мы можем так же присвоить элементу p нужные стили и он нам заменить тот же button

И для чего сделали тег a строчным элементом, если он по факту выходит уже больше строчно-блочным, где мы можем хранить текст или другие блоки. И это единственный элемент, который подходит под описание строчно-блочный. Для чего input сделали таким, если он по факту строчный, а video блочный.

А сам тег img и picture какие?

Comments

[Ankhena]

Тег <p> в HTML это не текст и не параграф в обычном бытовом понимании этого слова.
Это контейнер для фразового содержания.

Дальше вам поможет спецификация the-p-element и paragraph

Ведь мы можем так же присвоить элементу p нужные стили и он нам заменить тот же button

Да, стилизовать можем.
И даже можем написать JS, который будет что-то делать при клике на этот p.
Но кнопкой он от этого не станет.

У тегов есть свое назначение (семантика). Ведь совсем не все видят страницу глазами. Есть читалки, есть различные роботы, есть управление с клавиатуры и т.д. Чтобы все понимали, что происходит, имеет смысл использовать теги по назначению. Вашим коллегам, кстати, тоже будет легче разбираться в чужом коде.
Иначе можно было бы всё сверстать div'ами, обвешать JS'ом и дело с концом.

Для чего сделали разновидность строчно-блочных?

Блочные начинаются с новой строки и имеют отступы и размеры.
Инлайновые - идут в строку и не имеют размеров и вертикальных отступов (вертикальные padding имеют, но они работают не так, как вам бы, скорее всего, хотелось).
Что делать, например, если нужно, чтобы элемент был внутри строки и имел размеры?

И для чего сделали тег a строчным элементом, если он по факту выходит уже больше строчно-блочным, где мы можем хранить текст или другие блоки.

Внутрь ссылки можно вставить любой элемент, который можно вставить в его родителя. Ссылки имеют прозрачную контентную модель.
Но изначально, по умолчанию: ссылка это ссылка в тексте. Посмотрите на второй абзац моего комментария. Просто текст и в нем просто ссылка. Будет странно, если текст прервется, ссылка окажется на новой строке и после неё, опять с новой строки пойдет текст.

А сам тег img и picture какие?

Создайте страницу, сделайте разметку, откройте инструменты разработчика в браузере на вкладке Computed и изучите самостоятельно. Если что, для некоторых тегов в разных браузерах может оказаться разный результат.

Answer 1

[Stalker_RED]

Возможно в этом учебнике также написано, что тег <p> - это сокращенно paragraph, и он не может быть строчным, соответственно. Если не написано, то возможно учебник слабоват. Посмотрите в оглавлении, есть ли там что-нибудь про html семантику. Например про то, что button - элемент формы, и особым образом обрабатывается браузерами.

Вообще да, с применением скриптов и стилей можно большую часть тегов сэмулировать на основе других тегов. Можно пойти дальше, и свой браузер написать. В конце концов в современном хроме можно запустить виртуальную машину со свой OS (тыц), внутри которой можно запустить еще один браузер. Осталось только выяснить зачем это все делать и кто будет платить зарплату за то, что вы изобретаете какие-то альтернативные теги вместо того, чтобы пользоваться стандартными, которые умеет большинство браузеров.

Что такое строчно-блочный - непонятно. Вы про inline block?

Answer 2

[Вадим]

Блочно-строчная концепция уже не так важна, как раньше.
Контентная модель документа притерпела значительные изменения в современном стандарте.
https://html5book.ru/kontentnaya-model-html5/
https://html.spec.whatwg.org/dev/dom.html#content-...

Есть тег p Прочел, что он блочный. Для чего его сделали блочным, а не строчным? По логике, если в элементе текст, то он должен быть строчным.

Верно. Но это не просто текст. Это абцаз текста. Таким образом, абцаз семантически несколько больший юнит, чем просто текст. Абцаз подразумевает, что начинается с новой строки до следующего абзаца. Вот и блочный.

Ведь мы можем так же присвоить элементу p нужные стили и он нам заменить тот же button

Если хотите добиться уважения среди профессионалов, то забудьте про подобные утверждения.
https://www.youtube.com/watch?v=ssJsjGZE2sc
https://www.youtube.com/watch?v=MWJKwn_gKR4
А так же тема для изучения: семантическая разметка (например: https://habr.com/ru/company/htmlacademy/blog/546500/)

И для чего сделали тег a строчным элементом... где мы можем хранить текст или другие блоки.

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

теги img, imput, video - замещаемые элементы

Читая книжку и немного удивляюсь

Думаю стоит всё же задавать вопросы когда дочитаете до конца, особенно если потом ещё пойдёте на спец ресурсы, типа MDN, и ознакомитесь с современной информацией. Уверен найдёте ответ на большую часть своих вопросов.