HTML-Container-Tags - richtige Verwendung?

7

Seit einiger Zeit mache ich Websites, habe aber nie eine Diskussion über die korrekte Verwendung der Container-Tags gesehen. Ich habe in den Sammlungs-Tags eine beliebige Anzahl verschiedener Arten von Inhalten gesehen, aber normalerweise scheint der Seitenersteller nur einen Stil auszuwählen, den er mag, und bleibt dabei.

Die größte Diskrepanz ist meiner Meinung nach zwischen

%Vor%

Ich hätte aber auch gerne Meinungen zu

%Vor%

und andere, die ich vielleicht vergesse.

    
Allyn 25.02.2009, 15:31
quelle

7 Antworten

12

HTML wurde ursprünglich erstellt, um den Inhalt von Dokumenten in eine Struktur zu bringen, die für Computer verständlich ist. In diesem Sinne sollte das p -Tag alles enthalten, was als Absatz strukturiert wäre, wenn der Inhalt der Seite in ein gedrucktes Dokument umgewandelt werden würde. Die Elemente div und span sind als Container für allgemeine Verwendung reserviert, um das Formatieren und Gruppieren verwandter Elemente zu erleichtern, um zusätzliche Strukturebenen bereitzustellen, die möglicherweise mit Seiten in einem Textdokument korrelieren.

In einigen Fällen sollten p tags andere Elemente enthalten, wie zum Beispiel Anker ( a ), Bild ( img ) und andere Inline-Elemente, weil sie sich direkt darauf beziehen der Inhalt des Rests des Absatzes und es ist sinnvoll, sie so zu gruppieren, oder der Text des Rests des Absatzes bietet eine detailliertere Beschreibung.

Wenn es keine zusätzliche Beschreibung dieser Elemente gibt, macht es jedoch keinen Sinn, sie in einem Absatz einfach als einen geeigneten Container zu platzieren; Ein div wäre angemessener. Im Allgemeinen sollte ein Absatz einen Textabschnitt und alle direkt verwandten oder beschriebenen Elemente enthalten. Nichts anderes macht in einem Absatz viel Sinn.

UPDATE : HTML5 fügt auch eine Reihe anderer semantischer "Container" -Elemente hinzu, einschließlich article , nav , header , section und aside .

    
cdeszaq 25.02.2009, 15:47
quelle
6

Ich denke, die Bedeutung der Tags ist etwa so:

%Vor%     
TheHippo 25.02.2009 15:37
quelle
3

Der Unterschied zwischen diesen drei (und vielen anderen) Tags ist ihre semantische Bedeutung. Der HTML-Standard enthält sowohl Tags mit bestimmten semantischen Bedeutungen ( <p> für Absätze, <em> für hervorgehobenen Text usw.) als auch Tags ohne semantische Bedeutung.

Letztere sind <div> und <span> , die zur Identifizierung von Inhalten in Block- oder Inline-Ebene verwendet werden, die identifiziert werden müssen (z. B. mit class= oder id= ), für die jedoch a Semantisch spezifisches Tag existiert nicht. Zum Beispiel kann man <p>Hi, my name is <span class="name">John Doe</span>.</p> schreiben - was anzeigt, dass es sich um einen Absatz handelt (der Browser hat bereits eine Idee, wie er zu behandeln ist) und dieser Teil des Inhalts ist ein Name (was absolut nichts bedeutet Browser, es sei denn, CSS oder JavaScript verwendet es).

Diese Tags sind daher unglaublich nützlich, um zusätzliche Informationen zu einem HTML-Dokument hinzuzufügen, das nicht in die semantischen Tags des Standards passt (siehe die hCard-Spezifikation für ein hervorragendes Beispiel) und zum Anwenden von visueller (CSS) oder funktionaler (JavaScript) Struktur auf ein Dokument, ohne seine Semantik zu verändern.

    
Ben Blank 26.02.2009 00:44
quelle
2

Ich denke, Seitenersteller sollten semantisches Markup verwenden, was bedeutet, dass das Markup, das sie erstellen, die Bedeutung (und nicht die Präsentation) kommunizieren soll. <div> und <p> haben unterschiedliche Bedeutungen. Das erste wird verwendet, um eine Abteilung (oder einen Abschnitt) einer HTML-Seite zu definieren, die letztere, um einen Textabschnitt zu definieren.

    
Kevin Babcock 25.02.2009 15:35
quelle
2

<p> ist ein Element auf Blockebene, das einen Absatz enthalten sollte, bestehend aus Text, Inline-Elementen, die diesen Text ändern ( <p> , <a> , <abbr> usw.) und Bilder.

<div> ist ein Element auf Blockebene, das zum Teilen der Seite verwendet wird, fast immer in Verbindung mit CSS-Stilen.

<span> ... nun, ich benutze diesen Tag ehrlich gesagt nicht so oft. Es ist ein Inline-Element, und ich verwende es normalerweise, wenn ich Stile auf einen Textabschnitt anwenden möchte, der nicht davon profitiert, etwas mit mehr Bedeutung zu verwenden, wie die Tags <strong> und <em> .

    
Jacob Hume 25.02.2009 23:03
quelle
1

Ich habe gelernt, <span> und <div> als "tofu von webdeveloppement" anzusehen, da es keinen wirklichen Geschmack hat, aber man kann damit praktisch alles machen.

(X) HTML-Tags definieren, um welchen Text es sich handelt. Ist es und Adresse, ist es ein Link, ist es ein Absatz, und so weiter ...

<div> und <span> sind einfache Wege, um Teile Ihrer Website zu erreichen, zu denen Sie normalerweise nicht gelangen. Wie wenn Sie versuchen, die Größe eines | zu ändern Symbol. Der schnellste Weg, den ich jemals gefunden habe, war, eine Spanne um ihn herum zu legen, ihm eine Klasse zu geben und dann das CSS zu implementieren.

Dafür sind sie meiner Meinung nach gut. Ich wäre daran interessiert, mehr oder sogar Korrekturen zu hören, was ich hier geschrieben habe.

    
Vordreller 26.02.2009 00:05
quelle
0

Es klingt, als müssten Sie die HTML-Spezifikation

Das Element p :

  

Das p -Element repräsentiert einen Absatz.

Das Element div :

  

Das Element div hat überhaupt keine besondere Bedeutung. Es repräsentiert seine Kinder. Es kann mit den Attributen class , lang und title verwendet werden, um Semantiken zu markieren, die für eine Gruppe aufeinanderfolgender Elemente gelten.

Das Element span :

  

Das span -Element bedeutet nichts für sich, kann aber nützlich sein, wenn es zusammen mit den globalen Attributen verwendet wird, z. class , lang oder dir . Es repräsentiert seine Kinder.

Der Hauptunterschied zwischen div und span ist, dass die Zeitspanne flow content , phrasing content und palpable content , während ein div nur ist flow content und palpable content .

Im Wesentlichen läuft dies auf:

div -Elemente sind Elemente auf Blockebene und können normalerweise nur innerhalb anderer Elemente auf Blockebene platziert werden, während span -Elemente Inline-Elemente sind und in den meisten anderen Elementen platziert werden können.

Die HTML-Spezifikation definiert, welche Elemente sind akzeptabel als Nachkommen jedes Elements .

    
zzzzBov 15.04.2013 14:52
quelle

Tags und Links