Тег mark – Как выделить текст с помощью тега mark HTML: несколько примеров кода

Leave a Comment / Разное / By /

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+6.0+10.6+4.0+4.0+2.1+3.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

Синтаксис

<mark>текст</mark>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>mark</title>
  <style>
   mark {
    background: #ffec82;
    padding: 0 3px;
    border: 1px dashed #333;
   }
  </style>
 </head>
 <body>
  <header>
    <h2>Следы невиданных зверей</h2>
  </header>
  <article>
    История о том, как возле столовой появились загадочные розовые
    следы с <mark>шестью пальцами</mark>, и почему это случилось.
  </article>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Использование тега <mark>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <mark>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору MARK.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Тег | HTML справочник

Поддержка браузерами

12.0+ 9.0+ 4.0+ 6.0+ 11.1+ 5.0+

Описание

HTML тег <mark> используется для выделения или подсветки текста из-за его актуальности в другом контексте. Хорошим примером является выделение слова в документе, которое искал пользователь.

Тег <mark> не несет в себе никакого логического контекста, в отличие от тегов <strong> или <em>, но он является более семантически значимым, чем обычный <span>. Его прямым назначением является обратить внимание на то, что в данный момент актуально для пользователя.

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

  • Показ результатов поиска — при использовании поиска на сайте или в поисковой системе, можно выделить раздел текста, точно соответствующий введенным данным. Это поможет посетителю сайта сориентироваться на странице найти на странице и быстрее найти нужную ему информацию.
  • Указать на новые элементы в списке — если у вас есть список элементов, который вы постоянно обновляете, можно выделить новые элементы, чтоб постоянные посетители сайта сразу могли увидеть, что было добавлено.
  • Показать текущую дату в календаре — если на сайте есть календарь, то можно использовать <mark> для указания на текущую дату.

Примечание: текст, заключенный в элемент <mark>, ничем не будет отличаться от остального текста (в некоторых браузерах, задний фон, выделенного текста, подсвечивается желтым цветом), для изменения внешнего вида иcпользуйте CSS.

Атрибуты

Тег <mark> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


mark {
    background-color: yellow;
    color: black;
}

Пример


<p>Не забудь купить <mark>молока</mark> сегодня.</p>

Результат данного примера в окне браузера:

Пример использования тега <mark>

| HTML | WebReference

Элемент <mark> (от англ. mark — пометка) помечает текст как выделенный. В браузере фоновый цвет текста внутри <mark> выделяется жёлтым цветом.

Авторы обычно используют <mark> для привлечения внимания читателя к части текста. Заметьте, что такой текст ничего не говорит о важности выделенного фрагмента, а лишь предлагает обратить на него внимание.

Закрывающий тег

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>mark</title>
 </head>
 <body>
  <header>
    <h2>Следы невиданных зверей</h2>
  </header>
  <article>
    История о том, как возле столовой появились загадочные розовые
    следы с <mark>шестью пальцами</mark>, и почему это случилось.
  </article>
 </body>
</html>

Результат примера показан на рис. 1.

Использование mark

Рис. 1. Использование <mark>

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML

Элемент <mark> (от англ. «mark» ‒ «метка, пометка») определяет маркированный/выделенный текст. В браузере фоновый цвет текста внутри <mark> обычно выделяется жёлтым цветом.

В отличии от тегов <strong> и <em>, которые предназначены для указания важности текста, тег <mark> необходим для того, чтобы обозначить конкретные части текста, с которыми сейчас работает пользователь и которые важны для него в данный момент.

Синтаксис

<mark>текст</mark>

Закрывающий тег

Обязателен.

Атрибуты

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <mark> со следующими значениями CSS по умолчанию:

 mark {
    background-color: yellow;
    color: black;
}

Различия между HTML 4.01 и HTML5

Тег <mark> является новым в HTML5.

Пример использования:

Текст с выделенным словом:

Спецификации

Поддержка браузерами

Элемент
<mark> 9+ 6+ 10.6+ Да 4+ 4+
Элемент
<mark> 2.1+ 4+ 11+ 4+

Попробуйте сами — Примеры

Как сделать текст жирным и привлечь к нему внимание:

Важный и жирный текст

Как сделать акцент на фрагменте текста:
Акцент и курсив

Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста

Учебник HTML

HTML уроки: HTML Форматирование

HTML Элементы


Тег mark — Уроки по созданию сайтов на WordPress

Тег <mark>

Описание

Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

Синтаксис

<mark>текст</mark>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>mark</title>
  <style>
   mark {
    background: #ffec82;
    padding: 0 3px;
    border: 1px dashed #333;
   }
  </style>
 </head>
 <body>
  <header>
    <h2>Следы невиданных зверей</h2>
  </header>
  <article>
    История о том, как возле столовой появились загадочные розовые
    следы с <mark>шестью пальцами</mark>, и почему это случилось.
  </article>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>mark</title> <style> mark { background: #ffec82; padding: 0 3px; border: 1px dashed #333; } </style> </head> <body> <header> <h2>Следы невиданных зверей</h2> </header> <article> История о том, как возле столовой появились загадочные розовые следы с <mark>шестью пальцами</mark>, и почему это случилось. </article> </body> </html>

Результат примера показан на рис. 1.

Использование тега <mark>

Рис. 1. Использование тега <mark>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <mark>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору MARK.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

Markdown — Википедия

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 3 декабря 2019; проверки требуют 2 правки. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 3 декабря 2019; проверки требуют 2 правки.

Markdown (произносится маркда́ун) — облегчённый язык разметки, созданный с целью написания наиболее читаемого и удобного для правки текста, но пригодного для преобразования в языки для продвинутых публикаций (HTML, Rich Text и других).

Первоначально создан в 2004 году Джоном Грубером (англ. John Gruber) и Аароном Шварцем. Многие идеи языка были позаимствованы из существующих соглашений по разметке текста в электронных письмах. Реализации языка Markdown преобразуют текст в формате Markdown в валидный, правильно построенный XHTML и заменяют левые угловые скобки («<») и амперсанды («&») на соответствующие коды сущностей. Первой реализацией Markdown стала написанная Грубером реализация на Perl, однако спустя некоторое время появилось множество реализаций от сторонних разработчиков (см. ниже). Реализация на Perl распространяется по лицензии типа BSD. Реализации Markdown на различных языках программирования включены (или доступны в качестве плагина) во многие системы управления содержимым.

Ниже приведены примеры использования Markdown, однако это далеко не полное руководство. Полное описание языка может быть найдено на официальном сайте[6]. Символы, которые обычно рассматриваются в Markdown как специальные, могут быть экранированы с помощью обратного слеша. Например, последовательность «\*» выведет символ «*», а не будет являться признаком начала выделенного текста. Кроме того, Markdown не преобразует текст внутри «сырых» блоков XHTML. Таким образом, в Markdown-документ можно включать секции XHTML, заключив их предварительно в теги уровня блока.

  • Текст с выделением или логическим ударением:
 *выделение* (например, курсив)
 **сильное выделение** (например, полужирное начертание)
  • Программный код:
 Код внутри строки (inline) `Hello world!`

    Строка или блок кода создаются 4 пробелами в начале каждой строки
  • Зачёркнутый текст:
 необходимо сделать ~~одну~~ другую вещь

 * элемент маркированного списка
 - ещё один элемент ненумерованного списка
 + буллеты элементов могут быть разными

 1. Элемент нумерованного списка
 2. Элемент №2 того же списка
 9. Элемент №3 списка — элементы нумеруются по порядку, цифра в начале строки не имеет значения

Создание заголовков производится путём помещения знака решетки перед текстом заголовка. Количество знаков «#» соответствует уровню заголовка. HTML предоставляет 6 уровней заголовков.

# Заголовок первого уровня
#### Заголовок четвёртого уровня

Первые два уровня заголовка также имеют альтернативный синтаксис:

Заголовок первого уровня
========================

Заголовок второго уровня
------------------------
  • Цитаты (тег blockquote):
> Данный текст будет заключен в HTML-теги <blockquote></blockquote>

[Текст ссылки](адрес://ссылки.здесь "Заголовок ссылки")

или

[Текст ссылки][тег]

и где-нибудь в документе (например в самом низу)

[тег]: адрес://ссылки.здесь "Заголовок ссылки"

![Alt-текст](адрес://ссылки.здесь "Заголовок изображения")

Расширения[править | править код]

Приведённые ниже приложения реализуют Markdown, расширяя его синтаксис дополнительной функциональностью:

  • MultiMarkdown (C)[32]
  • Text::MultiMarkdown (Perl) модуль, реализующий расширение MultiMarkdown[33]
  • PHP Markdown Extra[34]
  • python-markdown2 (Поддерживает некоторые расширения PHP Markdown)[27]
  • python-markdown (Имеет систему расширений для добавления нового синтаксиса)[26]
  • Markout (Java)[35]
  • Pegdown (Java)[18]
  • Maruku (Ruby)[29]
  • Pandoc (Haskell)[16][36]

Руководства[править | править код]

  • Markdown: Dingus онлайн-конвертер[37]
  • Markdown cheat sheet[38]

Конвертеры[править | править код]

  • из HTML в Markdown
    • html2text.py (написано на Python)[39]
    • Markdownify (на PHP)[40]
    • Make.text — букмарклет, преобразующий любую веб-страницу в Markdown[41]
    • XHTML-to-Markdown XSLT (XSLT-таблица стилей, работает только с XHTML)[42]
    • Pandoc — написанная на Haskell библиотека по преобразованию различных форматов, поддерживает несколько диалектов Markdown (markdown — диалект от pandoc, markdown_strict — оригинальный Markdown без расширений, markdown_phpextra — диалект от PHP, markdown_github — диалект от github) может преобразовывать из и в Markdown, HTML, reStructuredText, LaTeX, и другие.[16]
  • Другие форматы в Markdown

Веб-приложения, использующие Markdown[править | править код]

  • Вики:
  • Блоги:
    • Tumblr — изначально отключён, но можно использовать, включив в настройках.
    • scriptogr.am
  • CMS:
    • Drupal — content-фильтр Markdown[45]
    • Magento — с помощью модуля[46]
    • Plone — «родная» поддержка в Plone 3
    • TYPO3 — с помощью плагина af_markdown[47]
    • RadiantCMS — один из видов разметки, доступный «из коробки»[48]
    • HTMLy — по умолчанию используется для хранения контента (вместо баз данных) [49]
  • Веб-фреймворки:
    • Ruby on Rails — требуется установка BlueCloth, Maruku[50]
    • Yii — виджет CMarkdown, входит в стандартную поставку фреймворка
    • Webasyst — входит в стандартную поставку PHP-фреймфорка в виде плагина к бесплатному приложению «Блог»
    • Symfony — требуется установка бандла KnpMarkdownBundle
  • Социальные приложения:
  • Универсальные редакторы: TextMate, BBEdit (с версии 8.6), Vim (с помощью специального пользовательского режима[51], написанного Беном Вильямсом), Emacs(с помощью специального пользовательского режима[52], написанного Джейсоном Блевинсом), TextWrangler, Smultron, Sublime Text, Geany, Atom, Visual Studio Code.
  • Редакторы для блогов: Ecto[53], MarsEdit
  • Плагины для редактора среды Eclipse от ThinkTank Mathematics[54]
  • Плагины для текстового редактора gedit[55]
  • Текстовый редактор iA Writer в версии для Mac OS[56] и Android[57].
  • Текстовый редактор ReText для GNU/Linux[58]
  • WYSIWYM-редактор Texts для Windows/Mac OS[59]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *