• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Was sind logische Elemente?

Also ich hab ein HTML, XHTML & CSS Buch und dort steht was von logischen Elementen. Abschnitt aus dem Buch:"Wann sollten Sie sich statt für CSS für die grundlegende (X)HTML-Formatierung entscheiden? Dafür gibt es zwei wichtige Situationen. Erstens sind die meisten in der in diesem Kapitel besprochenen Elemente logische Elemente d.h., sie verleihen Ihrem Dokument eine Struktur, indem sie beschreiben, was sie enthalten. Das code-Element ist beispielsweise speziell dafür gedacht, Codezeilen aus einem Skript oder Programm zu formatieren. Einerseits formatiert es zwar den Inhalt mit einer nichtproportionalen Schrift, doch wichtiger noch ist, dass es den Text als Code identifizierbar macht." (Das Unterstrichene verstehe ich nicht)
 
Logische Elemente sind HTML-Tags bei dennen du durch das Wort im Tag logisch erahnen kannst, was es macht.

HTML: 
Ich bin ein schwacher, normaler Text, aber <strong>Strong macht mich STARK</strong> und hier bin ich wieder schwach

So ganz versteh ich das auch nicht, ich wette viele andere auch nicht und trotzdem können wir den Rotz! Also wenn du Theoretiker bist, also im Studium immer 1+ , dann mach ruhig weiter.. wenn du Praktiker bist, also in der Berufsausbildung bereits der Meinung warst es besser als die Lehrer zu können, weil die nur MIST labern.. dann mach erstmal weiter.. ~

Da du die Page nicht aufrufen kannst, eine Kopie des Absatzes:

[Physische Elemente]

[TABLE="class: reftable"]
[TR]
[TH="bgcolor: #EEEEEE, align: left"]Element (Notation)[/TH]
[TH="bgcolor: #EEEEEE, align: left"]Status[/TH]
[TH="bgcolor: #EEEEEE, align: left"]Bedeutung[/TH]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<b>...</b>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text als fett aus[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<i>...</i>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text als kursiv aus[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<tt>...</tt>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text als dicktengleich formatiert aus (tt = Teletyper = Fernschreiber)[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<u>...</u>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text als unterstrichen aus[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<strike>...</strike>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text als durchgestrichen aus[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<s>...</s>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text als durchgestrichen aus[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<big>...</big>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text größer als normal aus[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<small>...</small>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text kleiner als normal aus[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<sup>...</sup>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text als hochgestellt aus[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<sub>...</sub>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text als tiefgestellt aus[/TD]
[/TR]
[/TABLE]
Zum Vergrößern anklicken....


[Logische Elemente]
[TABLE="class: reftable"]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<em>...</em>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus als betonten, wichtigen Text ("emphatisch")[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<strong>...</strong>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "stark betont" (Steigerung von "em")[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<code>...</code>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "dies ist Quelltext"[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<samp>...</samp>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "Dies ist ein Beispiel". Im engeren Sinne können auch Beispiel-Ausgaben von Programmen und Scripten auf diese Weise ausgezeichnet werden.[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<kbd>...</kbd>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "dies stellt eine Benutzereingabe dar"[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<var>...</var>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "dies ist eine Variable oder ein variabler Name"[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<cite>...</cite>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "dies ist die Quelle oder der Autor". Das eigentliche Zitat wird mit q oder
dok.gif
blockquoteausgezeichnet.[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<dfn>...</dfn>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "dies ist eine Definition".[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<abbr>...</abbr>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "dies ist eine Abkürzung"[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<acronym>...</acronym>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "dies ist ein Akronym". Akronyme sind besondere Abkürzungen, die aus den Anfangsbuchstaben mehrerer (Teil-)Wörter gebildet werden. Sie werden im Deutschen in der Regel ohne Punkte gebildet ("Lkw"). Akronyme lassen sich darüber hinaus meist als Wort aussprechen (z.B. "NATO").[/TD]
[/TR]
[TR]
[TD="class: code, bgcolor: #FFFFE0"]<q cite="Quelle">...</q>[/TD]
[TD][/TD]
[TD="class: tabxpl, bgcolor: #E4EEFF"]zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat mit Quellenangabe"[/TD]
[/TR]
[/TABLE]
Zum Vergrößern anklicken....


Quelle: SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Logische Auszeichnungen im Text

Rechte liegen beim Author des Textes in der Quelle.. bzw. die Rechte die für die Quelle gelten..

*edit*

Falls das trotz Quellenangabe nicht den Regeln/Rechten entsprechen sollte, möchte ich um Entschuldigung bitten, es darf jederzeit ohne Einwände mein Text geändert werden.
 
Ich verstehs immer noch nicht... also wann soll ich ein logisches Element verwenden und wann ein physisches Element? Z.B. werden das <strong>-Element und das <b>-Element gleich dargestellt aber wann soll ich was verwenden?...
 
Zuletzt bearbeitet:
Was in deinem Buch steht, ist – na ja – zumindest leicht missverständlich. HTML-Elemente dienen in Wahrheit überhaupt nicht der Formatierung („hier ist gelb und Schriftgröße 17“), sondern ausschließlich der semantischen Auszeichnung („hier ist eine Überschrift ersten Grades“).

Im HTML steht: „Hier befindet sich eine Überschrift ersten Grades.“

HTML: 
<h1>Meine Überschrift</h1>

Im CSS wird dann definiert: „Überschriften ersten Grades werden gelb und in Schriftgröße 17 dargestellt.”

Code: 
h1 {
    font-size: 17pt;
    color: yellow;
}

So hast du eine saubere Trennung zwischen der Semantik des Inhalts (was die Elemente sind) und der Darstellung (wie sie dargestellt werden).

Dass ein Browser auch ohne zugewiesene eigene CSS-Datei verschiedene Elemente unterschiedlich darstellt (fett, größere Schrift, …) liegt daran, dass jeder Browser eine grundlegende CSS-Datei eingebaut hat, also Standardwerte für die Formatierung verschiedener Elemente setzt, auf denen weitere CSS-Dateien dann aufbauen.


Semantische Auszeichnung von Inhalten ist für das Auslesen der Inhalte durch Computer notwendig. Die besitzen nicht die Kreativität, um zu entscheiden, dass die Texte der Seite, die größer sind als andere und die eine andere Farbe haben, wohl die Überschriften sind.

Warum Computer das wissen müssen? Das einfachste Beispiel dafür ist das Link-Element (a). Wenn du beliebigen Text der Seite blau einfärbst und unterstreichst und in Klammern eine Web-Adresse dahinter schreibst, wird das nicht zu einem Link. Eine Browseranwendung kann nicht entscheiden, dass sie dort etwas „anklickbar“ darstellen soll. Das tut sie nur, wenn du die entsprechende korrekte semantische Auszeichnung (<a href="http://www.html.de/">Ein Link</a>) verwendest.

Analog dazu wissen Browser ohne den Einsatz des img-Elements nicht, wann sie ein Bild einbinden sollen, oder sie wissen ohne Einsatz von p- und h[1-6]-Elementen nicht, wo in einem Text ein neuer Abschnitt beginnt und wo eine Druckfunktion sinnvoll einen Seitenwechsel einfügen könnte.

Icemind schrieb:
Ich verstehs immer noch nicht... also wann soll ich ein logisches Element verwenden und wann ein physisches Element? Z.B. werden das <strong>-Element und das <b>-Element gleich dargestellt aber wann soll ich was verwenden?...
Zum Vergrößern anklicken....

In der aktuellen HTML-Syntax gibt es keine „physischen“ Element mehr. Es gibt keine Elemente, mit denen keine Semantik verknüpft ist. Das gilt rückwirkend auch für b und i.

- The i, b, em, & strong elements | HTML5 Doctor
- HTML elements - HTML5
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben