HTML & JavaScript

HTML ist die Programmiersprache, mit welcher Webseiten geschrieben werden.

Meistens ist es jedoch untypisch eine Webseite selbst von null mit HTML selbst zu bauen, denn dafĂŒr gibt es heutzutage Webseiten-Builder wie Chimpify, welche einem diese Arbeit abnehmen, damit man sich mehr auf die kreative Komponente fokussieren kann.




HTML & SEO: Wie ist der Zusammenhang?

HTML und SEO der Zusammenhang

Oftmals kommt die Frage auf, wie HTML und SEO miteinander hÀngt.

Im Prinzip ist es aus einer SEO-Perspektive nur wichtig, dass die Inhalte gut gelesen werden können und der HTML-Code simple und korrekt ist.


Es gibt immer wieder hitzige Diskussionen, wie der HTML-Code strukturiert sein muss und ob Builder wie Elementor SEO schwerer machen.

Es geht aber hauptsÀchlich um das Nutzererlebnis behauptet Google selbst. Wie der Code hinter der Webseite aussieht, ist deshalb zweitrangig oder sogar irrelevant.


Google misst Nutzerdaten wie Lesedauer, Bounce Rate (umstritten aber wahrscheinlich) oder auch soziale Teilungen.


Zusammenfassend: Ja, der HTML muss sauber sein und eine Webseite voller Programmierfehler wird nicht gut bei Google ranken, aber das Erlebnis dieses Codes also UX (Nutzererlebnis) ist vorrangig.


HTML Basics

<HTML>

Jedes HTML-Skript fÀngt gleich an mit dem "<!DOCTYPE html><html>" ganz oben und ganz unten das "</html>".

Dazwischen findet die ganze Magie statt.

Das DOCTYPE erklÀrt die Art des Dokuments und zwischen den beiden htmls darf dann HTML-Code angewandt werden.

Danach kommt immer zuerst der sogenannte Head, welcher wie folgt aussieht:

"<head> INHALT des Heads </head>"

Innerhalb dieses Heads gibt es verschiedene Sachen, welche eingefĂŒgt werden:

  • Der Titel (PFLICHT) "<title> TITEL DER WEBSEITE </title>"
  • Meta Beschreibung "<meta> BESCHREIBUNG FÜR GOOGLE max. 160 Zeichen </meta>"
  • Javascript "<script> Etwas komplexere Programmierungen </script>"
  • Das CSS-File verlinken "<link rel="stylesheet" type="text/css" href="styles.css">"

Die Großbuchstaben sind ĂŒbrigens nicht notwendig!

Die Meta-Beschreibung und der Titel sollten beide dein Keyword enthalten, damit Google dich besser einordnen kann.


<Body>

Erst im Body geht es dann richtig los und man beginnt mit dem tatsÀchlichen Webseiteninhalt.

Der Titel und die Beschreibung vom Head sind gar nicht sichtbar fĂŒr die Leser der Webseite, sondern rein fĂŒr die Suchmaschinen.

In der Regel eröffnet man den Body mit der H1-Überschrift.

Das sieht dann so aus: "<h1>Deine tolle Überschrift der Webseite</h1>"

Diese Überschrift sollte in jedem Fall dein exaktes Keyword enthalten.

Danach kommt vermutlich eine Einleitung von dir, bis es dann mit dem echten Inhalt losgeht, bei welchem du aber nur noch die "<h2>Überschrift</h2>" verwendest, denn die H1-Überschrift darf es nur einmal pro Seite geben.


<div> Sektion

Das Div-Element ist eine Sektion. Eine Art sinnvolle Unterteilung deines Inhalts. Du kannst ein Div auch verwenden, um den Hintergrund eines Elements zu Ă€ndern. Das mache ich ĂŒbrigens hier auch:


Das ist ein Div-Element, welches ich mit CSS gestylt habe, um einen schönen Kontrast zu erzeugen.


<p> Paragraph

Innerhalb des Bodys und der Divs sind die ganz normalen Textabschnitte, welche in HTML mit einem "<p>" eingeleitet werden fĂŒr das englische Paragraph.

Nach so einem Paragraph schließt man diesen wieder mit "</p>", sonst ist der Code invalide und funktioniert nicht.


<b> <i> Fett, Kursiv und Unterstrichen

Innerhalb des Paragraph kann ich Dinge fett markieren mit dem "<b>Dieser Text wird fett.</b>" und auch kursiv "<i>Dieser Text wird kursiv.</i>".

Unterstreichen kann man folgendermaßen: "<u>Dieser Text ist unterstrichen.</u>"


<br> Umbruch

Wenn man einen Absatz innerhalb eines Paragraphs oder auch danach machen möchte, dann verwendet man im HTML das "<br>", welches sich von dem englischen Break ableiten lĂ€sst. 


<ul> <li> Liste

Eine Liste wie zum Beispiel diese hier:

  • Das
  • ist
  • eine
  • Liste

Erstellt man in HTML folgendermaßen.

Man beginnt mit dem "<ul>" und schließt auch am Ende mit dem "</ul>". Das erklĂ€rt also den Anfang und das Ende der Liste.

Dazwischen fĂŒgt man einzelne Listen-Elemente mit dem "<li>" ein.

Die fertige Liste von oben sieht dann so aus:

"<ul>
<li>Das</li>
<li>ist</li>
<li>eine</li>
<li>Liste</li>
</ul>"

<id> 

Jedem Element von HTML kann eine class und eine ID zugeordnet werden.

Die class definiert die Art und Weise und die ID gibt einfach einen bestimmten Namen.

Die ID wird hÀufig auch verwendet, um Verlinkungen auf derselben Webseite zu realisieren.

Wenn man zum Beispiel am Anfang eines Artikels zum Fazit verweisen möchte, dann kann man das mit der ID-Funktion realisieren.


  1. Zuerst muss man das Element dafĂŒr festlegen, zu welchem verwiesen werden soll. Nehmen wir als Beispiel die letzte Überschrift eines Artikels, welche "Fazit" lautet.
  2. Im HTML-Code sieht diese Überschrift dann wie folgt aus: "<h2>Fazit</h2>"
  3. Nun fĂŒgt man einfach eine id hinzu: "<h2 id="Link">Fazit</h2>" 
  4. Schon kann man dazu verlinken mit einem # davor. Wenn ich also oben zum Fazit verlinken möchte, dann verlinke ich einfach #Link und man springt beim Klicken dieses Links nach ganz unten zu dieser Überschrift.


Merke: Wenn man von einer anderen Seite direkt zum Fazit dieses Artikels verlinken möchte, dann muss man noch die URL davor hinzufĂŒgen.

https://beispiel.de/artikel/#Link

Diese Ids sollte man aus SEO-Sicht bei allen wichtigen Überschriften hinterlegen aus 2 GrĂŒnden:

  1. Google vergibt eventuell das Rich Snippet "Site Links"
  2. Man kann ein Inhaltsverzeichnis oben einfĂŒgen


Der Footer ist das Ende der Webseite, welcher sich aber noch im Body-Tag befindet.

Der Footer ist typischerweise bei allen Webseiten gleich und man findet dort den Datenschutz, das Impressum und die AGBs und weitere wichtige Links, welche auf jeder Seite vorhanden sein sollten.

So einen Footer selbst zu erstellen in HTML ist etwas aufwĂ€ndig und dafĂŒr empfehle ich einen Webseiten-Builder zu verwenden wie Chimpify (mein Favorit).



Wer tiefer in die Materie einsteigen möchte, der sollte unbedingt bei W3School (Englisch) oder bei WikiSelf (Deutsch) vorbeischauen.

Wenn du einen kompletten HTML EinfĂŒhrungskurs möchtest, dann empfehle ich dir auf GoSkills vorbeizuschauen, dort gibt es Kurse fĂŒr HTML, CSS und Javascript.


JavaScript

JavaScript ist die Programmiersprache, welche fĂŒr komplizierte Aufgaben und Software auf eine Webseite verwendet wird.

Mit HTML kann man wirklich nicht groß Dinge programmieren, sondern es ist eher die Sprache, um Inhalte darzustellen.

JavaScript hingegen ist eine volle Programmiersprache mit allem Drum und Dran. (Nicht zu verwechseln mit Java).

Damit kann man also komplette Web-Apps entwickeln und komplexe Software, welche auf Webseiten lÀuft.

Als Blogger kommt man an dieser Sprache nicht sonderlich oft vorbei. Außer bei den strukturierten Daten. Das ist aber wirklich sehr einfach.


Wenn du einen kompletenn Kurs zum Thema JavaScript belegen möchtest, dann schau hier vorbei.



Sende mir eine Einladung

Wie wÀre es mit einer kostenlosen Beratung?

Ich wĂŒrde liebend gerne Ihre Firma / Blog und die derzeitigen Probleme kennenlernen. Ich bereite vor dem Anruf meine ersten Ideen vor und ĂŒberlege mir eine passende Strategie je nach Budget und Zeit. Bitte fĂŒllen Sie das Formular sauber aus, danach gibt es kostenfreie Tipps von mir!
Jetzt Termin sichern

Noch keine Kommentare vorhanden.

Was denkst du?