Textbezogene Tags

Dieser Artikel erklärt textbezogene Tags.

Die Erklärung ist in semantische und nicht-semantische Tags unterteilt.

YouTube Video

CSS zur Vorschau erstellen

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Grundlegende textbezogene Tags

<div>-Tag

1<div>This is a division of content.</div>

• Das <div>-Tag ist ein Blockelement, das verwendet wird, um Unterteilungen in HTML zu erstellen.

• Das <div>-Tag ist ein nicht-semantisches Tag.

  Beim Fokussieren auf semantisches HTML können sinnvolle Tags (wie <section>, <article>) verwendet werden. Dies hilft Suchmaschinen und Screenreadern, den Inhalt der Seite besser zu verstehen.

• Durch die Kombination mit CSS und JavaScript können Sie das Aussehen und Verhalten der Seite steuern.

  Das <div>-Tag wird verwendet, um Inhalte auf einer Seite als Block-Element zu gruppieren. Es wird hauptsächlich in Kombination mit CSS und JavaScript verwendet, um das Seitenlayout und den Stil anzupassen sowie Elemente zu manipulieren.

<p>-Tag

1<p>This is a paragraph of text.</p>

• Das <p>-Tag ist ein Element, das verwendet wird, um einen Absatz in HTML zu definieren. Das <p> steht für einen Absatz und wird hauptsächlich verwendet, um Text zu gruppieren und anzuzeigen. Es hilft, den Inhalt leichter lesbar zu machen, indem es Textabschnitte visuell trennt.
• Sie können keine anderen Block-Elemente wie ein weiteres <p>-Tag oder ein <div>-Tag innerhalb eines <p>-Tags platzieren. Dies ist durch die HTML-Spezifikation verboten. Wenn Sie dies tun, wird der Browser das Tag automatisch schließen, und es wird nicht korrekt angezeigt.

<a>-Tag

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• Das <a>-Tag wird verwendet, um Links zu erstellen.

  Das <a>-Tag wird verwendet, um Links zu anderen Seiten, externen Websites oder Dateien zu erstellen. Das href-Attribut wird verwendet, um das Ziel des Links anzugeben.

• Es kann für Text- oder Bild-Links verwendet werden, und durch die Verwendung von target="_blank" wird der Link in einem neuen Tab geöffnet.

• Das target-Attribut wird verwendet, um festzulegen, wie das verlinkte Ziel angezeigt wird.

  • _self (Standard): Öffnet den Link im aktuellen Fenster oder Tab.
  • _blank: Öffnet den Link in einem neuen Fenster oder Tab.
  • _parent: Öffnet den Link im übergeordneten Frame.
  • _top: Öffnet den Link im gesamten Fenster, wobei Rahmen ignoriert werden.

• Das title-Attribut wird verwendet, um einen Tooltip bei einem Link anzuzeigen. Wenn ein Benutzer über den Link fährt, wird der angegebene Titel angezeigt.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• Das <a>-Tag wird auch verwendet, um zu bestimmten Stellen innerhalb derselben Seite zu springen. Um dies zu erreichen, setzen Sie ein id-Attribut auf das Ziel-Element und verwenden diese id im href-Attribut des Links.

<span>-Tag

1Here is some <span style="color: red;">highlighted text

• Der <span>-Tag ist ein Inline-Element.

  Das <span>-Tag ist ein Inline-Element, daher bricht es die Zeile nicht, wenn es zwischen Text, Links, Bildern oder anderen Inline-Elementen verwendet wird. Es fügt sich natürlich in den Fluss der Seite ein.

• Man kann spezifische Stile teilweise anwenden.

  Wenn Sie einen Stil nur auf einen Teil des Dokuments anwenden möchten, können Sie das <span>-Tag verwenden, um eine CSS-Klasse oder -ID zuzuweisen und Stile auf einen bestimmten Bereich anzuwenden.

• Der <span>-Tag ist ein nicht-semantisches Element.

  Da das <span>-Tag keine spezifische Bedeutung oder strukturelle Rolle hat, wird es ausschließlich für Styling- oder Skriptzwecke verwendet. Wenn semantische Hervorhebung erforderlich ist, ist es angemessener, semantische Tags wie <strong> oder <em> zu verwenden, die später eingeführt werden.

<br>-Tag

1Here is some text with a <br> line break.

• Der <br>-Tag ist ein Inline-Element.

  Da das <br>-Tag ein Inline-Element ist, nimmt es nicht den gesamten Block ein und erzeugt an der Stelle, an der es platziert wird, einen Zeilenumbruch im Text. Während das <p>-Tag oben und unten einen Abstand hinzufügt, um Absätze zu trennen, erzeugt das <br>-Tag einen Zeilenumbruch, ohne einen Abstand hinzuzufügen.

• Es ist ein selbstschließender Tag, daher ist ein Schlusstag (</br>) nicht nötig.

• Es ist am besten, es nicht übermäßig zu verwenden, und <p>-Tags oder CSS für Absatzumbrüche oder Layoutanpassungen zu nutzen.

  Beim Organisieren von Text in Absätze ist es geeigneter, das <p>-Tag zu verwenden. Es wird auch empfohlen, CSS für Layoutanpassungen zu verwenden. Zum Beispiel kann die Verwendung der white-space-Eigenschaft in CSS Zeilenumbrüche und Leerzeichen im Text so anzeigen, wie sie erscheinen.

<hr>-Tag

1This is some text.<hr>This is another section of text.

• Das <hr>-Tag ist ein Blockelement.

  Das <hr>-Tag wird verwendet, um eine horizontale Linie einzufügen, die Abschnitte von Inhalten visuell trennt. Es kann auch verwendet werden, um einen thematischen Bruch zu signalisieren und ihm kontextabhängig Bedeutung zu geben.

• Es ist ein selbstschließendes Tag, daher ist ein Schlusstag (</hr>) nicht notwendig.

• Sie können seine Farbe, Länge und Dicke mithilfe von CSS anpassen.

Semantische textbezogene Tags

Von <h1>-Tag bis <h6>-Tag

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• Die Tags <h1> bis <h6> sind Überschriftstags, die in HTML verwendet werden.

  Das <h1>-Tag repräsentiert die wichtigste Überschrift und wird typischerweise als Haupttitel der gesamten Seite verwendet. Es ist üblich, pro HTML-Dokument nur ein <h1>-Tag zu verwenden.

  Der <h2>-Tag ist die nächstwichtigste Überschrift nach <h1> und wird für Abschnitts- oder Kapitelüberschriften innerhalb der Seite verwendet.

  Das <h3>-Tag repräsentiert Untertitel oder kleinere Abschnitte unterhalb von <h2>.

  Die Tags <h4>, <h5> und <h6> repräsentieren Überschriften niedrigerer Ebene und werden für detailliertere Punkte oder Abschnittstitel verwendet.

• Überschriften-Tags zeigen die Wichtigkeit von Texten an und helfen, die logische Struktur einer Seite zu gestalten. Suchmaschinen verwenden ebenfalls Überschriften-Tags, um den Inhalt der Seite zu verstehen.

<strong>-Tag

1<strong>Important text</strong> to emphasize significance.

• Das <strong>-Tag ist ein HTML-Tag, das verwendet wird, um die Wichtigkeit oder Betonung von Text anzuzeigen, und wird normalerweise fett dargestellt.

• Das <strong>-Tag ist ein semantisches Tag, und sein Hauptzweck besteht darin, Bedeutung hinzuzufügen.

  Es kann anzeigen, dass der Text kontextuell wichtig ist. Zum Beispiel kann es die Wichtigkeit des Textes für Suchmaschinen anzeigen, was es für SEO nützlich macht. Es vermittelt auch die Wichtigkeit des Textes an Benutzer, die Bildschirmleser verwenden. Andererseits ist das <b>-Tag, das später eingeführt wird, einfach ein Tag, um Text fett zu machen, und bietet keine semantische Betonung.

<em>-Tag

1<em>Emphasized text</em> for italics and emphasis.

• Das <em>-Tag ist ein HTML-Tag, das verwendet wird, um Wichtigkeit oder Betonung im Text anzuzeigen, und wird normalerweise kursiv dargestellt.

• Das <em>-Tag ist ein semantisches Tag, und sein Hauptzweck besteht darin, Bedeutung zu vermitteln.

  Wie das <strong>-Tag kann es anzeigen, dass der Text kontextuell wichtig ist. Das <strong>-Tag wird normalerweise fett angezeigt, während das <em>-Tag typischerweise kursiv dargestellt wird. Beide werden von Bildschirmlesern und Suchmaschinen zur semantischen Betonung erkannt, aber <strong> zeigt eine stärkere Wichtigkeit an, während <em> eine emotionale Betonung vermittelt. Zusätzlich wird das <i>-Tag, das später eingeführt wird, einfach den Text kursiv darstellen und bietet keine semantische Betonung.

<mark>-Tag

1<mark>Highlighted text</mark> for attention.

• Das <mark>-Tag wird verwendet, um anzuzeigen, dass bestimmter Text kontextuell wichtig ist. Es ist nützlich, um Suchergebnisse oder Schlüsselpunkte hervorzuheben.
• Standardmäßig wird Text, der im <mark>-Tag eingeschlossen ist, mit einem gelben Hintergrund angezeigt, was seine Wichtigkeit optisch hervorhebt.

<del>-Tag

1<del>Deleted text</del> shows removed content.

• Das <del>-Tag wird verwendet, um anzuzeigen, dass Text gelöscht oder geändert wurde. Dieses Tag ist nützlich, um den Verlauf von Änderungen oder Überarbeitungen von Text anzuzeigen.

• Text, der in das <del>-Tag eingeschlossen ist, wird normalerweise mit einem Durchstrich dargestellt. Dies zeigt visuell den gelöschten Inhalt an.

  Text, der in das <del>-Tag eingeschlossen ist, wird auch von Bildschirmlesern als gelöscht erkannt. Dadurch kann Inhalt, der visuell nicht erkennbar ist, dennoch verstanden werden.

<ins>-Tag

1<ins>Inserted text</ins> shows added content.

• Das <ins>-Tag wird verwendet, um neu hinzugefügten oder geänderten Text in einem Dokument anzuzeigen. Dieses Tag ist nützlich, um die Historie von Texthinzufügungen oder -überarbeitungen anzuzeigen.

• In Browsern wird Text, der im <ins>-Tag eingeschlossen ist, typischerweise mit einer Unterstreichung angezeigt. Dies zeigt visuell hinzugefügten Inhalt an.

  Text, der im <ins>-Tag eingeschlossen ist, wird auch von Bildschirmlesegeräten als neu hinzugefügt erkannt. Dadurch kann Inhalt, der visuell nicht erkennbar ist, dennoch verstanden werden.

<abbr>-Tag

1<abbr title="World Health Organization">WHO</abbr>

• Das <abbr>-Tag ist ein Inline-Element, das Abkürzungen oder Akronyme anzeigt. Die Verwendung dieses Tags bietet die vollständige Bedeutung von Abkürzungen und trägt zur Verbesserung von SEO und Zugänglichkeit bei. Es hilft insbesondere Lesern, die mit der Abkürzung nicht vertraut sind, und Benutzern von Bildschirmlesegeräten, den Inhalt besser zu verstehen.

Tags für Textdekorationen

<b>-Tag

1<b>Bold text</b> without semantic emphasis.

• Das <b>-Tag ist ein Inline-Element, das Text fett darstellt. Wie die anderen Tags, die wir vorstellen werden, wird es zur visuellen Hervorhebung und nicht zur semantischen Hervorhebung verwendet.

<i>-Tag

1<i>Italic text</i> for style.

• Das <i>-Tag ist ein Inline-Element, das Text kursiv darstellt.

<u>-Tag

1<u>Underlined text</u> for decoration.

• Das <u>-Tag ist ein Inline-Element, das Text unterstreicht.

<small>-Tag

1<small>This is small text.</small>

• Das <small>-Tag ist ein Inline-Element, das verwendet wird, um Text in einer kleineren Größe darzustellen. Es wird häufig verwendet, um zusätzliche Informationen oder Anmerkungen darzustellen, die dem Hauptinhalt untergeordnet sind.

<s>-Tag

1<s>Strikethrough text</s>

• Das <s>-Tag ist ein Inline-Element, das eine Durchstreichlinie auf Text zieht.

<sub>-Tag

1H<sub>2</sub>O

• Das <sub>-Tag ist ein Inline-Element, das verwendet wird, um tiefgestellten Text darzustellen.

<sup>-Tag

1E = mc<sup>2</sup>

• Das <sup>-Tag ist ein Inline-Element, das verwendet wird, um hochgestellten Text darzustellen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video