HTML - div Tag

  »   HTML  »   HTML Tutorial - Verwendung des Div-Tag

Das div-Tag ist nicht mehr als ein Container für andere Tags. Hier sind einige der div Attribute:

  • id
  • class
  • title
  • style
  • height
  • width

Der Rest der Attribute wird in der Regel nicht verwendet, ihre Arbeit wird von der CSS erledigt.

Hier ist ein Beispiel für die Verwendung des <div> Tag:

html<div id="my_menu" align="right">
	<a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a>
</div>

<div id="my_content" align="left" bgcolor="white">
	<h4>Titel hier</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Demo

Titel hier

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Das div-Tag ist viel einfacher als das Tabellen-Tag zu verwenden. Also ist es empfehlenswert, es so oft wie Sie es benötigen zu benutzen.

HTML - Das div-Tag - einfach zu ändern

Einer der Gründe, aus denen es leicht verwendbar ist, sind neue Informationen mit Leichtigkeit einzuführen und wir werden Ihnen dies verdeutlichen.

In diesem Beispiel haben wir einige neue Felder auf der Seite oben beispielhaft hinzugefügt.

html<div id="my_menu" align="right">
	<a href="#">HOME</a> | 
	<a href="#">KONTAKT</a> | 
	<a href="#">ÜBER</a> |
	<a href="#">SITEMAP</a>
</div>

<div id="my_content" align="left" bgcolor="white">
	<h4>HTML-Titel hier</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
	<h4>Zweiter HTML-Titel hier</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

Demo

HTML-Titel hier

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Zweiter HTML-Titel hier

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.