rt в HTML


Содержание

HTML :: Тег

В HTML тег (от англ. ruby text – текст рубина) формирует аннотацию сверху или снизу от базового текста, после которого он идет. Элемент должен располагаться внутри контейнера и обычно используется совместно с элементами (формирует базовый текст для аннотации), (используется для вывода текста в браузерах, не поддерживающих элемент ), (поддерживается только в Firefox и формирует дополнительную аннотацию к тексту).

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

HTML тег

Тег используется для добавления аннотаций сверху или снизу от текста, заключенного в тег . Тег определяет фуриганы (их также называют ёмигана или руби), фонетические подсказки в японском, а также восточно-азиатских языках.

Заключенная в тег аннотация содержит подсказку по произношению и переводу основного текста (иероглифов). Аннотация отображается мелким шрифтом над иероглифами.

Синтаксис

Тег парный, закрывающий тег не обязателен, если идет последним.

Тег HTML

примеров

Поддержка браузеров

IE 9 +, Firefox, Opera, Chrome и Safari Поддержка тегов .

Примечание: IE 8 или более ранних версиях IE браузер не поддерживает тег .

Определения тегов и инструкции

тега определяется символов (китайский фонетический или символ) толкование или произношение.

Тег и и тег для использования:
элемент состоит из одного или более требует объяснения / произношения символов и поставщика информации элементы, а также включает в себя необязательный элемент определяется, когда браузер не поддерживает элемент «Рубин» отображается, когда содержание.

HTML Tag

The HTML tag marks the ruby text component of a ruby annotation.

Ruby annotations are often used in East Asian typography.

(also spelt rubi) characters are small, annotative glosses that can be placed above or to the right of a Chinese character when writing logographic languages such as Chinese or Japanese to show the pronunciation. Ruby annotations, are usually used as a pronunciation guide for relatively obscure characters.

Syntax

The tag is written as with the ruby text inserted between the start and end tags.

Examples

Basic Ruby Annotation

Here’s an example of using the tag to present ruby text within a ruby annotation.

Omitting the End Tag

The element’s end tag may be omitted if the element is immediately followed by an , , or element, or if there is no more content in the parent element.

An element’s end tag may be omitted if the element is immediately followed by an , , or element, or if there is no more content in the parent element.

Therefore, the following example conforms to HTML5.

Fallback Content

You can use the element to provide fallback content for those browsers/user agents that don’t support ruby annotations.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

Element-Specific Attributes


This table shows the attributes that are specific to the tag/element.

Attribute Description
none

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The element is new in HTML5.

For more information on the element, see HTML5 Tag. Also check out the links to the official specifications below.

Template

Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

Note that the element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5 Tag.

Tag Details

For more details about the tag, see HTML5 Tag.

Specifications

Here are the official specifications for the element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

HTML .am>

The HTML tag marks the ruby text component of a ruby annotation. Ruby annotations are commonly used in East Asian typography.

The basic tag is written like this with the ruby text written between the opening and closing tags. The tags must be nested inside a tag or an tag.

The closing tag may be omitted if the element is immediately followed by an , or , or if there is no more content in the parent element.

The tag was introduced in HTML 5.

Example

In this example (from the W3C example), a base is annotated twice. The Chinese word for San Francisco (旧金山, i.e. «old gold mountain») is annotated both using pinyin to give the pronunciation, and with the original English.

Attributes


The tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.

Attributes Specific to the Element

Global Attributes

The tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.

Attribute Description
accesskey Specifies a shortcut key that can be used to access this element.

[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]

class This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use.
contenteditable This attribute specifies whether the user can edit the content or not.
  • true
  • false
contextmenu The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM.
dir Specifies the direction of the text.
Value Description
ltr Specifies that the text should read left to right.
rtl The text should read right to left.
auto The text direction should be determined programatically using the contents of the element.
draggable Specifies whether the user is allowed to drag this element or not.
  • true
  • false
  • auto
Value Description
true This value specifies that the element is draggable.
false A false value specifies that the element is not draggable.
auto Uses the default behavior of the user agent/browser. This is the default value.
dropzone The dropzone attribute specifies what should happen when the user «drops» an element (i.e. after dragging it) onto this element.

Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.

Value Description
copy Results in a copy of the dragged data. Default value.
move Results in the data being moved to the new location.
link Results in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string » string: « Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string » file: « Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone=»copy file:image/png file:image/gif file:image/jpeg»

Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

hidden Indicates that this particular element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either hidden or h ).

  • [Empty string]
  • hidden
id The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
itemid The itemid provides a global identifier for an «item». This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.

The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary’s specification.

itemprop This attribute provides one or more properties to one or more «items».

Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token. Each token must be one of the following:

  • A valid URL that is an absolute URL, or
  • If the item is a typed item: a «defined property name» allowed in this situation according to the specification that defines the relevant types for the item, or
  • If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:).

Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.

itemref This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the «item». Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
itemscope HTML5 elements that have the itemscope attribute create a name-value pair called an «item». Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope=»itemscope» ).

  • [Empty string]
  • itemscope
itemtype This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute’s value must have at least one token.

The itemtype attribute must only be present in elements that include the itemscope attribute.

lang Sets the language code to be used.

[Must be a valid RFC 3066 language code, or an empty string.]

spellcheck Specifies whether the element should have its spelling checked.
Value Description
[Empty string] The element should have its spelling checked.
true The element should have its spelling checked.
false The element should not have its spelling checked.

If this attribute is missing, the element will use the default behavior, possibly based on the parent’s own spellcheck state.


style Specifies inline styles for this element. This allows you to define the styles within the page, and within this tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
tabindex Helps determine the tabbing order for this element (for when the user uses the «tab» key on their keyboard to «tab» through the elements on the page in order to select an element).

[Any valid integer. For example, 0, 1, 2, 3, . etc]

title Specifies a title to associate with this particular element. Many browsers will display this when the cursor hovers over the element (similar to a «tool tip»).

[Any text to be displayed as a «tool tip».]

translate Determines whether the element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The translate attribute is an enumerated attribute and may contain the following possible values:

If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.

Event Handler Content Attributes

The tag also accepts the event handler content attributes listed below.

An event handler content attribute is an attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler.

Event handlers are commonly used to extend the functionality of an HTML element. By using any of the event handler content attributes below, you can tell the browser to run a specific script and when to run it. For example, by using onclick=»» , you tell the browser to run a piece of JavaScript whenever someone clicks on the element. The JavaScript needs to be inserted between the double quotes. This is typically a small piece of JavaScript that simply calls a JavaScript function that has been defined elsewhere.

Here are the event handler content attributes that can be used with the element.

Attribute Description
onabort Invoked when an event has been aborted. For example, the browser stops fetching media data before it is completely downloaded.
onblur User has left the focus of the element.
oncancel cancel event handler.
oncanplay Invoked when the browser/user agent can start playing media, but hasn’t yet, due to buffering. In other words, if playback were to begin now, it wouldn’t play right to the end (due to the current playback rate) — it would need to pause during playback in order to load the rest of the media.
oncanplaythrough The browser/user agent estimates that if playback were to begin now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
onchange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere).
onclick Invoked when the user clicked on the object.
onclose close event handler.
oncontextmenu Invoked when a context menu has been triggered.
oncuechange cuechange event handler.
ondblclick Invoked when the user clicked twice on the object.
ondrag Invoked when an element is being dragged.
ondragend Invoked when an element has stopped being dragged.
ondragenter Invoked when an element has been dragged to a drop target.
ondragexit dragexit event handler.
ondragleave Invoked when an element leaves a valid drop target.
ondragover Invoked when an element is being dragged over a valid drop target.
ondragstart Invoked when a drag operation has started.
ondrop Invoked when an element is being dropped.
ondurationchange Invoked when the length of the media is changed (i.e. the duration attribute has just been updated).
onemptied Invoked when a media resource element suddenly becomes empty (for example, due to a network error).
onended Invoked when the media has reached the end.
onerror Invoked when an error occurs while the element is being loaded. Also handler for script error notifications.
onfocus Invoked when the focus is on the element.
oninput input event handler.
oninvalid invalid event handler.
onkeydown Invoked when a key was pressed over an element.
onkeypress Invoked when a key was pressed over an element then released.
onkeyup Invoked when a key was released over an element.
onload The element has loaded.
onloadeddata Invoked when the browser/user agent can render the media data at the current playback position for the first time.
onloadedmetadata Invoked when the browser/user agent has just determined the duration and dimensions of the media resource.
onloadstart Invoked when the browser/user agent has started loading the media resource.
onmousedown The cursor moved over the object and mouse/pointing device was pressed down.
onmousemove The cursor moved while hovering over an object.
onmouseout The cursor moved off the object
onmouseover The cursor moved over the object (i.e. user hovers the mouse over the object).
onmouseup The mouse/pointing device was released after being pressed down.
onmousewheel Invoked when the mouse wheel is being rotated.
onpause Invoked when the media resource has been paused.
onplay Invoked when the media resource starts playback.
onplaying Playback has begun.
onprogress The browser/user agent is fetching media data the.
onratechange Invoked when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated).
onreset reset event handler.
onresize resize event handler.
onscroll scroll event handler. Invoked when the element’s scrollbar is being scrolled.
onseeked Invoked when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true)
onseeking Invoked when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
onselect Invoked when some or all of the contents of an object is selected. For example, the user selected some text within a text field.
onshow show event handler.
onstalled Invoked when the browser/user agent is trying to fetch media data but the data has stalled (i.e. the data has stopped coming).
onsubmit User submitted a form.
onsuspend The browser/user agent is (intentionally) not currently fetching media data, but has not yet downloaded the entire media resource (i.e. it has suspended the download).
ontimeupdate Invoked when the media’s current playback position changed.
onvolumechange Invoked when either the volume attribute or the muted attribute has changed.
onwaiting The next frame of the media is not yet available (but the browser/user agent expects it to become available).

More Information About the Element

Content Categories None.
Can be used As a child of a element or an element.
Content model Phrasing content.
End Tag Required? End tag may be omitted if the element is immediately followed by an , or , or if there is no more content in the parent element.
DOM Interface HTMLElement

Specifications for the Tag

Here is the element defined in the various specifications:

HTML5 Doctor

Helping you implement HTML5 today

The ruby element and her hawt friends, rt and rp

Ruby text is a short annotation for some base text. It’s typically used to give pronunciation guidance in a phonetic script for kanji in Chinese, Japanese, and Korean (CJK ) languages. It’s named after an old printers’ term for the very small size of 5.5 points.

The ruby element allows spans of phrasing content to be marked with ruby annotations.

As the name implies, ruby text is small , displayed by default above the base text in horizontal text and to the right in vertical text. Browsers without support put the ruby text inline after the base text.

These are the elements used in creating ruby text in HTML 5:

  • — an inline element that contains base text with ruby annotations
  • — ruby text, coming after the base text it defines
  • — ruby parentheses, an element used to wrap opening and closing parentheses around ruby text. These are for user agents that don’t support ruby text, so that it makes sense when displayed inline. Browsers that support hide via .

Examples

If you’ve never seen ruby in action you’re probably wondering what I’m talking about, so here are some examples:

Furigana ruby text in the Japanese manga Vagabond Snippet of a Taiwanese newspaper for students, with bopomofo ruby Korean hangul followed by hanja in an editorial on Chosun.com

Browser support

As is often the way with internationalisation features, browser support is — well, sparse. In a break from your expectations, Internet Explorer has supported since IE 5 — three years before the actual 2001 W3C Ruby Annotation specification! While this specification was incorporated into XHTML 1.1, no browser ever implemented it.

On the styling side, there’s the W3C CSS 3 Ruby Module (2003). It’s based on Ruby Annotation’s ‘complex ruby’ and is being updated for HTML 5 . Because of this, it’s also yet to be implemented beyond the default IE -level formatting. Ruby text will be used in combination with the W3C CSS Text Layout Module Level 3 properties direction , block-flow , and writing-mode for alternative text flow (such as vertical text), but again these have .

Summary of browser support for display & styling in the five main browsers

Browser Basic writing-mode ‘Complex ’ CSS 3 Ruby (2003)
Internet Explorer IE 5.5+ IE 6+*
Firefox (via plugin) (via plugin)
Chrome Chrome5+
Safari Safari5+
Opera

CSS we can use

If you want to de-emphasise the ruby text when it’s displayed inline in non-supporting browsers, you could do this via setting the size of and , as IE and Webkit do:


You can also move ruby text and parentheses to after the base text, mimicking non-supporting browser rendering on supporting browsers:

Finally, if you’re brave/foolish, you can implement ruby display yourself via CSS inline-table (CSS with explanation and demonstration (Hiragana.jp)). Note that this currently doesn’t work in Chrome because of a bug with display:inline-table on (fixed in trunk), and as you’ll probably need per-browser style tweaks, I recommend against it.

Code samples and output

in Japanese — furigana and rōmaji

Using without

Using with

Nested for multiple ruby texts

Japanese glossary

Furigana is the name given to using hiragana phonetic script beside words written in kanji to aid reading. It’s used extensively in education for learners of Japanese, and in reading material for children. It’s also sometimes used when writing kanji a literate adult may not be able to read.

Rōmaji is the romanisation of Japanese into the latin alphabet. Rōmaji is generally used for those who don’t know Japanese, especially in signage and tourism information.

in Chinese — Pīnyīn and zhùyīn fúhào ( bopomofo)

Ruby is used to some extent in China ( pīnyīn), and more so in Taiwan ( zhùyīn fúhào), especially in textbooks and signage.

Pīnyīn

Zhùyīn fúhào

Chinese glossary

Pīnyīn is a romanised phonetic system for Chinese, generally written above or after the word. Bopomofo ( Zhùyīn fúhào) is a phonetic script for transcribing Chinese, especially Mandarin. It is generally written (in both horizontal and vertical scripts) vertically to the right of each hanzi character.

Korean ruby

While the use of hanja (kanji) is decreasing in South Korea, they are still used for disambiguation and proper names.

Current Korean ruby use is to have the hangul coming before the hanja in parentheses (the opposite way from the default fallback style). For styling use: rt, rp . This formatting is also used when foreign words such as English are included in Korean text.

Korean glossary

Hangul is the Korean script, and hanja is Korean for Chinese characters. Traditionally written Korean used hanja, but now it’s mainly used in academic texts and occasionally for disambiguation.

Using for English

Not everyone is using East Asian languages, but any short annotation is (theoretically) applicable. While English doesn’t typically have pronunciation guidance, phonetic annotations are used in dictionaries:

Using ruby text for a dictionary definition by displaying the ruby text inline after the base text

: to use or not to use

The main use case of is marking up pronunciation in Asian writing, such as bopomofo for traditional Chinese and furigana for Japanese. I don’t know whether Arabic diacritics like Taškīl, Hebrew Niqqud, or other non-CJK languages would use for marking up phonetic annotations or diacritics. The WHATWG specification says:

Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations

To further muddy the waters, the 2001 W3 Ruby specification included an abbreviated word marked up with a visible definition via , and a use-by date where the day, month, and year are added via . These uses seem like presentational hacks to me, and while they’re not forbidden, the lack of such examples in HTML 5 indicate they’re not exactly blessed either ;-)

In conclusion…

Further reading

  • Ruby rendering in Webkit announcement on the Safari weblog
  • element in words of one syllable or less»>The HTML 5 element in words of one syllable or less by the unstoppable Daniel Davis of Opera

Feedback please!


So what do you think of and friends? Let us know in the comments! If you know about the use of annotations like this in other languages, or have used , tell us about it too!

Category

Oli Studholme

This article was written by Oli Studholme . He works as a developer for Information Architects, Inc. in Tokyo, Japan. He wrote “Beginning HTML5 and CSS3—The Web Evolved” (Apress) with Rich Clark, Divya Manian, and Christopher Murphy. He also writes at oli.jp and tweets as @boblet. 宜しくね!^^

32 Responses on the article “The ruby element and her hawt friends, rt and rp”

[…] This post was mentioned on Twitter by bruce lawson, 윤석찬(Channy Yun), Rich_Clark, Oli Studholme, html5 gallery and others. html5 gallery said: Ruby, rt & rp in #html5 from our friends over @html5doctor http://html5doctor.com/ruby-rt-rp-element/ […]

Dear HTML5 book writers, you’re welcome ;-)

[…] This post was mentioned on Twitter by Ânderson Quadros. Ânderson Quadros said: Ruby & HTML5: http://bit.ly/dB8kN8 #ruby #html5 (via @html5doctor) […]

In case anyone else was wondering.. I had to know why it’s called ruby

In British typography, ruby was originally the name for type with a height of 5.5 points, used for interlinear annotations in printed documents. In Japanese, rather than referring to the name of a font size, the word came to refer to typeset furigana. When transliterated back into English, the word was rendered in some texts as “rubi” (the typical romanization of the Japanese word ルビ). However, the spelling “ruby” has become more common since a W3C recommendation for ruby markup was published.

This is brilliant. I’ve been playing around with various incarnations of Ruby text in browsers for years, from firefox plugins and horrible hackish CSS to javascript based nastiness which always seemed to go firmly against the grain of producing nice, clean, readable code. You wouldn’t believe how badly this has been needed for a very long time. Lets hope the browser vendors jump on this in an official manner, and that we can start presenting furigana properly and usefully before too long.

As an aside, I have long believed that the dominance of flash in Japanese web design has been largely down to the sub-standard provisions made for the Japanese language in HTML. Maybe this is indicative of a shift in that policy, and in turn will perhaps help makers of Japanese language websites to ween themselves off of the flash stuff a little.

Can it be used to markup guitar chords over lyrics?

Правильная структура страницы на HTML5, новые семантические теги

С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5 появились новые семантические теги, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?

Раньше страницу можно было верстать любым способом, например, простым размещением блоков div. В таком случае семантическое значение вычислялось поисковиками и другими сервисами при помощи классов и идентификаторов. Сейчас же эту проблему решают новейшие теги. Кроме семантики, теги помогают построить внешний вид современного веб-приложения или сайта более совершенно.

Согласно спецификации HTML5, каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:

  • Мета,
  • Заголовочное,
  • Текстовое,
  • Потоковое,
  • Секционное,
  • Встроенное,
  • Интерактивное.

Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.

Тег header (потоковое)

Данный тег позволяет группировать навигационные и вводные элементы. Можно размещать по желанию сколько нужно таких тегов или ни одного, в любой части страницы. Нельзя вкладывать в тег footer и address, а также в сам тег header.

Тег nav (потоковое, секционное)

Как видно из названия тега, служит для создания блока навигации, различных меню и блоков ссылок. Можно использовать несколько раз на странице.

Тег article (потоковое, секционное)

Тег предназначен для группирования статей на странице, его стоит применять если на одной странице размещено несколько статей, если же всего лишь одна статья, тогда можно не использовать данный тег.

Тег section (потоковое, секционное)

Тег предназначен для деления страницы на части и разделы, выделения определённых секций на странице. Например, можно сделать на одной странице секцию статей, секцию комментарий, секцию галереи и т.д.

Тег aside (потоковое, секционное)

Этот тег позволяет выделить какое-либо содержимое страницы в отдельную логическую часть, например, с его помощью можно сделать боковую колонку, как в книге.

Тег служит для создания футера на сайте, места в котором обычно размещается информация о сайте, копирайте и т.д. Можно использовать несколько раз на странице.

Тег address (потоковое)

Тег полезен для создания блока с адресной информацией, особенно важно для продвижения в поисковых системах. Содержимое в данном теге обычно выделяется браузерами курсивом.

Тег main (потоковое)


Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav.

Тег figure (потоковое, корневое)

Данный тег используется для выделения автономного контента, например, с его помощью можно сделать блок, содержащий фотографию и описание к ней.

Тег figcaption (-)

Тег является потомком тега figure и позволяет разместить описание или подпись, а также другую информацию к нужному элементу на странице.

Тег time (потоковое, текстовое)

Важный тег, который позволяет ввести дату и время. Это может быть полезно для поисковых систем, а также для пользователей. С появлением данного тега, стало возможным задавать дату в стандартных временных форматах.

Тег mark (потоковое, текстовое)

Тег позволяет выделить контент на странице цветом, как маркером на бумаге. Обычно это желтый цвет, но можно изменить цвет стилями.

Тег bdi (потоковое, текстовое)

Тег отделяет текст, который можно будет читать как слева направо, так и наоборот.

Тег wbr (потоковое, текстовое)

Тег-одиночка, позволяет задать место, где браузеру можно разорвать длинную строку.

Таким образом, новые теги позволяют эффективно производить разметку страницы, это крайне важно для поискового продвижения и для использования веб-страниц в различных сервисах.

в HTML

Typora only supports some script-based sharing code, and those contents/scripts will also be running in a sandbox iframe with no access to your local file and writing contents.

We could consider allowing users to config the “whitelist” for this kind in future updates.

No longer supported, you may try online file viewers instead, such as examples in https://gist.github.com/tzmartin/1cf85dc3d975f94cfddc04bc0dd399be.

Comments

Typora supports HTML comments, using syntax , e.g:

They are invisible when export/print.

Please use markdown syntax instead of original HTML tags, since the later one are easier to input, and also better supported by Typora.

MegaWeb.su как создать свой сайт через html

Информация как сделать и украсить сайт самому

Здравствуйте, Уважаемый посетитель нашего сайта!
Введите Ваши данные — Логин: и Пароль:

  • ГлавнаяПерейти на главную страницу
  • О сайтеИстория сайта MegaWeb.su
  • ЛитератураПодробные учебники по созданию сайтов
  • Необходимое ПОНеобходимые программы для сайтостроения

Краткий справочник XHTML тегов включая HTML5

Краткий справочник XHTML тегов включая HTML5 Спецификация HTML5 доступна с 25 Августа 2009 года на официальном сайте W3C.

HTML5 по сути является дополненным новыми элементами и атрибутами XHTML.

HTML5 предлагает более широкую функциональность и упрощает процесс создания интерактивных сайтов и web-приложений. Кроме этого, HTML5 содержит дополнительные элементы для внедрения в web-страницы мультимедийного контента.


HTML5 пока не получил статус рекомендации, а его новые теги, на данном этапе, распознаются только некоторыми свежими версиями браузеров, например, Firefox и Chrome.

Справочник составил для себя, может кому пригодится.

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Новые теги HTML5

Какие теги добавили в язык HTML5?

В язык HTML5 добавили множество новых тегов:

— теги семантически описывающие структуру страницы,
— теги описывающие новые технологии,
— теги обогащающие язык HTML.

Семантическое описание структуры страницы в HTML5

Новые теги в HTML5 — это теги, семантически описывающие структуру страницы, предназначены для того чтобы компьютерная программа (например поисковый робот) , смогла отличать основной контент, от остальных частей страницы: шапки, подвала, меню, сайдбара, повторяющихся (динамических) блоков и т.д. Также идёт семантическое разделение на уровне основного контента (текста старницы).

Семантика HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:

— теги обрамляющие элементы дизайна верхней части сайта, так называемая «шапка страницы». Также теги header можно использовать как верхнюю часть тега section .

— теги обрамляющие основное меню на сайте.

— теги обрамляющие нижнюю часть сайта, так называемый «подвал страницы», который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section , т.е. сами теги footer будут находиться между тегами section

— теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики) , то появится страница на которой будут ссылки с описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами section , а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.

Естественно, всё это пока находится лишь на уровне рекомендаций, и вы можете вставлять данные теги куда угодно, используя их вместо тегов

Семантика HTML5 на уровне текста

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

— текст находящийся между этими тегами становится «выделенным». Одно из предназначений тегов mark , обрамлять слова в тексте, которые например совпадают со словом введённым пользователем в поисковую строку.

— теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss , такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime , значением которого выступает дата и/или время в формате ISO.

— теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера) .

— теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера) , находятся между тегами details .

Дополнительные теги языка HTML5

Список новых тегов HTML5, обогощающих язык:

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

— теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

— тег должен находиться между тегами menu , используется при создании сценариев на JavaScript.

— между этими тегами помещают тег command .

— теги предназначены для вывода работы скрипта.

— теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

— теги обрамляют описание какого-либо объекта (например изображения) , находятся между тегами figure . .

— теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.

— теги предназначены для группировки заголовков h*

— тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

— теги обрамляют текст и аннотацию к нему.

— теги находятся между тегами ruby , предназначены для обрамления аннотации.

— теги предназначены для браузеров которые не поддерживают теги ruby .

— тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

Теги HTML5 описывающие новые технологии

В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

— теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений) .

— тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video .

— теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

Илон Маск рекомендует:  Модуль int_ffh asm
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL