что значит тег span в html

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа

Ну и представьте, насколько проще читать вместо

Основные семантические теги HTML

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег

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

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.

Особенности: желателен заголовок внутри.

Типовые ошибки: путают с тегами и

Особенности: желателен заголовок внутри.

Типовые ошибки: путают с тегами и

Значение: побочный, косвенный для страницы контент.

Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.

Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.

Типовые ошибки: многие считают, что в может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.

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

Особенности: этих элементов может быть несколько на странице.

Типовые ошибки: использовать только как шапку сайта.

Значение: основное, не повторяющееся на других страницах, содержание страницы.

Особенности: должен быть один на странице, исходя из определения.

Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

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

Особенности: этих элементов может быть несколько на странице. Тег не обязан находиться в конце раздела.

Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

Заголовок всего документа и заголовки смысловых разделов. Теги:

Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.

Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

Получилось найти самый подходящий смысловой тег — использовать его.

Для потоковых контейнеров —

Можете дать имя разделу и вынести этот раздел на другой сайт? —

Можете дать имя разделу, но вынести на другой сайт не можете? —

Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —

Как точно не нужно делать

Не используйте семантические теги для украшательств. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

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

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

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и курсах HTML Academy. Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена станет ещё приятнее.

Источник

Разница между

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

Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как

Чтобы увидеть как работают элементы

Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.

Посмотрим на это в браузере.

Похоже на один большой прямоугольник. Как насчёт отделить теги

Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый

Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.

В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:

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

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

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

Браузер отобразит в одну линию:

Однако можно изменить это поведение, добавив одну строку в CSS:

Для этого примера мы используем

Вообще, хорошей идеей будет не злоупотреблять тегом

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

Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги

Ещё раз, давайте сравним новый (справа) и старый код (слева).

А теперь посмотрим, как новый код отображается в браузере!

Источник

Html теги div и span — элементы блочной верстки сайта

Доброго здоровья, дорогие друзья! Пришло время рассказать о двух важнейших html тегах div и span, которые являются определяющими при блочной верстке сайта. Я уже упоминал, что в достопамятные времена сайты верстались с помощью таблиц.

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

Использование html тегов и их атрибутов, в том числе div и span, строго регламентировано Международным Консорциумом. Соответствие принятым требованиям документа html можно проверить с помощью W3C validator. С другой стороны, можно также проконтролировать валидность CSS документа. Таким образом, мы уяснили, для чего был создан CSS. Резюмируя вышесказанное, представлю схематически, как с помощью тега div происходит блочная верстка сайта посредством присоединения стилей CSS к html документу.

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

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

Отличие id и class заключается в том, что идентификатор id должен быть представлен в коде лишь один раз (он представляет уникальный элемент, для которого задаются свои стили оформления). Атрибут class позволяет связать определенный тег со стилями (то есть ко всем данным тегам, которых может быть несколько, будет применяться данный набор стилей). В значении допускается указывать несколько классов, разделяя их пробелами. А теперь рассмотрим код одной из страниц и посмотрим на структуру блочной верстки с использованием контейнеров div:

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

Также, кроме атрибутов id и class, для тега div доступны другие универсальные атрибуты (которые работают практически со всеми тегами) и события. Но наиболее широко используемыми являются все-таки id и class.

В файле style.css задаем соответствующие этому элементу стили.

Пожалуй, на сегодня все. Целью этой статьи было дать вам представление о схеме осуществления блочной верстки сайта, выделив значение блочного тега div и строчного элемента span. Также я считаю этот пост своеобразным мостиком между изучением основ html и стилей CSS, который должен был подтвердить их неразрывную связь. А чтобы научиться быстро применять эти знания на практике, подписывайтесь на получение новых материалов блога.

Источник

Выпуск №11. Элементы span и div в HTML

Дата публикации: 2009-07-15

С Вами снова Андрей.

Очередной выпуск рассылки будет посвящен элементу span и элементу div в HTML.

Сегодня Вам будет предложено 2 версии урока. Одна в текстовом виде – ее Вы видите перед своими глазами, а второе ВИДЕО – ее Вам нужно будет скачать.

Ссылка на видео версию урока:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

На наш взгляд видео версия Вам будет более понятна.

Так, про дополнительные элементы html…

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

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

Какая между ними разница, если используются они для одного и того же?

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

Элемент span — это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).

Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.

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

Первое с чего хотелось бы начать это с позиционирования элементов.

position — устанавливает или определяет позицию элемента.

static — по умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.

absolute — позиция объекта определяется относительно позиции родительского объекта или относительно объекта body. relative — Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.

left/top — устанавливает или определяет позицию элемента относительно левого/верхнего края.

x – число в процентах или пикселях.

auto — значение по умолчанию.

Источник

• ← что такое wacc инвестиционного проекта
• что значит объективные причины →