Die nützlichsten Htmlelemente?

Die wichtigsten Elemente hier vorgestellt:

Elemente zur Seitenstrukturierung:

<div></div> // Ein physikalisches Tag zur Strukturierung der Webseite


Vor Html5 wurden Webseiten mit “div” in strukturelle Abschnitte unterteilt, sie hatten jedoch für den Browser selbst keine besondere Bedeutung, d.h der Browser weiß nicht, ob der Inhalt des divs eine Navigation sein sollte oder eher ein Zitat zum Beispiel, wie bei einem blockquote.

Beispiel:

<div id="kopf">...</div>//Der Browser weiß nicht, dass es sich hierbei
//um den Kopfbereich einer Webseite handelt.
<header>...</header>//Hier weiß es der Browser.                        
	

Seit Html5 gibt es dazu logische Tags wie. Aus logischen Tags (folgerichtige Tags). Der Browser weiß mit einem logischen Tag, wozu ein Tag vorgesehen ist, wobei divs weiterhin allgemeine Containerelemente sind, die wir zur Strukturierung verwenden können. Die Html5 Elemente zur Strukturierung einer Webseite stelle ich hier vor:

Beispiel:

<article>Für unabhängige Inhalte
<section>
<header>
<h1>Katzen sind böse</h1>
</header>
<p>Sie kratzen, schnurren und miauen laut</p>
</section>
<section>
<header>
<h1>Hunde sind auch böse</h1>
  </header>
<p>Die bellen und kacken auf den Teppich</p>
</section>
</article>

<footer>Für den Fußbereich</footer>

<nav>Für Navigationen</nav>
<main>Für Hauptinhalt einer Seite</main>

Elemente zur Auszeichnung des Inhalts einer Seite:

Beispiel:

<address>für Adressen</adress>

<em>kursiver Text</em>
<h1>Überschriften h1 bis h6</h1>

<p>für Paragraphen</p>(Texte mit oberem Abstand zueinander).
<br />für Umbrüche,damit der Text ab der Stelle umbrochen wird.

<hr />Querstrich
<ul><li>Listenelemente</li></ul>(auch <ol><li>...</li></ol>, <dl></li>...</li></dl>);
<img src="bild.jpg" alt="Beschreibung" >für Bilder.

<blockquote>für Zitate von anderen Seiten</blockquote>
<q>für kurze Zitate</q>
<abbr>für Abkürzungen</abbr>
<cite>für Titel einer kreativen Arbeit, wie Buch z.B;</cite>
<b>dicker Text ohne besondere Wichtigkeit für den Inhalt</b>

<table><tr><td>Tabellen</td></tr></table>

<code>für Quelltext</code>

<samp>für Beispiel</samp>
<a>Links</a>
<span>allgemeines Inlineelement</span>

Wenn du die paar Html Elemente weißt, kannst du tolle Layouts bauen und deine Webseite ordentlich gestalten.

Schreibe einen Kommentar

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

Please reload

Please Wait