Zum Inhalt springen

HTML <rtc>-Element

Das HTML <rtc>-Element wird verwendet, um ein oder mehrere <rt>-Elemente zu gruppieren, um semantische Annotationen für den Ruby-Basis-Text bereitzustellen. Es befindet sich innerhalb eines <ruby>-Containers zusammen mit <rb>-Elementen.

Ruby-Annotationen werden üblicherweise in der ostasiatischen Typografie verwendet. Während <rt>-Elemente typischerweise Aussprachehinweise liefern, gruppieren <rtc>-Elemente diese Annotationen, um semantische Bedeutungen (wie Übersetzungen oder alternative Lesarten) hinzuzufügen, ohne das phonetische Layout zu beeinflussen.

Hinweis: Die <rtc>- und <rbc>-Elemente sind in HTML5.1+ veraltet und wurden aus dem HTML Living Standard entfernt. Sie werden nur zur Abwärtskompatibilität beibehalten. Verwenden Sie für die moderne Webentwicklung stattdessen CSS ruby-Eigenschaften.

Das <rtc>-Tag ist eines der HTML5-Elemente.

Syntax

Das <rtc>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<rtc>) und dem schließenden (</rtc>)-Tag geschrieben. Das schließende Tag des <rtc>-Elements kann weggelassen werden, wenn es unmittelbar von <rb>, <rt>, <rp> oder <rtc> gefolgt wird oder wenn das übergeordnete Element keinen Inhalt enthält.

Beispiel für das HTML <rtc>-Tag:

Warnung: Dieses Beispiel verwendet veraltete <rtc>- und <rbc>-Elemente. Es dient nur als Referenz für Legacy-Systeme.

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ruby>
      <rbc>
        <rb>旧</rb>
        <rt>jiù</rt>
        <rb>金</rb>
        <rt>jīn</rt>
        <rb>山</rb>
        <rt>shān</rt>
      </rbc>
      <rtc><rt>San Francisco</rt></rtc>
    </ruby>
  </body>
</html>

Ergebnis

HTMLrtc tag example

Das <rtc>-Tag unterstützt die Globalen Attribute und Ereignisattribute.

Browser-Unterstützung

BrowserUnterstützung
ChromeLegacy
FirefoxLegacy
SafariLegacy
EdgeLegacy
OperaLegacy

Hinweis: Die Unterstützung ist Legacy, da <rtc> und <rbc> in HTML5.1+ veraltet sind. Moderne Browser können diese Elemente ignorieren oder inkonsistent rendern. Verwenden Sie für aktuelle Projekte CSS ruby-Eigenschaften.

Praxis

@media (min-width: 962px) { .responsive-image{ width: 420px;}}

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.