в HTML
Тег предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Синтаксис
Закрывающий тег
Атрибуты
Аналог CSS
Пример. Использование тега
Примечание
Следует отметить, что теги и , также как и , несмотря на сходство результата, являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает курсивный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Спецификация ?
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
| HTML5 | Рекомендация |
| HTML 4.01 Specification | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры: Настольные Мобильные ?
| Internet Explorer | Chrome | Opera | Safari | Firefox |
| 3 | 1 | 2 | 1 | 1 |
| Android | Firefox Mobile | Opera Mobile | Safari Mobile |
| 1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Что такое em в HTML и CSS? Значение термина em в вебе
Размер шрифта в html и CSS можно указать разными способами, например значением, размером, процентами и т.д. Часто в CSS для указания размера используется единица измерения em.
EM является единицей основного шрифта документа. Размер основного шрифта может быть указан явно, либо вообще не указан. В таком случае браузер присваивает шрифту размер по умолчанию. Для основного шрифты размер по умолчанию – 12pt, для H1 – 24pt, H2 – 18pt
em является масштабируемой единицей и равна текущему font-size. Если font-size в документе 12pt, 1em равен 12pt, 2em – 24pt и т.д.
em все чаще используется в веб-документах из-за свойства масштабируемости и возможности применения в различных мобильных устройствах и планшетах.
Таблицы стилей для веба Советы и хитрости по CSS
См. также оглавление со всеми советами.
em , px , pt , cm , in …
Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт ( pt ) и пика ( pc ), другие, напр. сантиметр ( cm ) и дюйм ( in ), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px . Значит ли это, что для разных свойств нужны разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях ( margin: 5px ) также допускает и значения в дюймах или сантиметрах ( margin: 1.2in; margin: 0.5cm ), и наоборот.
Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:
| Рекомендуются | Можно иногда | Не рекомендуются | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Экран | em, px, % | ex | pt, cm, mm, in, pc | ||||||||||||||
| Печать | em, cm, mm, in, pt, pc, % | px, ex
Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑ Так называемые абсолютные единицы ( cm , mm , in , pt и pc ) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось. В прошлом CSS требовал, чтобы абсолютные единицы отображались правильно даже на компьютерных экранах. Но поскольку неправильных реализаций было больше, чем правильных, и никаких улучшений не предвиделось, в 2011-м CSS отказался от этого требования. Сейчас абсолютные единицы обязаны работать правильно только при выводе на печать и на устройствах высокого разрешения. CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями. Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em . Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны. Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a , c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em ) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам. Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования. Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей. Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково. На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы c m , pt , mm , in и pc , как объяснялось выше). CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px . Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px , а не pt , cm и т.д. Используйте em или px для шрифтовЕдиницы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px . Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми: 0.5pt, 1px, 1pt, 1.5px, 2px Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.). Волшебная единица CSS, px , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко. Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1 Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию. Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px , всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px ? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример: Новые единицы измерения в CSSЧтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem . Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em , который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года: Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает). Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали. Навигация по сайтуCreated 12 Jan 2010; Элементы i, b, em и strongВ то время как многие элементы из HTML4 вошли в HTML5 без существенных изменений, некоторые исторически презентационные элементы обрели новую семантику. Давайте посмотрим на и и сравним их с семантическими преемниками — и . Что получается:
Новая семантика презентационных элементовВ HTML4 элементы и были презентационными. Они по-прежнему могут использоваться там, где этого требует типографская традиция. Тем не менее, теперь они обрели семантику и могут быть оформлены при помощи CSS, что делает их не только презентационными — элемент , например, совсем не обязательно должен быть полужирным. Поэтому для обозначения смысловой нагрузки элементов рекомендуется использовать классы; это позволит легко изменить внешний вид элементов в дальнейшем. Элемент
Элемент представляет собой фрагмент текста с дополнительным выделением или же экспрессивно-эмоциональным сдвигом относительно обычного текста (то, что обычно обозначается курсивом в типографике) Обычно обозначаются курсивом: иностранные слова (с атрибутом lang ), таксономия и технические термины, названия кораблей, пометки в сценариях, нотное письмо, вставки размышлений или рукописного текста. Пример: В указанном примере элемент используется для обозначения внутреннего диалога персонажа, произнесённого в другом тоне. Элемент используется в этом примере для обозначения «идиоматических фраз из другого языка» (японских слов). Полный список значений атрибута lang вы можете найти в официальном списке IANA; или же вы можете воспользоваться замечательным сервисом по поиску языковых обозначений от Ричарда Исиды из W3C. Элементом в данном примере обозначается таксономическая единица. Используйте только в том случае, когда не удаётся найти ничего более подходящего: для фрагментов с экспрессивно-эмоциональным выделением, для смысловой важности, для имён при цитировании или в библиографии, для определений и для математических переменных. Однако для придания курсивного начертания таким блокам текста, как ремарки, стихотворные строфы и цитаты, используйте CSS . Не забывайте использовать атрибут class для задания функциональной роли элемента — это позволит с легкостью переопределить стили в дальнейшем. К примеру, вы можете сделать выборку по атрибуту lang в CSS, используя селектор вида [lang=»ja-cyrl»] . Элемент
Элемент представляет собой фрагмент текста, который выделяется из окружающего его контекста, но не передает никакого особого значения. Это, например, ключевые слова в выдержках, названия продуктов в обзорах или другие части текста, которые по правилам типографики обычно выделяются полужирным начертанием. Для текста, обрамленного в (который должен просто отличаться от основного), нет необходимости использовать font-style:bold — можно обратиться к другим стилям: скруглённому фону, большему размеру шрифта, другому цвет или особому форматированию типа капители. К примеру, в приведенном выше отрывке, используется для указания на того, кто говорит или рассказывает. Текст, который набран полужирным по типографским соглашениям (а совсем не потому, что он более важен) может использоваться для выделения имён в голливудских сплетнях или в качестве вводного текста для сложных или оформленных в классическом стиле текстов: В данном примере буквица соединяется с текстом при помощи . Для ее создания используется псевдо-элемент :first-letter . В этом случае открывающая фраза выделена полужирным только из оформительских соображений, но если бы этот фрагмент был семантически важен, то или другой подобный элемент подошли бы лучше. Несмотря на то, что мы можем использовать для традиционного типографического оформления вроде выделения капителью первого слова, фразы или предложения, псевдо-элемент :first-line больше подходит для таких целей. Например, все первые абзацы HTML5Doctor.com оформлены при помощи элегантного :first-of-type . Используйте только тогда, когда нет ничего более подходящего, например: для текста с семантической важностью, для акцентированного текста (с «логическим ударением»), элементы от для заголовков и для подсвеченного или выделенного текста. Для облака тегов используйте список с соответствующими классами. Для воссоздания традиционных типографских приёмов используйте CSS-селекторы псевдо-элементов: :first-line и :first-letter , каждый для своего случая. И ещё раз, не забывайте использовать атрибут class для обозначения того, зачем был использован каждый конкретный элемент — это упростит повторное изменение элемента в дальнейшем.. и для сравнения: элементы и
http://bitvar.ru/besplatnoe-seo/vnutrennyaya-optimizaciya-po-polochkam/43-strong-em-v-i.html Не так давно (10-07-2010) ребятами из исследовательского проекта bitvar были проведены исследования касающиеся strong em b i Очень интересно и познавательно Именно ради этих случаев я и инициировал исследование в bitvar.ru, но не моя вина, что автор материала, после заранее оговоренного срока, счел возможным представить информацию в статье в таком виде. Я не ратую за статью меня волнует важность конструкции, ведь она очевидна. Вы же в своем комментарии зачем-то передергиваете сказанное и сужаете значение до одного только случая, когда важно «доктор». Короче, в огороде бузина, а в Киеве дядька, извините. Во всяком случае это точно не новость, хотя информация достоверная, спасибо автору=) width: 100vw; height: 100vh; > 1vh составляет 1% от высоты окна 1vw составляет 1% от ширины окна vmax – наибольшее из (vw, vh) width: 100vmin; height: 100vmin; > background: url(https://cdn.pixabay.com/photo/2020/03/11/09/53/car-4048220_1280.jpg) #000; background-size: cover; background-position: bottom center; line-height: 1; margin-top: 0; font-size: 16vmin; font-weight: 900; padding: 1rem; text-align: center; color: #fff; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); > Новые разработчики часто путаются, видя несколько элементов, которые дают аналогичные результаты. и являются общим примером, поскольку они оба выделяют текст курсивом. Какая разница? Что вы должны использовать? По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент представляет ударение на его содержании, в то время как элемент представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать .) Это означает, что правильное использование зависит от ситуации. Ни для чисто декоративных целей, это то, для чего предназначен CSS-стиль. Примером для может быть: -«Просто сделай это!», или: «Мы должны были что-то с этим сделать». Человек или программа, читающие текст, будут произносить слова, выделенные курсивом, с ударением, используя словесное ударение. Примером для может быть: «Королева Мэри отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове «Королева Мэри». Просто указывается, что речь идет не о королеве по имени Мария, а о корабле по имени Королева Мария. Другим примером для может быть: «Слово ‘the’ это артикль». ПримерЭлемент часто используется для указания неявного или явного контраста.
Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита,
Основы XML для начинающих пользователей Введение в правильную разметку XML означает Extensible Markup Language,
Языки программирования Язык программирования — искусственный (формальный) язык, предназначенный для записи программ для исполнителя
По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый
Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть
Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося
Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX,
Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта,
Как добиться эффекта скручивания? Люди добрые помогите! Как сделать так чтобы здание скрутилось вокруг
Синтаксис и основные понятия языка XML, создание валидных документов Понятие о языке XML XML
17 Таблицы 17.1 Введение в таблицы Таблицы представляют отношения между данными. Авторы определяют эти
Эффективное использование gnu make Создание данного текста не имело своей целью дать полное описание
Описание данных с помощью XML Если вы программируете на Java, за последние пару лет
Как написать эффективный продающий текст. Часть первая. Подготовка Грамотно написанный продающий текст позволяет превращать
Чем открыть XML Web — это место, где миллионы людей ежедневно связываются друг с
Многооконный интерфейс. Создание MDI-приложения , страница 3 Вместо дополнительных байт окна приложение может использовать
Отображение XML с использованием XSLT При помощи XSLT вы можете преобразовывать XML документ в
Как сделать — визуальные эффекты изображениям Узнайте, как добавить визуальные эффекты к изображениям. Фильтры
Понимание XML Узнайте, как Расширяемый язык разметки (Extensible Markup Language — XML) облегчает универсальный
ХАЙФХАК: ПРОГРАММИСТ ВЗЛОМАЛ СИСТЕМУ, ЧТОБЫ ПОПИТЬ ПИВО БЕСПЛАТНО / пиво :: geek новости ::
Примеры команды AWK в Linux Введение AWK назван в честь фамилии его авторов: Альфред
Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными? Элемент управления ImageList содержит
Введение в XSLT XSLT представляет собой способ для XML-документов в другие XML или документы
| |||||||||||||||
| How-to | – Читать 6 минут – | 12 сентября 2020 | |||||||||||||||
| Категории контента | Потоковый контент, фразовый контент, явный контент. | ||||||||||||||||
| Разрешенный контент | Фразовый контент. | ||||||||||||||||
| Пропуск тегов | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. | ||||||||||||||||
| Разрешенные родители | Любой элемент, который принимает фразовый контент. | ||||||||||||||||
| Разрешенные роли ARIA | Любые | ||||||||||||||||
| Интерфейс DOM | HTMLElement до Gecko 1.9.2 (Firefox 4) включительно Firefox реализует интерфейс HTMLSpanElement для этого элемента. |
