Unterschied zwischen DIV und SPAN

und sind HTML-Tags, die Elemente im HTML-Code definieren.

HTML (Hypertext Markup Language) ist ein strukturierter Code, der zum Erstellen und Anzeigen der von uns online besuchten Webseiten täglich auf jedem Gerät verwendet wird.

Andere Technologien und Programmiersprachen können in HTML integriert werden, um dynamische und erweiterte Funktionen für eine Website bereitzustellen.

HTML verstehen

Hypertext Markup Language (HTML) ist eine weit verbreitete Auszeichnungssprache und bezieht sich auf die Struktur und den Code "hinter" einer Webseite, die in einem Webbrowser angezeigt wird.

HTML ist eine Textdatei, die bestimmten Code (Syntax) verwendet, um den Stil, den Inhalt, das Layout und das Format einer Seite zu definieren. Das Markup Ein Begriff gibt an, dass der Text / Code für die Verarbeitung und Präsentation vorbereitet wird, d. h. auf einer Webseite in einem Webbrowser.

Das World Wide Web Consortium (W3C) [i] erkennt HTML als formale Markup-Sprache bei der Webseitenentwicklung. Daher wird HTML von den meisten Browsern unterstützt. So können Webseiten in einer anerkannten Sprache entwickelt werden, die von verschiedenen Browsern leicht interpretiert werden kann, um die Seite wie vom Designer beabsichtigt wiederzugeben.

Die derzeit noch verwendete Version ist HTML4, wird jedoch langsam eingestellt, da HTML5 für dynamische und ansprechende Webseiten mehr Unterstützung und Akzeptanz findet.

Die Reaktionsfähigkeit wird zu einer grundlegenden Komponente der Webentwicklung, um eine einfachere und dynamischere Benutzererfahrung zu bieten, die auf mehreren Geräten wie Smartphones, Tablets und Laptops bereitgestellt werden muss.

Cascading Style Sheets (CSS) wird zu einem integralen Bestandteil der Erstellung dynamischer und responsiver Seiten. Es ist eine separate Datei, die Attribute für jedes Element definiert, z. B. Schriftart, Farbe und Ausrichtung. Der Entwickler muss also nicht jedes Mal den Stil des Elements angeben, wenn es im HTML-Code verwendet wird.

Grundstruktur von HTML

Um das Beste aus jeder Entwicklungssprache herauszuholen, ist das Festhalten an der Standarddateistruktur und die Berücksichtigung der besten Syntax die Voraussetzung für stabile, zweckmäßige und visuell ansprechende Webinhalte.

Eine HTML-Seite hat eine durch Elemente definierte Struktur (auch als Tags bezeichnet). Beim Schreiben des HTML-Codes werden diese Elemente paarweise angezeigt, dh jeder Tag benötigt ein Öffnen und Schließen. Ein Anfang und ein Ende.

Ein Element wird mit der Syntax geöffnet: und geschlossen mit.  Das / Eine schräge Linie zeigt das Ende der Elementdefinition an.

Die Elementattribute und der Inhalt werden zwischen diesen beiden Punkten definiert.

Das minimale Elemente Für eine HTML-Datei sind die Definition,, (nur HTML4) und Tags erforderlich.

  • DOCTYPE-Definition

Die Definition (DTD) muss zuerst als erstes Tag in einer HTML-Datei deklariert werden. Wenn die Seite verarbeitet wird, weiß der Webbrowser, um welche Art von Datei es sich handelt, und kann die Seite daher richtig interpretieren und anzeigen.

In HTML4 gibt es Variationen der DTD (abhängig von den Seitenattributen und -elementen), die typischeren Anweisungen wären jedoch wie folgt:

oder

Die DTD in HTML5 ist viel einfacher:

· HTML, KOPF und KÖRPER

  • Das Tag gibt an, dass es sich um eine HTML-Datei handelt, und dies ist der Stamm des HTML-Elements, das alle anderen nachfolgenden Elemente enthält. Das Einfügen eines Sprachattributs wird als bewährte Methode empfohlen. zum Beispiel:
  • Das ist in HTML4 erforderlich, aber nicht zwingend in HTML5. Es ist ein Element, das andere Elemente enthält, die für diesen Dokumentteil relevant sind, z. B. Titel, Verweise auf Skripts, Definieren von Stilen und Metadaten. Das geschlossene Tag muss vor der Definition des verwendet werden 
  • Das Element enthält den Hauptinhalt der Seite, einschließlich Tabellen, Bildtext, Listen usw. Nachdem das Tag geschlossen wurde, kann das Element jetzt beendet werden. Die Verwendung des neuen HTML5-Elements ist für die Seite oder in einem anderen Teil des Inhalts optional.

HTML-Elemente

HTML5 hat neue Elemente zur Vereinfachung der Entwicklung und des Designs erstellt und auch die in HTML4 verwendeten Elemente entfernt. Die Liste der Unterschiede zwischen HTML4 und HTML5 wird vom World Wide Web Consortium (W3C) veröffentlicht. [Ii].

HTML DIV TAG

Zusammen mit den Verbesserungen und neuen Elementen, kombiniert mit den CSS-Fortschritten, können bestimmte Elemente auf andere, bessere Weise als zuvor verwendet werden, und Webseiten werden schneller, reichhaltiger und schöner anzusehen! mit CSS kann mit HTML5 bestimmte Elemente ersetzt werden, die übermäßig verwendet wurden, z .

Das Tag ist beliebt, wenn Inhalte auf einer Seite getrennt werden. Beim Erstellen dieses Elements wird automatisch eine Unterbrechung eingefügt
um den Text oder den Inhalt zusammenzuhalten, anstatt Text auf der Seite zu platzieren.

Mit Website-Zugänglichkeit und Suchmaschinenoptimierung werden Techniken zu einer Wissenschaft und werden vom WC3 empfohlen, nicht immer auf HTML5 zurückzugreifen.

Betrachten Sie als Beispiel für ein sauber strukturiertes, aber einfaches Blog-Format die neuen HTML5-Elemente mit CSS, anstatt das Element zu verwenden. Verwenden Sie das Element für den Hauptinhalt, das Element zum Hervorheben oder Trennen von Inhalten auf der Seite, der Kopfzeile oder der Fußzeile (an beliebiger Stelle!). Mit dem Element können Sie Menü- oder Gruppenlinks zum Durchsuchen der Seite speichern.

Diese neuen Elemente identifizieren den Inhaltstyp anhand von HTML5. Das Tag wird jedoch auch mit CSS verwendet, um responsive Websites zu erstellen.

Bei der Erstellung jedes Elements (mit seiner eigenen ID oder Klasse) kann die CSS-Datei definiert werden, um jedes Element zu bearbeiten.

Das folgende HTML-Beispiel zeigt ein Beispiel für die Verwendung mehrerer Elemente:

Meine Beispiele

Die Elemente können unterschiedliche Attribute aufweisen, insbesondere unterschiedliche Größen für die reagierende Interaktion, abhängig von der Bildschirmgröße des verwendeten Geräts.

Hier ein Beispiel, wie jedes Element in der entsprechenden CSS-Datei des HTML-Codes gestaltet werden kann, indem auf jedes Tag verwiesen wird.

#Header

Breite: 800px;

Höhe: Auto

Rand links: auto;

Rand links: auto;

#Featured

Höhe: 150px;

Hintergrundfarbe: #CCC;

HTML SPAN TAG

Das Element ist ein Inline-Element und bricht nicht in Zeilen ein, es sei denn, der Bruch erfolgt
Tag wird verwendet und der definierte Text (Inhalt) zwischen den Tags open und close wird als Linie angezeigt (standardmäßig ohne Verwendung anderer Elemente)..

Inline-Elemente sind Textelemente in der HTML-Datei und können in der Zeile eines anderen Elements definiert werden.

Wie hat das Element keine Bedeutung zur optimalen Referenzierung. Es zeigt im Wesentlichen den Elementinhalt so wie er ist, aber alle Instanzen können in CSS für das Styling definiert werden, wenn sie korrekt markiert und mit anderen Attributen angereichert oder mit JavaScript bearbeitet wurden.

Im Beispiel unten zeigt der blaue Text, wie das span-Element als Inline-Element mit anderen Attributen als seinem übergeordneten Element verschachtelt werden kann - dem Absatz p>:

Um das Beispiel zu öffnen, klicken Sie auf das Symbol unten auf der Seite.

Bei der Anzeige in einem Webbrowser wird der Text im obigen Element in einer anderen Schriftart angezeigt als der Absatz, um hervorzuheben, an welcher Stelle der Benutzer klicken muss, um auf das Beispiel zuzugreifen.

Beachten Sie, dass es keine Unterschiede zwischen HTML4 und HTML5 gibt.