Элемент code используется для указания компьютерного кода или языка программирования, такого как PHP , JavaScript, CSS , XML и т.д. Для кратких фрагментов внутри предложения можно просто разместить элемент вокруг фрагмента кода следующим образом:
onclick
directly in the HTML.
Для более значительных образцов кода, которые занимают несколько строк, можно использовать предварительно форматированные блоки, как показано в "лекции 15" , "Разметка текстового контента в HTML ".
Хотя не существует определенного метода указания, какой язык программирования или код показан в элементе code , можно использовать атрибут class . Обычная практика (упомянутая в проекте HTML 5) состоит в использовании префикса language- и затем добавлении названия языка. Поэтому пример выше будет выглядеть следующим образом:
It is bad form to use event handlers like
onclick
directly in the HTML.
Некоторые языки программирования имеют названия, которые не так просто представить в классах, такие как C# (C-шарп). Правильный способ записи в этом случае будет "class="language-c\#"" , что может создавать трудности и приводить к опечаткам. Я бы рекомендовал использовать класс , состоящий только из букв и дефисов, и записывать его полностью. Поэтому в данном случае используйте лучше "class="language-csharp"" .
Вывод взаимодействия с компьютером
Два элемента samp и kbd можно использовать для ввода и вывода взаимодействия с компьютерной программой. Например:
One common method of determining if a computer is connected
to the internet is to use the computer program ping
to see if a computer likely to be running is reachable.
kittaghy% ping -o google.com PING google.com (64.233.187.99): 56 data bytes 64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms --- google.com ping statistics --- 1 packets transmitted, 1 packets received, 0% packet loss round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
Элемент samp указывает образец вывода из компьютерной программы. Как показано в этом примере, различные типы вывода можно указывать с помощью атрибута class . Однако не существует широко принятых соглашений, какие виды классов использовать.
Элемент kbd указывает ввод взаимодействия пользователя с компьютером. Хотя это традиционно ввод с клавиатуры (поэтому используется сокращение "kbd" ), он должен также использоваться для указания других типов ввода, таких как ввод с голоса.
Переменные
Элемент var используется для указания переменных в текстовом контенте. Он может включать алгебраические математические выражения или находиться в программном коде. Например:
The value of x in 3x+2=14 is 4.
my $welcome = "Hello world!";
Цитирование
Элемент cite используется для указания, откуда поступает находящийся рядом контент - при цитировании человека, книги или другой публикации, или обычно при отсылке людей к другому источнику, этот источник должен быть помещен в элемент cite . Например:
The saying Everything should be made as simple as possible,
but not simpler
is often attributed to Albert
Einstein, but it actually a paraphrasing of a quote which
is much less easy to understand.
Описание
Тег указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
Браузеры никак не выделяют текст внутри , за исключением Opera до версии 15, которая добавляет к тексту пунктирное подчёркивание.
Синтаксис
ТекстАтрибуты
Добавляет всплывающую подсказку к тексту, в которой можно дать расшифровку аббревиатуры.Закрывающий тег
Обязателен.
HTML5 IE Cr Op Sa Fx
CGI обозначается протокол, с помощью которого любые внешние программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы.
Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки при наведении курсора мыши на текст аббревиатуры
Браузеры
Браузер Internet Explorer до 6 версии включительно не поддерживает тег , взамен рекомендуется использовать тег .
The HTML Abbreviation element ( ) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else.
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Accessibility concerns
Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
Example
JavaScript Object Notation (JSON) is a lightweight data-interchange format.
This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of "" in that specification. |
Living Standard | |
HTML5 The definition of "" in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of "" in that specification. |
Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
abbr | Chrome Full support 2 | Edge Full support Yes | Firefox
Full support
1 Notes Full support 1Notes Notes Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface. | IE Full support 7 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
Full support Full support See implementation notes. See implementation notes.See also
- Other elements conveying text-level semantics : element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address."> , , ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type."> , element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size small, such as from small to x-small."> , ) is used to describe a reference to a cited creative work, and must include the title of that work."> , element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. ">
, ) is used to indicate the term being defined within the context of a definition phrase or sentence."> , element represents a specific period in time.">
- The obsolete element, whose responsibilities were folded into
Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?
Семантический HTML выражает значение документа. Он больше о том, чем является текст, чем о том, как он выглядит. Хорошая семантическая разметка помогает и человеку и компьютеру лучше понять содержимое документа и его контекст.
Семантическая разметка намного легче поддается интерпретации. Она дружественна поисковой оптимизации. Отлично работает с современными браузерами, уменьшает количество кода, необходимого, чтобы выразить содержимое и повышает читаемость этого кода.
Ок, итак семантическая разметка - это хорошо, но как ее использовать. Лучше всего начать с замены обычных тегов на более выразительные. Давайте посмотрим восемь элементов, которые позволят вам войти в эту игру.
Подобно своему блочному двоюродному брату
, тег
используется для обозначения цитирования.
Почему же просто не использовать кавычки? Кавычки не всегда подразумевают цитирование. Иногда они используются для смыслового выделения, иронии или обозначения названия чего-либо - и в этом контексте, они используются правильно. Однако, если вы цитируете что-то,
явно выражает ваше намерение.
и
В старые добрые времена, теги и обозначали текст выделенный, соответственно, курсивом и жирным шрифтом. Когда же идея об отделении семантики от представления стала набирать обороты, к этим тегом стали относиться с подозрением. Их заменили на теги и , обозначающие соответственно эмфазис и сильный эмфазис.В HTML5, наконец, эти теги получили отличную семантическую интерпретацию. Тегом помечается текст, у которого отличается тон или настроение. Это полезно, например, для описания мыслей или технических терминов. Тег помечает текст, который стилистически отличается от обычного текста, но не имеет какого-либо выделенного семантического значения. Чем это отличается от использования ? Ключ в том, что не несет какого-либо семантически отличного смысла.
используется для сокращений! Он может быть особенно полезен в документах, где их много. У этого тега есть необязательный атрибут title , в котором можно указать полную версию текста.lol idk g2g ttyl
Давайте взглянем на классическую проблему локализации дат. В США 5 октября 2013 года записывается как 10/05/13, в Британии это 05/10/13, в Южной Африке это 2013/10/05, в России это 05.10.13. Все эти варианты делают чрезвычайно трудной задачу автоматического распознавания дат.Тег позволяет указывать дату и время в машинночитаемом формате. Предыдущий пример мог бы выглядеть примерно так: . HTML-парсеры смогут точно понять дату, несмотря на то, в каком формате мы ее указали. Тег также позволяет опционально указывать время в 24-м формате: ;
Когда-нибудь так делали?
Three hundred pages of boring, useless text. The one thing you need to know and will never be able to find again if you don"t highlight it. More boring stuff…
Больше не надо. В HTML5 появился элемент , которым помечается текст, выделенный для справочных целей из-за его высокой важности. Да, . Вы, вероятно, используете , , может быть даже , а вы когда-нибудь использовали другие типы? В HTML5 может использовать с целой кучей новых типов:
- number
- range
- search
- color
Больше так не делайте! Для этого есть , который представляет собой неупорядоченый список команд. У этого тега есть атрибут type , который может принимать значения: popup или toolbar .
Бонус
Большинство фронтенд-разработчиков используют при написании HTML, но многие не знают его истинного значения. Неразрывный пробел не разрывает строку. Это означает, что если два слова соединены неразрывным пробелом, они всегда будут вместе на одной строке. Иногда это очень важно. Вот несколько примеров:- Единицы измерения: 12 m/s
- Время: 8 PM
- Имена собственные: Dairy Queen