Syntax in HTML und CSS und die korrekte Bezeichnung
Syntax in HTML und CSS und die korrekte Bezeichnung

Syntax in HTML und CSS und die korrekte Bezeichnung

Wiki

Um es vorweg mal klar zu stellen, HTML und CSS sind keine Programmiersprachen sondern Auszeichnungessprachen. Im Sprachgebrauch werden sie oft fälschlicherweise so bezeichnet.

Als Webentwickler macht es längerfristig Sinn sich den richtigen Sprachgebrauch anzueignen. Daher möchte ich in diesem Beitrag auf eineige Begriffe im Bezug zu HTML und CSS eingehen. Es geht mir hier in erster Linie darum die Begriffe zu differenzieren.

HTML

HTML – Element

Ein HTML Element ist zum Beispiel eine Überschrift, ein Paragraph, ein Bild oder so ähnlich. Die Elemente in HTLM haben entweder unterschiedliche Funktionen oder sie sind in unterschiedlicher Form für den Nutzer auf der Website sichtbar. Schlicht und einfach ist die Summe der einzelnen Elemente der finale HTML-Code.

HTML – Tag

Tags zeichnen Elemente in HTML aus. Sie stehen zwischen spitzen Klammern und treten meist paarweise auf. Es gibt ein einleitendes Tag und ein schliessendes Tag. Innerhalb der beiden Tags steht das Element was auf die Funktion der Tags reagiert.

<h1>Dies ist eine Überschrift</h1>

Das h1-Tag sagt seinem Element dass es eine Überschrift ist. Der Text wird dementsprechend im Browser als Überschrift ausgegeben. Wie die meisten aller Tags hat auch h1 ein Opening- und ein Closing-Tag

HTML – Attribut

Ein Attribut bringt zusätzliche Infirmationen in ein HTML-Tag. Es besteht aus einem Namen und einem Wert.

<img src="img/bild.png" height="100px" width="200px">

In diesem Beispiel haben wir das img-Tag das gleich 3 Atrribute aufweist.

  • „src“ sagt dem Browser wo das Bild sich befindet
  • „height“ definiert die Höhe in der das Bild wiedergegeben wird
  • „width“ definiert die Breite in der das Bild wieder gegeben wird
    Das img-Tag hingegen ist ein Single-Tag und benötigt keinen Closing-Tag

Ein Attribut besteht aus einem Namen und einem Wert. Zwischen Namen und Wert steht ein „=„ und der Wert steht zwischen Anführungszeichen.

attributname="wert"

CSS

CSS – Selektor

Es gibt verschiedene Arten von Selektoren in CSS. Ich möchte hier die gängigsten 3 aufzählen:

  • Typselektor
  • Klassenselektor
  • ID-Selektor

Die Selektoren müssen im html-Code nach festgelegten Regeln vorkommen.

<p id="absatz" class="artikel">Text</p>

In diesem Beispiel zeichnen wir einen Text als Paragraphen „p“ aus, geben ihm eine ID „absatz“ und eine Klasse „artikel“. Es gibt uns die Möglichkeit 3 verschiedene Selektoren in CSS zu bearbeiten.

p

#absatz

.artikel

Zur Notation:

  • Der tag-Selektor ist schlicht und einfach das html-Tag
  • Der ID-Selektor hat ein # als Vorzeichen
  • Der Klassen-Selektor bekommt einen Punkt als Vorzeichen

CSS – Eigenschaft

Nachdem wir einen Selektor in html festgelegt haben und diesem im Stylesheet eingegeben haben, können wir diesen mit Hilfe einer Eigenschaft und einem Wert stylisieren.

Nehmen wir zum Beispiel das p-Tag und geben als Eigenschaft die Schriftgrösse an:

p {
   font-size:

Eigenschaften und Werte in CSS befinden sich immer zwischen geschweiften Klammern. Also öffnen wie diese gleich nach dem Selektor „p“.

Die Eigenschaft selbst schreiben wir in die nächste Zeile und schliessen diese mit einem Doppelpunkt ab.

CSS – Wert

Die Eigenschaft kann nicht ohne Wert, diesem schreiben wir gleich anch dem Doppelpunkt…

p {
   font-size: 18px;

…und schliessen den Wert mit einem Semikolon ab. Dieses ist wichtig denn es trennt mehrere Eigenschaften voneinander.

Am Ende schliessen wir die geschweifte Klammer. So geben wir an dass die Eigenschaft und der Wert dem p-Tag zugewiesen sind.

p {
   font-size: 18px;
}

Wird die Klammer nicht geschlossen enthält der Code einen Fehler und funktioniert nicht.

CSS – Deklaration

Die Deklaration ist nichts anderes als die Summe aus Eigenschaft und Wert. In unserem Beispiel also „font-size: 18px“

Ein Selektor kann mehrere Deklarationen haben. Diese werden durch Semikolons voneinander getrennt. Der Einfachheit halber teilen wir jeder Deklaration eine neue Zeile zu.

p {
   font-size: 18px;
   font-weight: bold;
   font-color: #000000;
}

Das Nutzen mehrerer Zeilen ist zwar nicht zwingend notwendig, es macht den Code aber insgesamt überschaubarer.

Anmerkung

Wie mit den Kommentaren innerhalb des Codes passiert es mir häufig dass ich die in diesem Beitrag gelisteten Begriffe schlicht und einfach durcheinander bringe. Das tut dem Code zwar keinen Abbruch aber ich finde man sollte mit der Zeit doch die korrekten Bezeichnungen kennen und nutzen.

Wie denkst Du darüber und wie sieht es bei Dir aus? Kommen Dir die Begriffe auf Anhieb in den Sinn oder legst Du da weniger Wert drauf? Schreib es mir doch gerne in die Kommentare.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.