Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

In diesem Abschnitt findest du eine praxisorientierte HTML-Anleitung von der zielführenden Auszeichnung bis zur eleganten Handhabung von CSS-Klassen. Wir führen dich durch wesentliche Schritte, um sicherzustellen, dass dein HTML-Code fehlerfrei und effektiv strukturiert ist. HTML in WordPress – eine solide Grundlage für die Verwendung.

HTML, oder Hypertext Markup Language

HTML, oder Hypertext Markup Language, ist die Grundlage des World Wide Web. Es ist eine Auszeichnungssprache, die verwendet wird, um den strukturellen Inhalt von Webseiten zu definieren. Tim Berners-Lee entwickelte HTML in den frühen 1990er Jahren am CERN, um ein standardisiertes Format für den Austausch von Informationen über das World Wide Web zu schaffen und somit ermöglicht HTML die Erstellung von verlinkten Dokumenten. Seitdem hat HTML eine zentrale Rolle in der Entwicklung des Internets gespielt.

HTML richtig anwenden

HTML richtig anwenden und optimale Nutzung des WP-Editors.

• Falsch verschachteltes XHTML automatisch korrigieren:
  • Gehe zum WordPress-Dashboard.
  • Klicke auf "Einstellungen" und dann auf "Lesen".
  • Suche nach der Option "WordPress soll falsch verschachteltes XHTML automatisch korrigieren".
  • Stelle sicher, dass das Häkchen gesetzt ist. Das hilft, sicherzustellen, dass dein HTML-Code korrekt verschachtelt ist.
• Text-Editor verwenden:
  • Wenn spezielles HTML angewendet werden soll, ist der Text-Editor zu verwenden. Dazu klickt man oben rechts im Editor auf "Text". Hier ist der HTML-Code direkt einzugeben, ohne dass WordPress versucht, ihn zu verändern – es sei denn, er ist fehlerhaft.
• Absätze im WordPress-Editor:
  • Um zum nächsten Abschnitt zu wechseln, genügt es im WordPress-Editor, die Enter-Taste zu drücken. WordPress fügt automatisch <p>-Tags ein, um Absätze zu erstellen.
• HTML-Blöcke in Gutenberg:
  • Im Gutenberg-Editor werden HTML-Blöcke verwendet. Dafür fügt man einen HTML-Block ein und gibt den HTML-Code direkt dort ein.

Das automatische Korrigieren von XHTML-Fehlern in den Einstellungen ist besonders nützlich, um sicherzustellen, dass dein HTML-Code valide ist.

HTML-Start-Tags, Attribute und Werte

In HTML wird der Inhalt einer Webseite mithilfe von sogenannten Tags strukturiert. Jeder Tag hat eine bestimmte Funktion und wird durch spitze Klammern dargestellt. Die vollständige Auszeichnung eines HTML-Elements beginnt mit dem Start-Tag, gefolgt von optionalen Attributen und deren Werten, und endet schließlich mit dem End-Tag.

1. Der Start-Tag ist ein grundlegendes Element in HTML, das den Beginn eines HTML-Elements markiert. Ein HTML-Element kann Attribute enthalten, die bestimmte Eigenschaften oder Verhaltensweisen definieren. Der Start-Tag wird durch spitze Klammern dargestellt und kann mehrere Attribute mit Attributwerten enthalten.
2. Ein Attribut ist eine zusätzliche Information, die einem HTML-Element hinzugefügt wird, um seine Eigenschaften oder Verhalten zu definieren. Attribute werden innerhalb des Start-Tags durch ein '=' getrennt und bestehen aus einem Namen und einem Wert.
3. Der Inhalt eines HTML-Elements folgt dem Start-Tag und kann Text, andere HTML-Elemente oder beides enthalten. Der Inhalt definiert, was innerhalb des Elements angezeigt oder ausgeführt wird. Nach dem Inhalt kommt der End-Tag, der das HTML-Element abschließt.

Beispiel:

Allgemeines Strukturbeispiel:
<elementname attribut="wert">Elementinhalt</elementname>

Anwendungsbeispiel:
<abbr title="Hypertext Markup Language">HTML</abbr>

Ein Anwendungsbeispiel ist das <abbr title="Hypertext Markup Language">HTML</abbr>–Element. Es besteht aus einem öffnenden <abbr>-Tag (Start-Tag), also <abbr> oder – vollständig – <abbr title="Hypertext Markup Language">, dem Elementinhalt 'HTML' sowie einem schließenden <abbr>-Tag (End-Tag), nämlich </abbr>. Zudem verfügt das <abbr>-Element bzw. sein Start-Tag über ein title-Attribut mit dem Attributswert 'Hypertext Markup Language'.

Es ist zu beachten, dass das title-Attribut optional ist und je nach Bedarf hinzugefügt werden kann. Die Umsetzung und Anzeige des title-Attributs auf Mobilgeräten kann variieren. Dies dient lediglich als Beispiel zur Einführung.

Elemente, Tags und Attribute – Syntax und Vokabular (ff.)

Tag <p> – Absatz

Der <p>-Tag wird verwendet, um Textabschnitte zu erstellen. Absätze im WordPress-Editor werden automatisch erstellt und normalerweise nicht dargestellt.

<p>Dies ist ein Absatz.</p>

Der <p>-Tag wird im Text-Editor nicht angezeigt, außer er wurde mit Attributen versehen.

Attribute style und class

HTML bietet die Möglichkeit, das Erscheinungsbild von Elementen zu gestalten und anzupassen. Zwei primäre Werkzeuge hierfür sind die Attribute style und class. Das style-Attribut ermöglicht die direkte Definition von Inline-Stilen für einzelne Elemente, während das class-Attribut die Anwendung vordefinierter Stile auf mehrere Elemente ermöglicht. Werfen wir einen detaillierten Blick darauf, wie diese Attribute effektiv genutzt werden können.

style-Attribut

Das style-Attribut wird verwendet, um Inline-Styling auf ein HTML-Element anzuwenden. Es ermöglicht die direkte Definition von Stilen für ein bestimmtes Element. Hier ist ein einfaches Beispiel, bei dem wir die Textfarbe auf Grün setzen:

<p style="color: green;">Dieser Text ist grün.</p>

Dieser Text ist grün.

Die style-Eigenschaft selbst ist eine Sammlung verschiedener Stile, getrennt durch Semikolons. Im Beispiel verwenden wir nur color, font-size und font-family, aber es könnten auch andere Stile wie text-align, line-height, margin, padding usw. hinzugefügt werden. Dies bietet eine flexible Möglichkeit, das Aussehen eines Elements zu steuern.

<p style="color: blue; font-size: 20px; font-family: 'courier new', courier, monospace;">Ein Beispiel mit mehreren Stilen.</p>

Ein Beispiel mit mehreren Stilen.

class-Attribut

Im Gegensatz dazu ist das class-Attribut ein separates Attribut, das verwendet wird, um eine oder mehrere CSS-Classen auf ein HTML-Element anzuwenden. Es ermöglicht die Anwendung von vordefinierten Stilen auf mehrere Elemente. Hier ist ein einfaches Beispiel:

<p class="blau-weiß">Dieser Text hat eine besondere Hervorhebung.</p>

.blau-weiss {
    text-align: center;
    padding: 15px;
    font-weight: 500;
    color: #fff;
    background-color: #273288;
}

Dieser Text hat eine besondere Hervorhebung.

Tag <span> – Inline-Element für Textauszeichnung

Der <span>-Tag wird dazu verwendet, Teile eines Textes zu markieren oder zu stylen. Ein <span>-Tag befindet sich innerhalb des <p>-Tags, der <p>-Tag wird jedoch im Editor nicht direkt angezeigt. Anders als der <p>-Tag erzeugt der <span>-Tag keinen eigenen Textabsatz und kann stattdessen verwendet werden, um spezielle Stile innerhalb eines fortlaufenden Textes zu kennzeichnen.

Ein <span style="color: blue;">blauer</span> Text.

Ein blauer Text.

Hier verwenden wir den <span>-Tag, um nur das Wort "blauer" in blauer Farbe darzustellen. Das Attribut, das wir hier verwenden, ist das style-Attribut, und sein Wert ist "color: blue;".

Anmerkung zum <span>-Tag und der Verwendung von Margins: Es ist zu beachten, dass die Verwendung von Margins auf das <span>-Tag möglicherweise nicht universell wirksam ist und von den spezifischen Eigenschaften des verwendeten Themes abhängen kann. In vielen Fällen wird empfohlen, für die präzise Steuerung von Abständen eher den <p>-Tag oder den <div>-Tag zu verwenden.

Die gezielte Kontrolle von Margins erfolgt in der Regel mithilfe von CSS, das entweder in einer separaten CSS-Datei oder inline mit dem style-Attribut definiert wird. Es kann sein, zusätzliche CSS-Stile, wie beispielsweise display: block;, anzuwenden, um die Ergebnisse zu erzielen. Diese Anpassungen können themespezifisch sein, daher ist es ratsam, die Dokumentation des verwendeten Themes zu konsultieren.

Beispiel hier des Themes müsste der span-Tag mit display: block; ausgezeichnet sein:

<span style="display: block; margin: -20px 0 100px;">Bspw. span-Tag und die margin-Eigenschaft.</span>

Bspw. span-Tag und die margin-Eigenschaft. margin-bottom: 100px; ↓

Hiermit Beispiel oberhalb von margin: -20px 0 100px; kommen wir kurz zum Abschnitt:

Bessere Lesbarkeit durch kürzere Schreibweisen in HTML und CSS

Bei der Auszeichnung von Eigenschaften wie padding oder margin gibt es für die Werte eine kürzere und prägnantere Schreibweise, die die Lesbarkeit des Codes verbessert. Anstatt mehrere Werte einzeln zu deklarieren, kann die Kurzform verwendet werden.

1. Ein Wert:

<!-- Statt -->
<div style="padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px;">Inhalt</div>

<!-- Verwende lieber -->
<div style="padding: 15px;">Inhalt</div>

In diesem Beispiel ist der einzige Wert im padding die gleichmäßige Anwendung auf alle vier Seiten (oben, rechts, unten, links). Wenn alle Seiten denselben Wert haben, ist es effizienter, diesen Wert nur einmal anzugeben.

2. Zwei Werte:

<!-- Statt -->
<div style="padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px;">Inhalt</div>

<!-- Verwende lieber -->
<div style="padding: 2px 5px;">Inhalt</div>

In der ursprünglichen CSS-Notation werden die Werte für jede Seite des Elements einzeln festgelegt. In der kürzeren Schreibweise wird die Reihenfolge im Uhrzeigersinn verwendet: top, right, bottom und left.

3. Drei Werte

<!-- Statt -->
<div style="padding-top: 15px; padding-right: 15px; padding-bottom: 0; padding-left: 15px;">Inhalt</div>

<!-- Verwende lieber -->
<div style="padding: 15px 15px 0;">Inhalt</div>

In diesem Beispiel sind die drei Werte in der verkürzten Schreibweise den oberen, rechten und linken padding-Wert, während der untere padding-Wert den Standardwert von 0 annimmt.

4. Vier Werte

<!-- Statt -->
<div style="padding-top: 10px; padding-right: 15px; padding-bottom: 5px; padding-left: 20px;">Inhalt</div>

<!-- Verwende lieber -->
<div style="padding: 10px 15px 5px 20px;">Inhalt</div>

In diesem Beispiel sind die verkürzte Schreibweise die padding-Werte in der Reihenfolge oben, rechts, unten und links. Jeder Wert entspricht einer Seite des Elements.

Die Verwendung dieser Kurzformen verbessert die Lesbarkeit und den Überblick über den Code, insbesondere wenn mehrere Eigenschaften deklariert werden.

Hinweis: Die Kurzformen sollten nur dann verwendet werden, wenn dies die Lesbarkeit verbessert und der Code dadurch nicht an Klarheit verliert. Bei komplexeren Layouts kann es sinnvoll sein, die ausführlichere Form zu wählen, um den Code besser zu dokumentieren.

Tag <div> – Container für Abschnitte

Der <div>-Tag wird verwendet, um Abschnitte oder Bereiche in einer Webseite zu erstellen.

Beispiel für einen <div>-Container mit einem Rahmen:

<div style="padding: 15px 15px 0 15px; margin-bottom: 25px; border: 2px solid #32959E; background-color: #e4f2f5;">
    <h4>Beispiel für einen div-Container mit Stilen</h4>
    <p>Dieser Text ist im <code>div</code>-Container, mit Rahmen, Innenabstand, Außenabstand und Hintergrundfarbe.</p>
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
    </ul>
</div>

Normalerweise wird das Obige den Rahmen mit CSS formatiert:

.mein-rahmen {
    padding: 15px 15px 0 15px;
    margin-bottom: 25px;
    border: 2px solid #32959e;
    background-color: #e4f2f5;
}

<div class="mein-rahmen">
  <h5>Beispiel für einen div-Container mit Stilen</h5>
Dieser Text ist im <code>div</code>-Container, mit Rahmen, Innenabstand, Außenabstand und Hintergrundfarbe.
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
  </ul>
</div>

Für weitere Informationen kann der Beitrag über HTML/CSS Rahmen in Layouts, konformen Attributen und Werten eingesehen werden.

Überschriften-Tags von <h1>, <h2>, usw.

Das Eingeben von Text und das Anwenden von Überschriftenformaten im Editor erzeugt automatisch entsprechende Überschriften-Tags.

<h1>Überschrift der ersten Ebene</h1>
Das ist der Titel eines Beitrags.
<h2>Überschrift der zweiten Ebene</h2>
Das ist die erste Überschrift im Contentbereich des Editors.

Überschrift der ersten Ebene

Die h1 Überschrift ist der Titel eines Beitrags. Bspw. wird das Aussehen themenspezifisch durch die Klasse .entry-title automatisch generiert.

Überschrift der zweiten Ebene

Die h2 Überschrift ist die erste Überschrift im Contentbereich des Editors. Beispielsweise wird das Aussehen themenspezifisch durch die Klasse .entry-content automatisch generiert.

Bezüglich entry-title und entry-content: Die Classe oder das Attribut entry-title oder entry-content ist Themenspezifisch. Es wird häufig von WordPress-Themes verwendet, um den Titel eines Beitrags oder einer Seite zu kennzeichnen und kann je nach Theme variieren. Um die genaue Struktur und Classen eines Themes zu überprüfen ist im Beitrag Browser-Entwicklertools oder in der Theme-Dokumentation zu sehen.

Logische und SEO*-orientierte Reihenfolge bei Überschriften

Das HTML-Dokument sollte richtig strukturiert werden, um die Lesbarkeit und Barrierefreiheit zu verbessern. Zum Beispiel sollten Überschriften verwendet werden, um die Abschnitte des Dokuments zu definieren, und nicht einfach nur größeren Text darzustellen.

Die Überschriften sollten in einer logischen Reihenfolge angeordnet werden, um dem Leser eine klare Übersicht zu geben und für SEO-Relevanz zu sorgen. Die erste Überschrift im Textinhalt sollte h2 sein, gefolgt von h3-Überschriften, die sich inhaltlich auf die h2-Überschrift beziehen. Es ist wichtig, dass die Überschriften miteinander kommunizieren und eine klare Hierarchie bilden. Die Reihenfolge sieht wie folgt aus:

• h1 ist der Titel des Themas (die Hauptüberschrift).
• h2 ist die erste Überschrift im Inhaltsbereich (Content).
• h3-Überschriften folgen einander entsprechend der Hierarchie des Inhalts und werden für passende Inhalte der h2-Überschrift verwendet. Ähnlich sollten h4-Überschriften passenden Inhalten der h3-Überschrift zugeordnet werden, usw.

* SEO heißt Suchmaschinen-Optimierung, in englisch search engine optimization (SEO). Webseiten deren Inhalte werden im organischen Suchmaschinenranking (Natural Listings) auf angemessenen Plätzen erscheinen –. So, die positive Erwartung des Anwenders.

Anmerkung zur obigen Trennlinie durch <hr />-Tag: Das <hr />-Tag ist ein nützliches Werkzeug, um den Inhalt in sinnvolle Abschnitte zu unterteilen und die Lesbarkeit zu verbessern. Es sollte jedoch mit Bedacht und in angemessener Weise eingesetzt werden.

Der <hr />-Tag eine nützliche Möglichkeit ist, um einen klaren visuellen Abschnittswechsel im Text zu markieren, wenn kein geeigneter Überschriftentag vorhanden ist oder verwendet werden soll. Dies kann dazu beitragen, den Text übersichtlicher zu gestalten und dem Leser eine klare Strukturierung des Inhalts zu vermitteln.

Allerdings ist zu beachten, dass das <hr />-Tag nicht immer erforderlich ist und nicht zu häufig verwendet werden sollte, um den Inhalt nicht unnötig zu unterbrechen.

Textformatierung mit dem Tag <strong> oder <b>

Beide Tags werden als Stilelemente für fetten Text verwendet, jedoch haben sie unterschiedliche semantische Bedeutungen.

Es ist korrekt, dass der <strong>-Tag für die Hervorhebung von wichtigen Inhalten verwendet wird, die für Leser und Suchmaschinen gleichermaßen relevant sind. Der <b>-Tag hingegen wird für die Hervorhebung von Text verwendet, der für den Leser interessant sein kann, aber nicht unbedingt für Suchmaschinen relevant ist.

Tag <strong>

• Semantik: Der <strong>-Tag verleiht dem Text semantische Bedeutung. Er betont, dass der darin enthaltene Text besonders wichtig oder stark hervorgehoben ist.
• SEO-Relevanz: Suchmaschinen können die Betonung durch <strong> als Hinweis darauf betrachten, dass dieser Textabschnitt besonders relevant oder wichtig ist.

Tag <b>

• Semantik: Der <b>-Tag wird lediglich für die visuelle Darstellung von fettgedrucktem Text verwendet, ohne eine spezifische semantische Bedeutung.
• SEO-Relevanz: Suchmaschinen interpretieren <b> als rein visuelle Formatierung, ohne besondere semantische Betonung.

Da moderne Suchmaschinen-Algorithmen immer intelligenter werden, wird der semantische Unterschied zwischen <strong> und <b> möglicherweise nicht mehr so stark berücksichtigt wie früher. Dennoch ist es eine bewährte Praxis, den <strong>-Tag zu verwenden, wenn eine semantische Betonung des Textes gewünscht ist.

<p>Das ist ein <strong>wichtiger</strong> Textabschnitt.</p>

<p>Das ist ein <b>fettgedruckter</b> Textabschnitt.</p>

Das ist ein wichtiger Textabschnitt.

Das ist ein fettgedruckter Textabschnitt.

In diesem Beispiel wird der Textabschnitt im <strong>-Tag als semantisch wichtig betrachtet, während der Text im <b>-Tag nur visuell fettgedruckt ist, ohne spezielle semantische Betonung. Es wird empfohlen, <strong> zu verwenden, wenn eine semantische Betonung beabsichtigt ist, um mögliche Vorteile für Barrierefreiheit und SEO zu nutzen.

Listenelemente mit den Tag <ul>, <ol> und <li>

Das Erstellen einer Liste im Editor generiert automatisch die geläufigsten Listenelement-Tags.

<ul>
    <li>Listenelement 1</li>
    <li>Listenelement 2</li>
</ul>

<ol>
    <li>Nummeriertes Element 1</li>
    <li>Nummeriertes Element 2</li>
</ol>

• Listenelement 1
• Listenelement 2

1. Nummeriertes Element 1
2. Nummeriertes Element 2

Für mehr Informationen kann der Beitrag Aufzählungszeichen, Abstände und Farbe per HTML/CSS eingesehen werden.

Links mit dem <a>-Tag und dem href-Attriut

Das Einfügen eines Links im Editor erzeugt automatisch ein <a>-Tag.

<a href="https://www.example.com" target="_blank">Link zu Beispiel</a>

Link zu Beispiel

Bilder mit dem <img>-Tag

Wenn ein Bild in den Editor einfügt wird, wird automatisch das <img>-Tag generiert.

<img src="bild.jpg" alt="Bildbeschreibung">

Beispiel mit Bildbeschreibung:

<figure class="aligncenter" style="width: 225px;">
  <img src="https:/../gipfel.svg" alt="Symbolbild einander Unterstützen" width="225" height="150" />
  <figcaption>SVG-Bild <a href="https://../führung-motivation/" target="_blank" rel="noopener">OpenClipart-Vectors</a></figcaption>
</figure>

SVG-Bild OpenClipart-Vectors

Konkret dem Beispiel Theme 'Twenty Fourteen' wird das folgend generiert (ohne Leerzeichen an den Innenklammern):

[ caption id="" align="aligncenter" width="225" ]
  <img src="https://../gipfel.svg"
       alt="Symbolbild einander Unterstützen" width="225" height="150" />
  SVG-Bild
  <a href="https://../führung-motivation/" target="_blank" rel="noopener">
    OpenClipart-Vectors
  </a>
[ /caption ]

Es zeigt, dass WordPress-Themes oft spezifische Strukturen für die Darstellung von Inhalten verwenden können, und das Twenty Fourteen-Theme nutzt offenbar den <caption>-Tag für Bildbeschreibungen.

Die Standards in der Webentwicklung können variieren, und Themes haben die Flexibilität, verschiedene HTML-Elemente je nach ihren Designpräferenzen zu verwenden. Wenn das Theme den <caption>-Tag für Bildbeschreibungen vorsieht, ist es in Ordnung, dies zu verwenden.

Das sind grundlegende Beispiele, wie HTML-Tags mit ihren Attributen und Werten im WordPress-Editor generiert werden. Beachte, dass das genaue Verhalten von WordPress-Editoren je nach Theme und eventuell installierten Plugins variieren kann.

HTML-Auszeichnung und Dokumentdeklaration

Der Begriff "Auszeichnung" wird im Kontext von HTML verwendet, um die Struktur und Semantik von Inhalten zu beschreiben. Hierbei handelt es sich um die logische Organisation der Informationen auf einer Webseite, welche als Auszeichnungssprache bezeichnet wird. CSS wiederum konzentriert sich darauf, diese strukturierten Inhalte zu gestalten und ihnen ein ansprechendes visuelles Erscheinungsbild zu verleihen.

Hier ist eine einfache HTML-Struktur, einschließlich der Dokumentdeklaration <!DOCTYPE html>, um einen Einblick zu geben.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-Tags mit Div-Container</title>
    <style>
        .rahmen-container {
            border: 2px solid #333;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>HTML-Tags mit Div-Container</h1>
    
    <div class="rahmen-container">
        <h2>Überschrift im Rahmendiv</h2>
        <p>Dieser Text ist im div-Container mit Rahmen.</p>
        <ul>
            <li>Element 1</li>
            <li>Element 2</li>
        </ul>
    </div>
    
    <a href="https://www.example.com" target="_blank">Link zu Beispiel</a>
</body>
</html>

Hier eine kurze Erklärung der Teile:

• <!DOCTYPE html>: Deklariert die HTML-Version.
• <html lang="de">: Der Startpunkt des HTML-Dokuments, mit der Information, dass die Sprache Deutsch ist.
• <head>: Enthält Meta-Informationen über das Dokument wie den Zeichensatz, die Ansichtseinstellungen, den Titel der Webseite und die Styles.
• <body>: Der Hauptteil der Webseite, der den sichtbaren Inhalt enthält.
• <header>, <section>, <footer>: Diese Tags helfen, die Seite in sinnvolle Abschnitte zu unterteilen.
• <h1>, <h2>, <p>, <ul>, <li> <a href: Dies sind Tags für Überschriften, Absätze, Listen und Listenelemente. Das <a href bezieht sich auf einen Link.
• <h1>, <h2>, <p>, <ul>, <li>: Diese Tags dienen zur Strukturierung des Textinhalts.
• <a href>: Das <a>-Tag wird verwendet, um Hyperlinks zu erstellen. Das href-Attribut gibt die Ziel-URL an, und es wird typischerweise für die Verknüpfung von Text oder Bildern zu anderen Seiten verwendet.

• HTML/Tutorials/Einstieg – selfhtml

HTML lernen (1): Einführungskurs – akademie.de

HTML und CSS/HTML als Auszeichnungssprache – unterrichten.zum.de

Folge dem Link 'unterrichten.zum.de' , um interaktive Übungen zu absolvieren, die es eventuell zu lösen gilt.

Die Themen reichen von der semantischen Auszeichnung einer Webseite über die Strukturierung von Seiten bis hin zu Tabellen. Der Abschnitt zu Tabellen kann aufgrund der andersartigen Struktur möglicherweise etwas verwirrend sein, insbesondere wenn sie von der gewohnten abweicht:

<table>
  <thead>
    <tr>
      <th>Überschrift</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Inhalt1</td>
      <td>Inhalt</td>
    </tr>
  </tbody>
</table>

Nachfolgend gibt es ein Memo-Quiz zur HTML-Textauszeichnung. Dann geht es weiter zu den HTML-Tags:

Achte darauf, die Seite durch Anklicken, wie in der rechten oberen Markierung angegeben, zu vergrößern. Tipp: Im Falle eines falschen Ergebnisses kannst du einfach auf die Klebestelle der falschen Verbindung klicken.

Wir hoffen, dass diese umfassende Einführung in HTML für WordPress dabei geholfen hat, ein solides Fundament für die Gestaltung deiner Website zu legen. Mit diesem Wissen bist du nun besser gerüstet, um Inhalte zu strukturieren, Elemente zu formatieren und die Benutzerfreundlichkeit zu verbessern. Falls du weitere Fragen hast oder zusätzliche Unterstützung brauchst, stehen wir gerne zur Verfügung. Viel Erfolg bei deinem WordPress-Projekt!

_{Der Beitrag wurde mit fachlicher Unterstützung erstellt.}

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Oktober