Div span: Разница между и

Содержание

Тeги «div» и «span»

Здравствуйте уважаемые начинающие веб-мастера.

Эту часть мы начнём со знакомства с двумя новыми тегами. Это теги <div> и <span>. Принадлежат они к логическому уровню, то есть явно себя не проявляют.

Но, при их помощи, можно создавать контейнеры, на которые потом очень удобно воздействовать средствами CSS.

Их можно делать видимыми и не видимыми, можно задавать им рамки и размещать в различных частях экрана.

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

А <span></span> – это встроенный элемент, и внутри его может размещаться только текст, или ещё встроенный элемент, и расположить его можно в любой части текста.

Одним из замечательных свойств тега <div> является то, что его можно располагать внутри другого дива,хоть он и блочный элемент.

Именно благодаря этой особенности, и создаётся блочный каркас сайта.

Если взглянуть на код блочного шаблона, то видно, что он весь состоит из дивов, и вложены они друг в друга по нескольку раз.

Чтобы не сбиться, и для каждого открывающего тега, не пропустить закрывающий, и не запороть тем самым весь код, сначала нужно написать пару <div></div>, а затем, между ними вставлять содержимое тега.

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

В примере показано, что блоку с идентификатором (id) wrapper заданы ширина, временная рамка, внутренние и внешние отступы, и позиционирование.

#wrapper{ width: 900px; outline: 1px solid #787274; padding: 10px; margin: 0 auto; position:relative; }

Тег <span></span> в основном применяется для выделения каких либо частей текста, путём подключения к нему встроенных стилей.

В примере показано, как при помощи тега <span>, можно покрасить слово head в синий цвет.

Тег<span><head></span> — голова документа

Тег<head> — голова документа

К цвету можно добавить размер, вид шрифта, и так далее.

На этом предварительное знакомство будем считать состоявшимся, ну а более основательно, как я уже говорил, будем узнавать их на практике, к которой и перейдём на следующей странице.

Неужели не осталось вопросов? Спросить

Перемена

Постоялец — хозяйке отеля:
— А что это за странное пятно на потолке у меня в комнате?
— Понимаете, до вас тут жил один химик. . .
— Это пятно от химикатов?
— Нет, от химика.

Подключение таблиц стилей < < < В раздел > > > Селекторы CSS

Статьи по теме
Что такое CSS;
Шрифты;
Выравнивание и красная строка;
Сокращение записи;

Изучаем теги div и span

Здравствуй, уважаемый читатель.

Это двенадцатый заключительный урок изучения html, в котором вы узнаете про очень полезные блоки на странице, без которых было бы невозможно работать и верстать шаблоны для сайтов, про теги DIV и SPAN.

Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. ИзображенияУрок 5. Ссылки. Часть 1Урок 5. Ссылки. Часть 2Урок 6. АтрибутыУрок 7. ТаблицыУрок 8. Выделения текстаУрок 9. Формы. Часть 1Урок 9. Формы. Часть 2Урок 10. МетатегиУрок 11. Комментарии

В основном из данных двух тегов строится вся html страница. После того как вы поймете что можно делать с этими тегами, вы не будете знать как обходились раньше без них. По порядку о каждом из этих тегов.

Тег div

Тег div является блочным элементом, который предназначен для выделения фрагмента документа и затем изменением его содержимого.

В коде html он выглядит следующим образом:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <div>
        <h2>Анкета</h2>
    </div>
    <div>
        <div>
            <ul>
                <li>Главная</li>
                <li>Об авторе</li>
                <li>Разное</li>
            </ul>
        </div>
        <p>Основной текст</p>
    </div>
    <div>Все права защищены. </div>
</body>
</html>

Вот так выглядит работа с тегом div. Он очень удобен. Сначала мы заключаем всё в блоки, а затем с помощью стилей(CSS) размещаем блоки как и где хотим.

Тег span

Тег span является строчным элементом, который предназначен для выделения фрагмента текста внутри других тегов, таких как <p>,<table> или <div>.

Пример кода с тегом span:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <p>Оказывается, <span>древние предки</span> человека, как выяснили учёные, питались преимущественно фруктами.</p>
    <p>Поэтому наш организм изначально <span>приспособлен к употреблению фруктов</span>.</p>
</body>
</html>

Данный тег работает следующим образом: вы помещаете в него тот фрагмент текста, который хотите выделить и задаете ему стиль.

Дело в том, что если для данных тегов стили не заданы, то вы не увидите никаких изменений на html странице. Стили задаются для тега div и span через таблицу стилей(CSS). В коде html вы только привязываете определенный стиль в CSS через атрибуты или. Данные атрибуты называются селекторами. Вы поймете как они работают когда начнете проходить уроки по CSS.

Пробуйте всё прописать руками. Тогда вы лучше запомните и будете помнить где и как их применить.

Больше практикуйтесь!

Разница, объясненная в 1000 слов или меньше

Если вы только начинаете осваивать HTML, вы, вероятно, научились использовать элементарные элементы HTML для создания страницы, такие как

, < h2> и

, и <изображение> .

Эти теги можно найти по всему Интернету. Но зайдите на любой крупный сайт, откройте исходный код, и вы можете увидеть что-то незнакомое: кучу вложенных

и теги.

Если вы не уверены, для чего нужны эти элементы, вам будет сложнее понять, как кодируются веб-страницы. И это не помогает тому, что div и span делают довольно похожие вещи.

Тем не менее, элементы div и span очень распространены и, вероятно, используются на большинстве посещаемых вами страниц. Итак, как начинающий эксперт по веб-сайтам, вы должны знать разницу между ними, если хотите понять структуру и содержание страницы. В этом руководстве мы покажем вам, что делает каждый из них и как вы можете правильно применить их к своим страницам.

span и div в HTML

Span и div — это общие элементы HTML, которые группируют вместе связанные части веб-страницы. Однако они выполняют разные функции. Элемент div используется для блочной организации и оформления элементов страницы, тогда как элемент span используется для встроенной организации и оформления.

Давайте обсудим каждый элемент более подробно, чтобы лучше понять, чем они отличаются.

div

Элемент div (раздел) — это общий элемент блочного уровня, который чаще всего используется для разделения содержимого страницы на блоки. Блочный элемент — это элемент страницы, который начинается с новой строки и имеет ширину, равную всей странице или родительскому контейнеру.

Вы очень часто будете видеть элементы div, используемые для группировки связанных абзацев, изображений, заголовков и ссылок. Например, статья из трех абзацев может быть заключена в блок div, а меню навигации, содержащее ссылки, может быть заключено в другой div. Использование div таким образом упрощает идентификацию различных разделов страницы и применение к ним стилей с помощью CSS.

Простой пример элемента div в HTML выглядит так:

 
  
     Это мой первый абзац.
 
     Это мой второй абзац.
 
     Это мой последний абзац.

span

Элемент span – это универсальный встроенный элемент, обычно используемый чтобы применить стиль к части встроенного содержимого. Встроенный элемент не начинает новую строку и занимает столько же места на странице, сколько и его содержимое. Теги Span используются для небольших фрагментов текста, ссылок, изображений и других HTML-элементов, которые встроены в окружающий контент.

Простой пример элемента span в HTML выглядит следующим образом:

Это абзац с небольшим дополнением внутри него.

Подводя итог, тег div создает блочный элемент, а тег охватывает встроенный элемент. Несмотря на их различия, оба используются для группировки одинаковых элементов в структурных и/или стилевых целях.

span и div Примеры

Давайте теперь рассмотрим пару примеров span и div, которые демонстрируют их различия и применение.

Вот пример двух тегов

, за которыми следуют два тега . Я применил уникальный цвет фона к каждому элементу, чтобы показать его размер — обратите внимание, как элементы div занимают всю ширину страницы, а теги span занимают только пространство своего содержимого. Кроме того, каждый div добавляет разрыв строки после своего содержимого, а элементы span — нет.

См. Pen span vs div 1 Кристины Перриконе (@hubspot) на CodePen.

Далее приведен пример того, как вы увидите совместное использование div и span на веб-страницах. Здесь элементы div отделяют более крупные фрагменты контента и оборачивают сегменты внутри этих элементов div.

См. Pen span vs div 2 Кристины Перриконе (@hubspot) на CodePen.

Когда использовать span или div

Как показано в приведенных выше примерах, div и span полезны для стилизации и структурирования веб-страниц. Этим элементам легко назначить атрибуты id или class и нацелить их с помощью правил CSS. Обычно вы увидите теги span, используемые для стилизации встроенного содержимого, например слова в строке текста. Теги Div, с другой стороны, должны стилизовать большие разделы контента или выступать в качестве контейнера для дочерних элементов. Более сложные веб-страницы часто интенсивно используют элементы div, вставляя их друг в друга для представления различных областей страницы и субрегионов.

Учитывая удобство span и div, заманчиво использовать эти теги каждый раз, когда вы хотите добавить новый элемент страницы — например, используя тег

вместо тега

. Тем не менее, на самом деле считается лучшей практикой в веб-разработке максимально ограничить их использование.

С чего бы это? Span и div являются «универсальными» элементами, что означает, что ни один из элементов не передает значение содержания, которое он содержит, или его назначения. Вы можете положить много вещей в

или тег , но из самого тега непонятно, каково назначение элемента или содержимого внутри.

Противоположностью общему элементу является семантический элемент, теги которого передают значение элемента. Большинство элементов HTML являются семантическими —