Die Elemente sind die Grundlagen von HyperText Markup Language (HTML). Jedes HTML-Dokument besteht aus Elementen, die durch Tags definiert werden.
Die HTML-Elemente und HTML-Tags werden oft verwechselt. Die Tags werden zum Öffnen und Schließen des Objekts verwendet, während das Element sowohl Tags als auch dessen Inhalt enthält. Betrachten wir ein Beispiel mit dem Tag <h1>: <h1> Der Titel des Dokuments </h1> ist ein Element, <h1> und </h1> sind Tags.
Die Typen der HTML-Elemente
Die HTML-Elemente können gepaart oder ungepaart sein. Die gepaarten Elemente haben ein Start-Tag (<>) und ein End-Tag (</>), und der Inhalt des Elements wird zwischen diesen Tags platziert.
Die leeren Elemente haben keine Endtags. Leere Elemente können im Starttag wie folgt "geschlossen" werden: <br/>.
Die leeren Elemente in HTML sind: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> und <wbr>.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h2> Beispiel von Elementen</h2>
<p>Das ist irgendein Absatz.</p>
<p>Das ist ein weiterer Absatz <br/> mit einem Zeilenumbruch.</p>
</body>
</html>Ergebnis
Im oben genannten Beispiel haben wir 4 gepaarte Elemente verwendet:
- Das Element <html> enthält alle Elemente der Webseite.
- Das Element <body> enthält den Textkörper der Webseite.
- Das Element <p> definiert den Paragraf.
- Das Element <h1> enthält die Kopfzeile der Webseite.
Im angegebenen Beispiel haben wir auch ein leeres Tag <br> verwendet, um einen Zeilenumbruch einzufügen.
Die Block-Elemente und Inline-Elemente
Zum Stilzwecke werden alle HTML-Elemente in zwei Kategorien unterteilt: Block-Level-Elemente und Inline-Elemente.
Die Block-Level-Elemente sind diejenigen, die den Hauptteil der Webseite strukturieren und ihren Inhalt in zusammenhängende Blöcke unterteilen. Sie beginnen immer in einer neuen Zeile und nehmen die volle Breite einer Seite ein, von links nach rechts; sie können auch eine Zeile oder mehrere Zeilen aufnehmen und einen Zeilenumbruch vor und nach dem Element haben. Die Block-Level-Elemente können sowohl Block-Level-Elemente als auch Inline-Elemente enthalten.
Die Block-Elemente sind <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> und <video>.
Alle Block-Level-Elemente haben Start- und Endtags.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<footer>
<p>Autor: W3docs Team</p>
<p><a href="[email protected]">Eine Nachricht an den Autor senden</a>.</p>
</footer>
</body>
</html>Ergebnis
In diesem Beispiel haben wir das Block-Level-Element <footer> verwendet, um die Fußzeile der Webseite und ihren Inhalt zu definieren.
Die Inline-Elemente werden verwendet, um einen Teil des Textes zu differenzieren, ihm eine bestimmte Funktion oder Bedeutung zu geben. Die Inline-Elemente bestehen in der Regel aus einem oder mehreren Wörtern. Sie verursachen keinen Zeilenumbruch und nehmen nicht die volle Breite einer Seite ein, sondern nur den Raum, der durch ihr Start- und Endtags begrenzt ist. Die Inline-Elemente werden in der Regel in anderen HTML-Elementen verwendet.
Die Inline-Elemente sind: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <buttom>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> und <var>.
Verschachtelte HTML-Elemente
Die HTML-Elemente können andere Elemente enthalten, d. h. verschachtelt sein. Wenn Sie beispielsweise einen Text stark betonen und dem Browser sagen möchten, dass er fett gedruckt werden soll, können Sie das Tag <strong>, das in das Tag <p> verschachtelt ist, verwenden.
Beispiel
<p><strong>Dieser Teil des Satzes</strong> hat eine starke Betonung und wird fett gedruckt.</p>In unserem Beispiel haben wir zuerst das Tag <strong> und dann das Tag <p> platziert.
Übe dein Wissen
