HTML - Blöcke
Alle HTML-Elemente können in zwei Kategorien eingeteilt werden (a) Block Level Elemente (b)Inline-Elemente.
Blockelemente
Blockelemente werden auf dem Bildschirm so angezeigt, als hätten sie vor und nach ihnen einen Zeilenumbruch. Zum Beispiel die <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <h Die Elemente />, <blockquote> und <address> sind Elemente auf Blockebene. Sie alle beginnen in ihrer eigenen neuen Zeile, und alles, was ihnen folgt, erscheint in einer eigenen neuen Zeile.
Inline-Elemente
Inline-Elemente hingegen können in Sätzen erscheinen und müssen nicht in einer eigenen neuen Zeile erscheinen. Die <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Die Elemente code>, <cite>, <dfn>, <kbd> und <var> sind alle Inline-Elemente.
Gruppieren von HTML-Elementen
Es gibt zwei wichtige Tags, die wir sehr häufig verwenden, um verschiedene andere HTML-Tags zu gruppieren: (i) <div> -Tag und (ii) <span> -Tag
Das <div> -Tag
Dies ist das sehr wichtige Block-Level-Tag, das eine große Rolle bei der Gruppierung verschiedener anderer HTML-Tags und der Anwendung von CSS auf Gruppen von Elementen spielt. Sogar jetzt kann das <div> -Tag verwendet werden, um ein Webseitenlayout zu erstellen, bei dem wir verschiedene Teile (links, rechts, oben usw.) der Seite mit dem <div> -Tag definieren. Dieses Tag bietet keine visuellen Änderungen am Block, dies hat jedoch eine größere Bedeutung, wenn es mit CSS verwendet wird.
Beispiel
Es folgt ein einfaches Beispiel für das <div> -Tag. Wir werden Cascading Style Sheet (CSS) in einem separaten Kapitel lernen, aber wir haben es hier verwendet, um die Verwendung des <div> -Tags zu zeigen -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das <span> -Tag
Das HTML <span> ist ein Inline-Element und kann zum Gruppieren von Inline-Elementen in einem HTML-Dokument verwendet werden. Dieses Tag bietet auch keine visuellen Änderungen am Block, hat jedoch eine größere Bedeutung, wenn es mit CSS verwendet wird.
Der Unterschied zwischen dem <span> -Tag und dem <div> -Tag besteht darin, dass das <span> -Tag mit Inline-Elementen verwendet wird, während das <div> -Tag mit Elementen auf Blockebene verwendet wird.
Beispiel
Das Folgende ist ein einfaches Beispiel für ein <span> -Tag. Wir werden Cascading Style Sheet (CSS) in einem separaten Kapitel lernen, aber wir haben es hier verwendet, um die Verwendung des <span> -Tags zu zeigen -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Dies führt zu folgendem Ergebnis: