W3docs
de
Anmelden

HTML <blink>-Tag

Blink is a deprecated HTML tag. It was used in the HTML document to make text flash. To attain the blinking effect, you can also use CSS styles or Javascript. See examples.

Das <blink>-Tag war ein HTML-Element, das zum Erstellen von blinkendem Text auf einer Webseite verwendet wurde. Dieses Tag wurde in HTML 4.0 als veraltet markiert und wird von modernen Browsern nicht mehr unterstützt. Es wurde weithin als schlechte Designentscheidung angesehen und war oft mit einer schlechten Benutzererfahrung verbunden.

Da das <blink>-Tag nicht mehr verwendet wird, empfiehlt es sich, ähnliche Effekte mit CSS oder JavaScript zu erzielen. Beachten Sie jedoch, dass blinkender oder sich schnell ändernder Inhalt für Benutzer ärgerlich oder ablenkend sein kann und möglicherweise nicht den Richtlinien für Barrierefreiheit entspricht.

HTML blink tag

danger

Das <blink> ist ein veraltetes HTML-Tag. Obwohl einige Browser <blink> möglicherweise noch unterstützen, wird die Unterstützung schrittweise eingestellt. Verwenden Sie dieses Element nicht, da Ihre Seiten sonst beschädigt werden könnten. Verwenden Sie stattdessen CSS und JavaScript, um einen Blink-Effekt zu erstellen.

Beispiel für das HTML <blink>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      blink {
        color: #1c87c9;
        font-size: 20px;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>The &lt;blink&gt; Element </h1>
    <blink>The &lt;blink&gt; element is deprecated. To attain blinking effect you should use CSS or JavaScript. See examples in the next section.</blink>
  </body>
</html>
Probier es selbst »

Eine weitere Möglichkeit, den Blink-Effekt zu erzielen, ist die Verwendung von CSS3-Animationen in Kombination mit der @keyframes-Regel.

Beispiel für Blink-Effekt mit CSS-Animation

<!DOCTYPE html>
<html>
<head>
<style>
  .blink {
    animation: blinker 1s linear infinite;
  }

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
</style>
</head>
<body>

<h1 class="blink">Blinking Text Example</h1>

</body>
</html>
Probier es selbst »

danger

Der Schlüsselwort blink der Eigenschaft text-decoration ist jedoch nicht Teil der CSS-Spezifikation und wird auf den meisten Browsern nicht unterstützt.

Eine Alternative, um den Blink-Effekt zu erzielen, ist die Verwendung des Schlüsselworts blink der CSS-Eigenschaft text-decoration.

Beispiel für Blink-Effekt mit der CSS-Eigenschaft text-decoration:

Beispiel für Blink-Effekt erstellt mit text-decoration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blink {
        text-decoration: blink;
        color: #1c87c9;
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <p class="blink">This text may blink depending on the browser you use.</p>
  </body>
</html>
Probier es selbst »

Sie können auch Skripte verwenden, um das Element blinken zu lassen.

Beispiel für Blinken mit JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blink {
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
        color: #1c87c9;
        transition: 0.4s;
      }
    </style>
  </head>
  <body>
    <p id="blink">Blinking Effect with JavaScript</p>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function() {
        var blink = document.getElementById('blink');
        setInterval(function() {
          blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
        }, 1000);
      });
    </script>
  </body>
</html>
Probier es selbst »

Practice

Übung

Was ist das Verhalten und der Status des HTML &lt;blink&gt; Tags?