HTML-теги div и span являются наиболее популярными элементами, из которых буквально соткано большинство существующих интернет-сайтов. Оба этих элемента являются простыми и удобными контейнерами для хранения любой произвольной информации - текстов, картинок или других, вложенных HTML-элементов. При этом, оба эти элемента хотя и выполняют одинаковые концептуальные функции (представление информации), тем не менее имеют между собой значительные различия. С точки зрения веб программирования, важно понимать различия между ними и особенности отображения внутри браузера. Вот эти нюансы сегодня мы и обсудим.
Для начала приведём интереснейшую инфографику о том, как часто различные HTML элементы используются при программировании веб-сайтов. Эта инфографика создана на основе анализа 8 миллионов сайтов. Данные взяты вот отсюда, и актуальны на 2016 год. На сегодняшний день, как это видится нашей редакции, данные изменились не столь принципиально - и в целом могут расцениваться как актуальные.
Если не брать в расчёт обязательные теги head, html, body, а так же title, meta и другие теги-невидимки, то первое место в мире веб-программирования занимает HTML-тег <div> с уверенными 89% использования. Иными словами, 9 из 10 сайтов используют этот тег. Чуть отстаёт от него тег <span> с 75% популярности. И где-то между ними обитает тег <p> с 81% рейтинга. И хотя тег <p> является более популярным, для канонического сравнения строчной и блочной верстки, сегодня будем сравнивать именно классические теги <div> и <span>.
Интереса ради, ты можешь зайти на любой популярный веб-сайт и просто изучить его исходный код. После такого исследования, ты, вероятно, увидишь множество тегов <div> и <span>, и совсем немного тегов типа <p>. Понимание различий между этими двумя HTML-элементами может оказаться на первый взгляд трудным, из-за их сходства. Однако важно понимать различные цели и концептуальный контраст между ними, чтобы в полной мере освоить искусство кодирования на прекрасном языке HTML.
Веб-программирование. Строчность и блочность 📦
Элементы span и div – наиболее популярные HTML-теги в языке разметки HTML, предназначенные для хранения и отображения любой информации. Хотя эти элементы и похожи друг на друга, у них совершенно разные цели и механизмы отображения на странице. Для начала давай пройдемся по каждому элементу отдельно, чтобы полностью понять их сходства и различия.
Для того чтобы понять отличия в тегах - в первую очередь, нужно понять разницу между "блоком" и "строкой". Это два принципиально разных механизма отображения информации в языке HTML. Блоком называется прямоугольник, занимающий полную ширину страницы, и имеющий произвольную высоту (а если более точно - высота элемента зависит от содержимого элемента). Если расположить внутри HTML-кода два произвольных блочных тега один за другим - то они расположатся на странице друг за другом, последовательно. Каждый из блоков займет полную ширину страницы.
Совсем иным образом дела обстоят со строчными элементами. Как ты наверное уже догадался, в отличие от блоков, строки располагаются последовательно друг за другом. Ширина и высота строки зависит целиком и полностью от её содержимого. Если расположить внутри HTML-кода две строки, то они последовательно встанут друг за другом (в строку). Если какая-то из строк дойдет до конца ширины документа, то она будет автоматически перенесена на следующую строку, а разделителем переноса скорее всего послужит пробел.
Сочетание блочного и строчного способов отображения информации составляет из себя основу HTML-вёрстки. Там где нужно отобразить жестко фиксированные элементы (картинки, формы ввода, видео, таблицы) - используется блочный подход. Там же, где нужно отобразить текстовую информацию, или что-то что должно быть организовано как строка - используется строчный подход.
HTML-элемент div - блочная вёрстка
Элемент div (division) — это универсальный элемент блочного уровня. Чаще всего он используется для разделения содержимого страницы на более мелкие части или разделы. <div> представляет собой классический блок, который начинает новую строку и занимает всю ширину страницы или её родительского контейнера. И точно так же, как кирпичный дом строится из кирпичей (спасибо капитан очевидность), структура веб-страниц строится из блоков типа <div>.
Как не странно, элементы div часто используются для группировки нескольких абзацев, изображений, заголовков и ссылок. Это позволяет упростить идентификацию и стилизацию различных разделов веб-страницы с помощью CSS. Например, элемент div может включать в себя статью из трёх абзацев, а другой элемент div может включать в себя навигационное меню со ссылками.
<div id=“абзацы”>
<p>Это мой первый абзац.</p>
<p>Это мой второй абзац.</p>
<p>Это мой последний абзац.</p>
</div>
С точки зрения поисковых систем, элемент <div> является безликим блоком универсального характера. То есть - банальный строительный кирпич, один из многих. Эти элементы рекомендуется использовать для создания структуры страницы. Но их не рекомендуется использовать для отображения текстов - таких как параграфы, абзацы или разделы статьи. Для этого больше подходят строчные элементы.
HTML-элемент span - строчная вёрстка
Элемент span представляет противоположную концепцию к блочной вёрстке. Этоn тег - классический представитель строчной вёрстки. То есть, это обычный встроенный элемент, представляющий из себя последовательную строку или часть строки. Он не создает новый блок, а занимает только пространство, необходимое для отображения своего содержимого. Теги span используются для небольших частей текста, ссылок, изображений и других элементов HTML, отображаемых в окружающем контенте. Базовый пример элемента span в HTML выглядит примерно таким образом:
<p>Это абзац с <span id=“special-text”>a little something extra</span> inside it.</p>
С точки зрения поисковых систем, строчные теги предназначены для хранения конкретной текстовой информации - а именно параграфов, абзацев, статей и тому подобных данных. <span> не является единственным строчным элементом - есть и много других специфических тегов, например тег <p> - параграф. И если ты хочешь хорошенько прокачать свою страницу качественной вёрсткой - проследи за тем, чтобы текстовая информация была обёрнута именно в строчные теги - например <p>, <span>, <i>, <b>, <a> и так далее.
Подводя промежуточный итог, можно сказать что тег div генерирует элемент уровня блока, тогда как тег <span> включает в себя встроенный строковый элемент. Несмотря на различия, оба тега широко используются для группировки схожих элементов с целью структурирования или декоративных целей.
История появления тега <div> 🟦
Теги <div> и <span> имеют долгую историю, поскольку они предоставляют гибкие и универсальные контейнеры для организации и стилизации контента в HTML. Можно сказать больше - оба этих тега являются прародителями, и фундаментальными столпами современного интернета в его привычном представлении. Простота и универсальность сделали их незаменимыми для структурирования контента и управления вниманием, позволяя веб-разработчикам создавать сложные макеты и применять целевые стили к различным элементам.
Когда появился тег div?
Элемент <div> был впервые стандартизирован в HTML 3.2. Некоторые считают, что этот тег был предложен в версии HTML 2.0, но это не так. Вот ссылка на документацию HTML в версии 2.0, и тег <div> в ней отсутствует. Зато вот в этом документе его уже можно найти, и это спецификация HTML в версии 3.2. Тег <div> изначально был разработан как контейнер для группировки и организации других элементов HTML. Благодаря своей гибкой природе элемент div быстро стал популярным для структурирования веб-страниц.
Элемент div, сокращение от «division» ("раздел", "секция"), является фундаментальным строительным блоком HTML. Он был представлен в ранних версиях HTML и сыграл решающую роль в веб-разработке. Где-то в исторической ленте хронологии тег <div> имел значительную конкуренцию с тегом <table>, но в итоге занял доминирующее положение, и полюбился большинству практикующих веб-мастеров.
Что было до тега div?
До появления элемента div, веб-разработчики использовали таблицы для создания структуры веб-страниц. Однако использование таблиц для разметки было не слишком удобным, и не слишком семантически корректным. Повсеместное использование таблиц приводило к созданию сложного и не гибкого кода. Элемент div представляет же собой более лучшую альтернативу, отделяя контент от представления.
Более того, элемент div стал основой для методов макетирования CSS, таких как плавающие элементы, позиционирование и системы сеток. Это позволило разработчикам создавать сложные и адаптивные проекты, манипулируя элементами div с помощью свойств CSS.
Что было после тега div? // Стандарты HTML5
С появлением HTML5 были введены дополнительные семантические блочные элементы. Они разбавили доминирование тега <div>, и добавили больше разнообразия в творчество веб-мастеров. Вот некоторые теги, которые привнёс в профессию этот стандарт:
- <header> - блочный заголовок страницы
- <nav> - блочная навигация (меню) на странице
- <section> - блочная секция внутри страницы
- <article> - блочный набор текстов или статья внутри страницы
- <main> - главный элемент, основное содержимое веб-страницы
Появление новых удобных тегов, уменьшило необходимость чрезмерного использования элементов div. Эти новые элементы придали структуре веб-страницы больше семантического значения.
Тем не менее, элемент div по-прежнему широко используется и сегодня. А если быть более точным - то он доминирует в разработке любых веб-проектов. Он по-прежнему остается незаменимым инструментом для веб-разработчиков, позволяющим им создавать хорошо структурированные и организованные веб-страницы. Его историческое значение заключается в том, что он произвел революцию в веб-верстке и открыл эпоху блочной веб-разработки - эпоху понятных сайтов, сконструированных предсказуемым образом.
История появления тега <span> 📝
Элемент span — это HTML-тег, который был представлен в HTML 4.01 в 1999 году. Вот ссылка на стандарт и формальное описание тега <span> того времени. Он был разработан, чтобы обеспечить возможность группировки и стилизации встроенных строчных элементов без добавления семантического значения. Основная цель этого элемента – применить стили или имена классов к определенным разделам текста в более крупном блоке контента. Он действует как контейнер, не имеющий никакого значения или поведения.
Опять же, span предназначен именно для отображения строк (текстов). Всевозможные статьи, тексты, параграфы, посты в социальных сетях - всё это по большей части представлено через тег <span> (или тег <p>, в зависимости от сайта и вебмастера).
Эра каскадных таблиц CSS
С появлением каскадных таблиц стилей (CSS) элемент <span> приобрел еще большее значение. Назначая имена классов или встроенные стили для охвата элементов, разработчики могли нацеливаться на определенные разделы текста и изменять их, например, меняя цвет, размер шрифта или фон. Этот уровень детального контроля над стилем текста произвел революцию в веб-дизайне.
Прошло время, и элемент span стал неотъемлемой частью различных веб-технологий и фреймворков. Он широко используется в сочетании с CSS, JavaScript и другими платформами для создания динамических и интерактивных веб-интерфейсов.
Когда использовать span или div? 🔎
Как мы уже поняли, элементы div и span полезны для проектирования и организации веб-страниц. Применение атрибутов id или class к этим элементам позволяет легко настраивать их внешний вид с помощью правил CSS. Обычно ты увидишь теги span, используемые для стилизации встроенного содержимого, например отдельных слов в текстовой строке.
Альтернативно, теги div служат для применения стилей к обширным частям контента или функционируют в качестве родительского элемента для подчинённых компонентов. На более сложных веб-страницах элементы div обычно вложены для отображения отдельных разделов и субрегионов страницы. Более же глобальными тегами являются такие блоки как <main>, <section>, <article>, <footer> и подобные им.
Учитывая удобства элементов span и div, появляется маленький соблазн использовать каждый из этих тегов для каждого нового элемента страницы. Например, используя тег <div> вместо тега <p>. Однако желательно подумать дважды, прежде чем сделать это. Но универсальное правило звучит таким образом - если тебе надо отобразить текст, используй <span> или <p>. Если тебе надо отобразить блок - используй <div>.
Интересно, но почему?
Поскольку теги <div> и <span>, являются «общими» элементами, каждый из них лишён ясности с точки зрения содержания и назначения. Хотя они могут содержать разные вещи, сами теги не указывают на предполагаемое использование или содержимое внутри. По-умолчанию, эти теги не являются понятными с точки зрения поисковых систем, и не несет конкретики относительно своего содержимого.
Семантические же элементы, являются противоположностью универсальных элементов, поскольку в них используются теги, передающие значение элемента. Общие примеры семантических элементов HTML включают:
- <p> - специальный строчный тег для отображения строчных текстовых параграфов большого размера.
- <h1> до <h6> - "блочные" элементы, но относящиеся к структуризации текста. Заголовки перед параграфами или статьями.
- <a> - ссылки на другие страницы. Строчные элементы.
Семантические элементы упрощают интерпретацию твоей веб-страницы для сканеров поисковых систем, программ чтения с экрана и веб-разработчиков. Кроме того, они предлагают более чистую альтернативу запутанным тегам <div> и <span>.
Прежде чем использовать div или span для разделения страницы, подумай, доступен ли подходящий семантический элемент HTML. HTML5 предлагает альтернативные элементы div на уровне блоков, которые были указаны выше, такие как <header>, <footer>, <nav> и <main> для разных разделов страницы. Кроме того, существуют семантические встроенные элементы <strong>, <em>, <code> и <q> для стилизации текста.
Элементы <div> и <span> - основа современного интернета и веб программирования 👨💻
<div> и <span> являются наиболее популярными элементами HTML, и совершенно не зря. Благодаря ним можно решить проблему вёрстки любых страниц - умело сочетая строчный и блочный подход к отображению информации. Эти элементы составляют современный интернет, и их можно найти практически в любом интернет-сайте, начиная от развлекательных порталов и социальных сетей, и заканчивая крупными поисковыми системами.
Тем не менее, эти HTML элементы имеют разные цели, и знание различия между ними гарантирует их правильное и уместное использование. В конечном итоге, это избавляет путаницы - и позволяет создавать красивые и удобные веб-проекты.
Мы рекомендуем использовать тег <div> в качестве универсального строительного блока для любых веб-страниц. Именно этот тег является таким же важным и незаменимым, каким является кирпич в стене кирпичного дома. Успехов же тебе, начинающий строитель!
🔥 Понравилось? Подпишись! Победим восстание роботов вместе! 🔥
🚀 P.S. Ты можешь круто поддержать меня и проект "Войти в IT" на boosty! Я публикую там более эксклюзивный и профессиональный, иногда немного личный контент. Хочешь посмотреть как я выгляжу в реальной жизни? Тогда жми: Ссылка 🚀
P.S.2 У меня ещё есть Telegram-канал. Там посты чуть попроще, и чуть повеселей. Ссылка
