fbpx
Photo by Sarah Pflug from Burst

Basic HTML Elemente

Websites werden häufig Inhalte in mehreren Spalten angezeigt wie bei in einer Zeitschrift oder Zeitung.

HTML bietet hierzu verschiedene semantische HTML Elemente, die die verschiedenen Teile einer Webseite definieren:

Basic Elemente

HTML5 Semantic Elements
  • „Header“ Definiert einen Header (Kopfzeile) für ein Dokument oder einen Abschnitt.
  • „Nav“ Definiert einen Container für Navigationslinks.
  • „Section“ Definiert einen Abschnitt in einem Dokument.
  • „Article“ Definiert einen eigenständigen, in sich geschlossenen Artikel.
  • „Aside“ Definiert den Inhalt neben dem Inhalt (wie eine Seitenleiste).
  • Footer“ Definiert eine Fußzeile für ein Dokument oder einen Abschnitt.
  • „Details“ Definiert zusätzliche Details.
  • „Summary“ Definiert Überschrift für das Element.

HTML 5 Formatierung 

  • <b> – Fettdruck 
  • <strong> – Wichtiger Text 
  • <i> – Kursiver Text 
  • <em> – Hervorgehobener Text 
  • <mark> – Markierter Text 
  • <small> – Kleiner Text 
  • <del> – Gelöschter Text 
  • <ins> – Eingefügter Text 
  • <sub> – Tiefgestellter Text 
  • <sup> – Hochgestellter Text 

HTML 5 Attribute 

alt Specifies an alternative text for an image, when the image cannot be displayed 
disabled Specifies that an input element should be disabled 
href Specifies the URL (web address) for a link 
id Specifies a unique id for an element 
src Specifies the URL (web address) for an image 
style Specifies an inline CSS style for an element 
title Specifies extra information about an element (displayed as a tool tip) 

HTML 5 Befehlsübersicht 

<!DOCTYPE html> HTML5-Doctype, erste Zeile der HTML-Datei 
<html lang=“de“> Umschließt den kompletten Inhalt und es wird im Inhalt als Sprache Deutsch verwendet 
<head> Head-Bereich, der Metainformationen über die Webseite enthält (werden nicht im Browserfenster angezeigt) 
<meta charset=“UTF-8″> Verwendete Codierung – mit UTF-8 können Sonderzeichen direkt genutzt werden (im Deutschen z.B. Umlaute öäü) 
<title>HTML5-Grundgerüst</title> Wichtig! Titel der Seite – hat mehrere wichtige Funktionen:  Titelzeile im Browserfenster Namen von gesetzten Lesezeichen/Bookmarks Liste der bereits besuchten Seiten für den Eintrag bei Suchmaschinen in der ersten Zeile (engl. title=Titel)  
</head>  
<body> Umschließt den Inhalt, der im Browserfenster angezeigt wird  
INHALT Hier kommt nun der Inhalt (und alle weiteren HTML-Befehle, die den Inhalt strukturieren) 
</body>  
</html> Ende der HTML-Seite 

Bereiche einteilen über HTML5 – Befehle & Beschreibung  

<header> … </header> Bereich für Kopf (nicht verwechseln mit <head>!) 
<nav> … </nav> Bereich Navigation (Steuerung) 
<section> … </section> Gruppiert Elemente 
<article> … </article> Bereich für Inhalt 
<aside> … </aside> Bereich für Zusatzinformationen zum Inhalt 
<footer> … </footer> Bereich für Fuß 

Text strukturieren HTML-Befehle Beschreibung  

<h1> … </h1> Hauptüberschrift – wichtig, sollte 1 mal auf jeder einzelnen Seite kommen 
(engl. h = headline = Überschrift)  
<h2> … </h2> 
bis 
<h6> … </h6> 
  
Unterüberschriften – sollten in der logischen Reihenfolge verwendet werden. Nach <h2> kommt <h3> 
<p> … </p> Absatz – nach dem Absatz wird automatisch Platz gehalten 
(engl. p = paragraph = Absatz) 
<br> erzwungener Zeilenumbruch (Zeilenende) 
(engl. br = break = Umbruch) 
<hr> Trennlinie – trennt unterschiedliche Inhalte 
(engl. hr = horizontal ruler = horizontale Linie) 

Textstellen hervorheben HTML-Befehle (HTML-TAG) Beschreibung  

<b> … </b> Schrift wird fett angezeigt 
(engl. b = bold = fett)  
<strong> … </strong> wichtiger Bereich, Schrift wird fett angezeigt 
(engl. strong = kräftig, überzeugend)  
<i> … </i> Schrift wird kursiv angezeigt 
(engl. i = italic = kursiv, schräg)  
<em> … </em> hervorgehobener Bereich, Schrift wird kursiv dargestellt 
(engl. em = emphasis = betont, Hervorhebung)  
<sup> … </sup> hochgestellte Schrift, z.B. Fußnote2 
(engl. sup = superscript, zu Deutsch hochstellen)  
<sub> … </sub> tiefgestellte Schrift, z.B. H2O 
(engl. sub = subscript, zu Deutsch tiefstellen)  
<del> … </del> durchstrichener Text, sprich Inhalt gilt nicht mehr 
(engl. del = deleted = gelöscht)  
<ins> … </ins> neuer Inhalt im Text (gut um Änderungen hervorzuheben) 
(engl. ins = inserted = neu eingefügt)  
<small> … </small> für das „Kleingedruckte“ im Text 
(engl. small = klein)  

Links, Verweise HTML-Befehle (HTML-TAG) Beschreibung  

<a href=“URL“>BESCHREIBUNG</a> für interne und externe Links.  
„Beschreibung“ wird später im Browser als Link (blau unterstrichen) angezeigt und kann angeklickt werden. Die URL innerhalb des Attributs href wird aufgerufen 
(engl. a = anchor = Anker) 
(engl. href = hyper reference = Hypertext-Referenz)  
<a href=“index.htm“>STARTSEITE</a> 
<a href=“index.html“>STARTSEITE</a>  
interner Link (als Endung kann sowohl .html wie auch .htm genutzt werden)  
<a href=“http://www.uxl.de/“> …</a> externer Link  
<a href=“http://www.uxl.de/“ target=“_blank“> … </a> neues (leeres) Browserfenster wird beim Anklicken geöffnet 
(engl. target = Ziel, blank = leer)  
<a href=“#xy“> … </a> Sprungmarke (wird durch # gekennzeichnet) zu einem bestimmten Punkt gesprungen, hier „xy“. Der Punkt muss über das Attribut id definiert sein  
<a href=“mailto:axl@uxl.de“>axl@uxl.de</aSo kann eine E-Mail-Adresse eingegeben werden. Durch Anklicken öffnet sich ein E-Mail-Programm (sofern installiert) und die E-Mail-Adresse ist bereits eingegeben. 
(engl. mailto = sende E-Mail an)  

Aufzählungen HTML-Befehle (HTML-TAG) Beschreibung  

<li>AUFZÄHLUNGSPUNKT</li> Jeder einzelne Punkt bei einer Aufzählungen muss von diesem HTML-Befehl umschlossen werden. 
(engl. li = list item = Listeneintrag)  
<ul> … </ul> Art der Auflistung. Umschließt alle einzelnen <li> 
Wird für Aufbau der Seitennavigation benötigt und andere Aufzählungen (engl. ul = unordered list = unsortierte Liste)  
<ol> … </ol> Art der Auflistung. Umschließt alle einzelnen <li> 
Die einzelnen Listenpunkte bekommen dann entsprechende Nummerierung 1., 2., 3. usw. (engl. ol = ordered list = nummerierte Liste)  

Bereiche definieren HTML-Befehle (HTML-TAG) Beschreibung  

<div id=“NAME“>BEREICH</div> Über DIV wird ein Bereich definiert. Diesen Bereich kann man über CSS dann ein Design „überstülpen“. Angesprochen wird der Bereich über seinen ID-Namen. Bei DIV handelt es sich um ein Blockelement – das Blockelement nutzt die komplette Bildschirmbreite. 
(engl. div = division = Bereich, Gruppierung von Elementen)  
<div class=“NAME“>BEREICH</div> Der DIV-Bereich kann per CSS über seinen Klassen-Namen angesprochen werden. 
(engl. class = Klasse)  
<span id=“NAME“>BEREICH</span> Mit SPAN können Textstellen markiert werden und diese dann über CSS mit Design versehen werden. Das SPAN-Element ist ein Inline-Element, was den Unterschied zum DIV-Element ausmacht.  
(engl. span = Abgrenzung, Bereich)  
<span class=“NAME“>BEREICH</span> Kann über den Klassennamen und CSS mit Design versehen werden.  

Kommentieren, Auskommentieren HTML-Befehle (HTML-TAG) Beschreibung  

<!– KOMMENTAR –> 
 
<!– 
QUELLCODE ohne Wirkung 
–>  

Quellen und Verweise


Erstellt am 06.12.2019 durch A. Denda / Web Agentur SEO DENDA
Überarbeitet am 24.12.2019 durch A. Denda / SEO DENDA