В этой публикации мы затронем две важные темы — использование элемента span и создание наклонного и полужирного текста при помощи тегов em и strong. Вероятно вы узнаете кое-что новое и полезное. Запомнив и уловив тонкости однажды, в будущем вы будете применять эти элементы более корректно.
Элемент - второй из наиболее неверно понимаемых элементов в словаре HTML, после элемента блока. Может быть полезным думать об элементах span следующим образом: это строчный тег, который как бы является спасательным кругом в HTML и используется только после того, как применение всех других элементов в этой ситуации было исключено. Почти всегда есть более удачные решения.
Элемент span применяется только как крайняя мера, так как у него нет смыслового значения: нет возможности сказать, какое в нем находится содержимое. Элемент совершенно бесполезен без применяемого к нему кода CSS: сам по себе он совершенно не влияет на отображение. Сочетание этих двух особенностей приводит к тому, что элемент span на сайте нужно использовать редко, обдуманно и аккуратно.
Типичный пример использования элемента в блочном элементе - оборачивание содержимого, которому другим способом нельзя было бы задать стили CSS. Например:
По какой-то причине нам нужно, чтобы определенное слово отображалось иначе в этом абазце.
Конечно, сначала нам нужно было исключить все другие возможности перед тем, как применять элемент span, отказаться от применения такой строчной разметки, как: (используется для определений) и (используется для аббревиатур), (используется для создания наклонного текста) и (используется для создания полужирного текста), к каждому из которых можно применить код CSS.
Код HTML разработан так, чтобы быть независимым от среды и пользователя, насколько это возможно. Хотя обычно Вы взаимодействуете с большинством веб-страниц через их отображение на экране, кроме этого есть много других возможностей отображения содержимого, например: печать, программы чтения текста, переводчики в шрифт Брайля и другие.
По этой причине теги, использующиеся для разметки текста в коде HTML, имеют очень широкую область применения. Например, тег выделяет текст. В большинстве случаев визуально содержимое этого тега отображается наклонно, а программы чтения текста выделят текст, зачитывая его громче.
Содержимое тега визуально отображается полужирно, и как и в предыдущем случае, в разных контекстах этот тег будет иметь разное значение.
Оба тега предназначены для применения на небольших количествах текста - одно-два слова или предложение - в абзаце длинной в несколько предложений. Если Вы сталкиваетесь со следующим кодом:
То в такой ситуации почти всегда лучше не использовать теги для создания наклонного или полужирного текста, а задать стили в коде CSS.
Подобным образом использование тега для создания полужирного текста в элементах заголовков не имеет смысла, лучше использовать для этого код CSS.
Спецификация HTML5 вновь вводит теги и для создания полужирного и наклонного текста соответственно, но мы бы рекомендовали по-прежнему продолжать использовать теги и для этих целей, так как у них более широкая применимость и адаптивность.
Перевод — Дежурка
Как веб-разработчик, я не могу не чувствовать, что все эти рекомендации невероятно вводят в заблуждение в 2015 году.
Конечно, тег "p" был в какой-то момент предназначен для использования абзаца... но в 100% моих приложений, дизайнов и просто повседневной общей разработки мы ничего не видели, кроме ограничений, налагаемых тег "p" ... он не предлагает никакой пользы в сегодняшнем Интернете.
Я бы сказал "да", "p" - описательный элемент, и по этой причине, если все это произошло; "описать что-нибудь", я буду всем для этого... но он НЕ просто описывает контент, он прямо подставляет ALTERS контент, который, будучи уже ограниченным само по себе, не все, что он делает, он также ОГРАНИЧИВАЕТ контент. Почему кто-то в здравом уме целенаправленно охватывает предельный строительный блок, когда дело доходит до веб-разработки, находится вне меня. С точки зрения дизайна это не имеет смысла. С структурной точки зрения это не имеет смысла. Из любого из DOM-манипуляций PERIOD это не имеет смысла.
Мы все вместе перестали использовать тег "p" , за исключением тех случаев, когда мы абсолютно вынуждены (например, клиентские словарные пресса, такие глупые вещи). Нет никакого оправдания, почему мы не можем описать почти все с хорошо названными классами и идентификаторами, поэтому мы видим нулевую причину, чтобы склониться перед "стандартами", которые не приносят никакой пользы, и на самом деле СЧИТАЮТ каждый кусочек головоломки, Тег "p" не помогает разработчику, конечному пользователю или современным поисковым системам. В двух словах... "p" тег почти не рекомендуется в даже отдаленно сложных реализациях (и с очень веской причиной), не позволяйте комментариям этих стандартных нацистских элементов управления отображать ваш контент!
Даже на этом самом сайте, ориентированном на разработчиков на нем, у ОЧЕНЬ ТОП его собственной страницы есть небольшая поп-часть, которая могла бы использовать тег "p" , поскольку он содержит достаточно текста для запуска ко второй строке, но полностью захвачен в DIV (и только div, а не div → p) для почти бесконечного числа причин... прежде всего, что сегодня "p" SUCKS по сравнению с любым хорошо описанным блоком созданный из DIV, который так же хорошо описывается (moreso... я говорю) как абзац "p" с очень описательным id = "blurb".
Из Stackoverflow:
Я говорю с
и долго жить
И да, я ценю наши нынешние веб-стандарты, и такие вещи, как все еще, имеют место, даже предлагая возможности делать что-то с некоторыми современными браузерами, которых вы не можете выполнить с помощью контейнера, но это только то, что это, в частности, сломанный элемент "p" , как часть реструктурированного и модернизированного HTML... должен был быть оставлен в могиле, где он принадлежит... это поколение веб-сайтов, где абзацы уже не абзацы навсегда. блоки буквально меняются... он просто устарел и непрактичен.
Всем привет!
С Вами снова Андрей.
Сегодня Вам будет предложено 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 от содержимого до всех его сторон.
И рассмотрим пример с использованием тэга :
Допустим, у нас есть конструкция вида:
Любой текст!
Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тег и применим соответствующие стили.
При оформлении текста с помощью css чаще всего используют тег . Он обозначает «просто текстовый блок». То есть особенного собственного смысла он не имеет. Также этот тег никак не изменяет отображение текста.
Однако, дополнительный смысл данному тегу добавляют с помощью классов. Например:
А уже для класса с помощью 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; }
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Автозапуск
