10 HTML & CSS Befehle die Du kennen solltest

Roman Perich, geändert am 29 September 2024 , Lesezeit ca. 8 Min.


HTML- und CSS-Befehle sind nicht nur dazu da, Webseiten zu erstellen – sie haben das Potenzial, dein Leben zu verändern!

Das mag vielleicht etwas übertrieben klingen, aber es ist wahr: HTML und CSS Befehle sind äußerst leistungsstarke Werkzeuge! Wahrscheinlich hast du bereits von ihnen gehört.

Ich habe kürzlich damit begonnen, ein Buch zu schreiben, und werde sogar CSS- und HTML-Formatierungen darin verwenden. Warte also nicht länger und lerne sie! Es handelt sich um technische Sprachen, die genauso wichtig sind wie Englisch.

Daher habe ich hier 10 der wichtigsten HTML- und CSS-Befehle für dich als Code aufgelistet. Nimm dir die Zeit, sie anzuschauen und selbst auszuprobieren. Du wirst sehen, dass es gar nicht so schwierig ist!

Du kannst html Befehle immer dann nutzen wenn es nicht mehr geht , so wie

  • Sonderformatierung einfügen
  • Schrift ändern oder Schriftart ändern
  • Tabelle direkt einfügen
  • mit CSS direkt formatieren, was der Standard-Editoren nicht mehr unterstützen.

Was ist HTML ?

HTML steht für Hyper Text Markup Language. Das ist die Sprache, um die Webseite für den Browser zu erstellen.

HTML dient als Grundgerüst für die meisten Webseiten im World Wide Web.

Es ermöglicht Webentwicklern, den Inhalt einer Webseite zu strukturieren und zu formatieren, indem sie verschiedene HTML-Elemente verwenden, um Text, Bilder, Links, Multimedia-Inhalte und mehr darzustellen.

Es gibt viele HTML-Tags, die in HTML-Dokumenten verwendet werden können, um verschiedene Arten von Inhalten zu strukturieren und darzustellen.

Die Anzahl der verfügbaren Tags hat sich im Laufe der Zeit weiterentwickelt und erweitert, da neue Versionen von HTML eingeführt wurden.

<b></b> - steht für Fettschrift
<p></p> - steht für Paragraph

HTML Tags können Attribute enthalten, mit denen Sie weitere Informationen wie die Quell-URL eines Bildes und den ALT-Text für einen Link angeben können.

<img alt="wenn das Bild nicht angezeigt wird, erscheint dieser Text" src="www.perich.de./log.jpg"/>

Was ist CSS ?

CSS ist standard für Cascading Style Sheet und wird benutzt um HTML zu formatieren. Damit kannst schon inzwischen alles möglich machen.

CSS Dateien werden in einer CSS Datei gespeichert und geladen, können aber genau so direkt in HTML eingebunden werden.

CSS wird auch verwendet um Wiederholungen in der Formatierung auszulagern, um so den Code schlanker zu bekommen

Wie kann ich HTML editieren?

Dafür gibt es fertige Editoren, die direkt im Browser laufen und dich bei der Formatierung unterstützen.

Die Editoren nennt man WYSIWYG – What You See Is What You Get . Übersetzt heisst es „Was du siehst ist was du bekommst“.

Moderne Webseiten haben bereits passende Themes, die uns helfen die Seiten schneller und vor allem leichter zu erstellen. Eine Empfehlen zu den Themes findest du in meine Artikel.

Oft machen diese wunderschöne Editoren zu viel von dem guten HTML und CSS Code, was zu der Überlastung und der langsamen Seiten führt. Es ist nicht immer, was glänzt auch technisch sauber ist.

Um wirklich alle HTML Tags auszuschöpfen brauchst du moderne Programme wie Adobe Dreamweaver.

Alternativ nimmst du Bootstrap Studio und erstellst sehr gute und ansprechende Seite. Es ist schon aufwendiger als Webeditoren, dafür hast du auch mehr Möglichkeiten.

Wie wichtig ist HTML für SEO?

Die Hypertext Markup Language (HTML) ist wichtig für die Suchmaschinenoptimierung (SEO).

Da Suchmaschinen keine Grafiken erkennen können, analysieren sie die Struktur der Website.

Entspricht diese den Vorgaben, wird die Seite indiziert. Eine saubere und logische Struktur kann zu einem besseren Ranking führen.

In meinem weiteren Artikel 5-Knallharte Strategien, findest du wie du maximale Sichtbarkeit erreichst.

Hier sind 10 Befehle, die du kennen solltest.

HTML Tag – H

Überschriften werden verwendet, um den Inhalt einer Webseite zu strukturieren und zu organisieren. Dieser HTML Befehl bietet sechs Ebenen von Überschriften, von

H1 bis H6
(die höchste H1) bis (die niedrigste H6).

Suchmaschinen betrachten Überschriften als wichtige Elemente, um den Kontext und die Relevanz des Inhalts zu bestimmen.

Die korrekte Verwendung von Überschriften verbessert nicht nur die Suchmaschinenoptimierung, sondern auch den Gesamteindruck des Nutzers.

HTML CODE für <h>

<h1>Ich bin die wichtigste Überschrift</h1>

HTML Tag – HR

Damit kannst du einfach eine Linie durchziehen und den Inhalt trennen. Es ist wie <br>, nur mit einer Linie, die Du ebenfalls mit CSS manipulieren kannst

HTML CODE für <hr>

<hr>

HTML Tag – P

P

Der Html Tag stellt einen Absatz in HTML dar. Er wird verwendet, um Textblöcke einzuschließen und zu formatieren. Suchmaschinen und Benutzer verlassen sich auf gut strukturierte Absätze, um den Inhalt zu verstehen und durch die Webseite zu navigieren.

Stellen Sie sicher, dass Ihre Absätze prägnant, informativ und richtig formatiert sind, um die Lesbarkeit und die Suchmaschinenoptimierung zu verbessern.

HTML CODE für <p>

<p>Stelle dir vor , du hast eine Million gewonnen</p>

HTML Tag – A

A

Der <a>-Tag wird verwendet, um Hyperlinks in HTML zu erstellen. Durch Hinzufügen des href-Attributs können Sie die URL angeben, zu der der Link navigieren soll.

Gut platzierte und relevante Links tragen zu einer besseren Benutzerfreundlichkeit bei und können die Platzierung Ihrer Website in den Suchmaschinen verbessern.

Außerdem hilft das Hinzufügen von beschreibendem Ankertext den Suchmaschinen, den verlinkten Inhalt zu verstehen.

HTML CODW für <a>

<a href=“www.perich.de/seite/“>weiter lesen</a>

HTML Tag – IMG

img

Das <img>-Tag wird zum Einfügen von Bildern in ein HTML-Dokument verwendet. Es erfordert das src-Attribut, das den Speicherort der Bilddatei angibt.

Das Hinzufügen von beschreibendem Alternativtext zum -Tag hilft Suchmaschinen, den Bildinhalt zu verstehen, wodurch er zugänglicher und SEO-freundlicher wird.

Optional kannst du auch die Attribute (alt,width,heigh) einfügen, um den Browser beim Rendern zu unterstützen. Das kann dazu beitragen, die Ladezeit zu verbessern und die Geschwindigkeit der Website zu erhöhen

HTML CODE für <img>

<img src=“www.perich.de/logo.jpg“ alt=“Logo“ width=“128″ height=“128″>

HTML Tag – DIV

Das <div>-Element ist ein vielseitiger Container, mit dem Sie andere HTML-Elemente gruppieren und formatieren können.

Es wird häufig verwendet, um das Layout einer Webseite zu strukturieren und zu organisieren.

Durch die Zuweisung geeigneter Klassen oder IDs zu -Elementen können Sie CSS-Stile anwenden und optisch ansprechende Designs erstellen, die die Aufmerksamkeit des Benutzers erregen.

Zudem kann man auch die Blöcke per Javascript ersetzen oder formatieren. Es ist wie ein Container.

HTML CODE für <div>

<div id=“mein-element“>Hier kommt dein Text</div>

HTML Tag – UL und LI

ul und li

Ungeordnete Listen (<ul> ) und Listenelemente (<li>) werden zum Erstellen von Aufzählungslisten in HTML verwendet.

Sie bieten eine einfache und effektive Möglichkeit, Informationen strukturiert darzustellen. Suchmaschinen schätzen gut organisierte Inhalte, daher kann sich die richtige Verwendung von und positiv auf Ihre SEO-Bemühungen auswirken.

Bonus: kennst du „ID“ in html ?

z.B „mein-element“ ist der Name. Es ist ein Schlüssel und wird für die Referenzen verwendet

HTML CODE für <ul> und <li>

<ul>
<li>Überschrift A</li>
<li>Überschrift B</li>
</ul>

HTML Tag – Table

Das <table>-Tag in HTML wird verwendet, um eine Tabelle zu definieren.

Es ist jedoch richtig, dass das alleinige Verwenden des <table>-Tags wenig sinnvoll ist. Eine Tabelle in HTML besteht in der Regel aus mehreren verschachtelten Tags, die jeweils eine spezifische Funktion haben. Hier sind die wichtigsten Elemente, die in Kombination mit <table> verwendet werden.

HTML CODE für <table>

<table>
    <tr>

           <td>Inhalt</td>

           <td>Inhalt 2</td>

   </tr>
</table>

<tr> – steht für die Zeile und <td> für die Spalte

Inzwischen ist es im Web so, dass Tabellen mit <div> Html-Tag und CSS gebaut werden. Damit lassen sich die Tabellen sowohl auf dem Desktop als auch auf dem mobilen Gerät perfekt darstellen.

Fazit für HTML Tags und CSS

Wenn Du diese 10 HTML- und CSS-Befehle beherrschst, kannst Du herausragende Websites mit verbesserter Sichtbarkeit in Suchmaschinen erstellen.

Ich stelle immer wieder fest, dass die besten Seiten sehr einfach gebaut sind. Du wirst zwar von den Grafikern und Webdesignern ausgelacht , aber das macht nichts. Besser funktionierende Webseite, als schöne, die keiner findet.

Denke daran, Überschriften effektiv zu verwenden. Dein Inhalte mit Absätzen zu strukturieren und Bilder und Links zu optimieren.

Durch die Kombination dieser Techniken mit Ihrer Kreativität und Ihrem Verständnis für Webentwicklung kannst du dein Websites an die Spitze der Suchmaschinenrankings bringen und das ist in wenigen Monaten sogar machbar.

Bleibe neugierig, lerne weiter und erkunde weiterhin die enormen Möglichkeiten von HTML und CSS, um bemerkenswerte Online-Erlebnisse zu schaffen.

Es war am Anfang des Internets und wird auch weiter Bestand des Browsers sein