В этой публикации мы затронем две важные темы — использование элемента span и создание наклонного и полужирного текста при помощи тегов em и strong. Вероятно вы узнаете кое-что новое и полезное. Запомнив и уловив тонкости однажды, в будущем вы будете применять эти элементы более корректно.
Использование элемента span
Элемент - второй из наиболее неверно понимаемых элементов в словаре HTML, после элемента блока. Может быть полезным думать об элементах span следующим образом: это строчный тег, который как бы является спасательным кругом в HTML и используется только после того, как применение всех других элементов в этой ситуации было исключено. Почти всегда есть более удачные решения.
Элемент span применяется только как крайняя мера, так как у него нет смыслового значения: нет возможности сказать, какое в нем находится содержимое. Элемент совершенно бесполезен без применяемого к нему кода CSS: сам по себе он совершенно не влияет на отображение. Сочетание этих двух особенностей приводит к тому, что элемент span на сайте нужно использовать редко, обдуманно и аккуратно.
Типичный пример использования элемента в блочном элементе - оборачивание содержимого, которому другим способом нельзя было бы задать стили CSS. Например:
По какой-то причине нам нужно, чтобы определенное слово отображалось иначе в этом абазце.
Конечно, сначала нам нужно было исключить все другие возможности перед тем, как применять элемент span, отказаться от применения такой строчной разметки, как: (используется для определений) и (используется для аббревиатур), (используется для создания наклонного текста) и (используется для создания полужирного текста), к каждому из которых можно применить код CSS.
Создание наклонного и полужирного текста
Код HTML разработан так, чтобы быть независимым от среды и пользователя, насколько это возможно. Хотя обычно Вы взаимодействуете с большинством веб-страниц через их отображение на экране, кроме этого есть много других возможностей отображения содержимого, например: печать, программы чтения текста, переводчики в шрифт Брайля и другие.
По этой причине теги, использующиеся для разметки текста в коде HTML, имеют очень широкую область применения. Например, тег выделяет текст. В большинстве случаев визуально содержимое этого тега отображается наклонно, а программы чтения текста выделят текст, зачитывая его громче.
Содержимое тега визуально отображается полужирно, и как и в предыдущем случае, в разных контекстах этот тег будет иметь разное значение.
Оба тега предназначены для применения на небольших количествах текста - одно-два слова или предложение - в абзаце длинной в несколько предложений. Если Вы сталкиваетесь со следующим кодом:
То в такой ситуации почти всегда лучше не использовать теги для создания наклонного или полужирного текста, а задать стили в коде CSS.
Подобным образом использование тега для создания полужирного текста в элементах заголовков не имеет смысла, лучше использовать для этого код CSS.
Спецификация HTML5 вновь вводит теги и для создания полужирного и наклонного текста соответственно, но мы бы рекомендовали по-прежнему продолжать использовать теги и для этих целей, так как у них более широкая применимость и адаптивность.
Перевод — Дежурка
При оформлении текста с помощью css чаще всего используют тег . Он обозначает «просто текстовый блок». То есть особенного собственного смысла он не имеет. Также этот тег никак не изменяет отображение текста.
Однако, дополнительный смысл данному тегу добавляют с помощью классов. Например:
А уже для класса с помощью css задают стили и тем самым изменяют оформление.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
HTML
Прогрессивное улучшение
Нельзя просто так взять и рассказать про Progressive Enhancement, не упомянув о Graceful Degradation. В чем же разница между этими понятиями? Как уже говорилось в более ранней статье, Graceful Degradation можно перевести, как отказоустойчивость.
Это очень широкое понятие, но в контексте веба его можно понимать как отказоустойчивость клиентских веб-интерфейсов, серверной части сайтов и так далее. В этой статье Graceful Degradation будет пониматься как отказоустойчивость клиентских веб-интерфейсов.
CSS
Important { font-weight: bold; font-style: italic; } .note { font-size: 0.8em; color: #999999; } .error { text-decoration: line-through; color: red; }
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Автозапуск
Представление информации посредством современной идеи гипертекста абсурдно по сути, но так есть и так работает. С этим не поспоришь и приходится считаться.
С точки зрения современного языка программирования не важно, как представлены данные: строгие типы и обязательное предварительное описание либо нет никаких типов и нужное описание язык сам себе «додумает» по ходу исполнения алгоритма.
Важно отметить: все, что «не понято» браузером, JavaScript или серверным языком, не будет исполнено. Блочный тег при сложившихся обстоятельствах может «превратиться» в строчный, но строчный в блочный - нет.
Логика HTML-страницы
Исторический пример - тег HTML font. Достаточно давно он «не рекомендован» к использованию. Мотивация «не рекомендовано» - характерная черта современного программирования. Отсутствие совместимости кода «вверх«» по версиям и никакой стабильности в последовательном развитии версий программных компонентов и концепций тоже.
Действительно, тег span в HTML гораздо практичнее: он не относится только к шрифту. Span может менять множество атрибутов отображения и использования конкретного содержания.
Строки всегда были основным представлением для любых данных, но не всегда языки программирования определяли это синтаксисом, а программисты отдавали себе отчет в том, что используемое число или логическое значение - всегда строка.
Абсурдность и объективность гипертекста в реализации HTML: верстка - это применение набора тегов (парных или одиночных) для формального описания контента (данных). Ни описание, ни контент нельзя обоснованно назвать информацией. Первое - это некоторый каркас, в который укладывается некоторое содержимое - данные.
Каркас строится из жестко фиксированных кирпичиков (тегов), которые занимают строго определенные места в конструкции, и относительных элементов, которые располагаются «как карта ляжет».
Разбить страницу на разделы отображения данных можно таблицами или блочными элементами, а «залить» получившуюся конструкцию данными можно другими тегами. Обычно их именуют строчными, то есть располагающимися так, как определяет текущая возможность и текущее содержание.
Пример span HTML: что это и как описать
В зеленой рамке приведен пример кода, который браузер отобразил на сером фоне. Блочный элемент div оказался в центре текста, который в коде идет за ним. Первым элементом стал тег с классом scSpanLine. Затем разместился текст, в котором тегом span с классом scSimpleSpan выделено два участка этого текста.
Второй и третий строчные элементы расположились ровно так, как записаны в коде.
Данный пример показывает, как работает span в HTML. Что это просто последовательность данных - очевидно. Не очевидно другое: разработчик может описывать данный тег как угодно, может даже применить правило:
- POSITION: absolute;
Эффекта не будет. Указание координат и размеров также не играет никакой роли. Центрировать или выравнивать span в HTML - бесперспективно. Между тем тег очень практичен и востребован на практике. Это очень удобная обертка для выделения важного момента в общем потоке данных.
Главное - понимать, что span HTML - это способ изменить отображение строки или уточнить правила отображения части строки.
Логика предоставления строчной информации
Использовать язык описания данных HTML по его предназначению, то есть для описания данных, - вчерашний день. Применять серверный язык для формирования тела страницы - современно и так делают «все» разработчики. Особенно этим увлекаются системы управления сайтами (CMS).
Реальная практика и потребность в создании живых сайтов - это динамичное управление каркасом страницы и его контентом. В этом смысле тег span в HTML (что это просто динамика), как результат работы JavaScript, позволяет создавать динамичное содержимое «на лету».
JavaScript работает как преобразователь исходного текста в форматированный и подставляет нужные теги с нужными правилами CSS в исходящий поток, который распределяется по каркасу блочных элементов страницы.
Чем выше профессионализм разработчика, тем больше блочной (или табличной) разметки страницы и тем меньше реального присутствия статичных тегов span в HTML. Что это дает? Динамику. JavaScript - это алгоритм, который может выполнить работу над входящим потоком строк и отобразить его так, как задумал разработчик. Теги span появятся в нужном месте и в нужное время.
Всем привет!
С Вами снова Андрей.
Сегодня Вам будет предложено 2 версии урока. Одна в текстовом виде – ее Вы видите перед своими глазами, а второе ВИДЕО – ее Вам нужно будет скачать.
На наш взгляд видео версия Вам будет более понятна.
Так, про дополнительные элементы html…
Допустим вам нужно выделить какое-нибудь отдельное слово в тексте (предположим другим цветом и фоном), или чтобы картинка и текст, относящийся к ней, были сверху и справа в ячейке таблицы, а основное содержимое страницы, допустим в низу и ближе к левому краю. По поводу первого примера скажу, что можно это сделать тегом с набором нужных параметров, но он относится к запрещенным тегам (новые браузеры его могут не поддерживать), да и свойства замены фона у него нет.
Для подобных случаев и предусмотрены два специфических тега, которые по сути ничего не делают сами по себе. Но при применении нужных стилей к ним, можно добиться чего угодно. Можно вообще используя только два этих тега и применяя к ним стили, сделать всю страницу сайта.
И так, это теги и .
Какая между ними разница, если используются они для одного и того же?
Элемент div - это блочный тег, и в нем могут быть любые нам известные теги (списки, картинки, таблицы…).
Элемент span - это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).
Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.
Давайте рассмотрим стили, которые наиболее типичны для данных тегов. Они же применимы ко всем остальным тегам, и используются так же, просто чаще их используют с этими тегами (особенно к ) .
Первое с чего хотелось бы начать это с позиционирования элементов.
Это свойство:
position — устанавливает или определяет позицию элемента.
Значения:
static — по умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.
absolute — позиция объекта определяется относительно позиции родительского объекта или относительно объекта body. relative — Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.
left/top — устанавливает или определяет позицию элемента относительно левого/верхнего края.
Значения:
x – число в процентах или пикселях.
auto — значение по умолчанию.
Рассмотрим пример:
XHTML
Данный пример показывает, что наш блок с шириной в 300px сдвинется вниз на 350px и влево на 200px, относительно того места, в котором он появится по умолчанию.
Следующее важное свойство:
margin – величина отступа от нашего блока до соседних объектов с четырех сторон.
Значения:
margin-top — задает величину верхнего отступа объекта
margin-left — задает величину левого отступа объекта
margin-right — задает величину правого отступа объекта
margin-bottom — задает величину нижнего отступа объекта
XHTML
Мы создали блок с отступами вокруг него по 30px от всех его сторон.
Над чем хотелось бы остановиться еще:
padding – свойство задает величину пространства, вставляемого между объектом и его границами.
Значения:
padding-bottom — задает величину пространства, вставляемого между объектом его нижней границей.
padding-left — задает величину пространства, вставляемого между объектом его левой границей.
padding-right - задает величину пространства, вставляемого между объектом его правой границей.
padding-top - задает величину пространства, вставляемого между объектом его верхней границей.
XHTML
Мы создали блок с отступами по 30px от содержимого до всех его сторон.
И рассмотрим пример с использованием тэга :
Допустим, у нас есть конструкция вида:
Любой текст!
Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тег и применим соответствующие стили.
