HTML hat versucht, die Präsentation zu entfernen und sich in Richtung Inhalt zu bewegen, was zu der Begründung geführt hat,
Inhaltsbedeutung (HTML) von
Präsentation (CSS) zu trennen. Dadurch werden Webseiten schlanker, da eine Reihe von Präsentationsanweisungen (in Form externer CSS-Dokumente) auf mehrere Seiten angewendet werden kann. Dadurch wird die Site auch einfacher zu verwalten, da globale Änderungen durch die Änderung einer einzelnen Datei vorgenommen werden können.
Einige fehlerhafte Tags sind im Grunde Präsentations-Tags (z. B.
small
), die durch aussagekräftigere und einfachere CSS-Regeln ersetzt werden können. Andere dienen nicht nur der Präsentation, sondern sind unnötig sperrig (wie das
font
-Tag) oder störend auf Kosten der Benutzerfreundlichkeit (wie das
blink
-Tag).
Etikett
Die folgenden Tags finden Sie möglicherweise häufig und bieten möglicherweise bessere Auswahlmöglichkeiten:
b
kann verwendet werden, um fette Elemente zu erzeugen. Es ist sinnvoller, stattdessen
strong
(was starke Hervorhebung bedeutet) zu verwenden oder CSS zu verwenden und die
font-weight: bold
-Regel hinzuzufügen, um fette Elemente anzuzeigen.
i
kann zum Generieren kursiver Elemente verwendet werden. Verwenden Sie
em
(zur Hervorhebung), was auch sinnvoller ist. Oder Sie können CSS verwenden, um Kursivschrift auszudrücken:
font-style: italic
big
kann zu einer größeren Schriftgröße führen. Verwenden Sie stattdessen einen Titel (z. B.
h1
,
h2
usw., wenn der Text bereits ein Titel ist), der ihm Bedeutung verleiht, oder verwenden Sie einfach das Attribut
font-size
in CSS, um mehr Kontrolle zu erlangen.
small
kann kleine Schriftarten erzeugen. CSS (
font-size
) übernimmt wieder mehr Kontrolle.
hr
kann verwendet werden, um eine horizontale Linie anzuzeigen. Es kommt selten vor, dass
hr
zum Entwerfen in CSS verwendet wird. Die
border-top
-Attribute oder einfachen Bilder von CSS sind hierfür besser geeignet.
border-bottom
Obwohl die oben genannten Tags mit den neuesten HTML-Standards kompatibel sind, haben sie für den Inhalt keine Bedeutung, die gute Tags haben sollten. Sie könnten nützlicher sein, aber sie sind nicht besonders schädlich und könnten leicht mit unschuldigen Butterklumpen purer Güte verwechselt werden, die nicht auf der Zunge zergehen, wenn man neben den folgenden schmutzigen Tags steht.
u
kann Unterstreichungen für Elemente erzeugen. Es erinnert Sie daran, dass der unterstrichene Text viele Zusammenhänge hat. Aus diesem Grund gab es dieses Tag schon lange nicht mehr – Sie müssen nicht verbundenen Text nicht unterstreichen.
center
kann verwendet werden, um Elemente innerhalb von Elementen zu zentrieren. Die CSS-Eigenschaft erlaubt nicht nur
text-align
, sondern auch
center
,
left
und
right
.
justify
menu
wird zum Erstellen von Menülisten verwendet. Es ist nicht so perfekt wie , weil ungeordnete Listen vielseitiger sind und
ul
ganz oben auf der Speisekarte steht.
Die Elemente
ul
layer
und ähneln sich darin, dass sie oben im CSS positioniert sind. Dies funktioniert nur in älteren Versionen von Netscape und ist daher nicht mehr sinnvoll.
div
blink
oder marquee
. Sag laut Nein! Das sollte man von ihnen erwarten, aber sie haben nur sehr begrenzte Unterstützung und machen nur sehr, sehr kranke Witze.
font
, mit dem sich der Schriftname, die Größe und die Farbe eines Elements definieren lassen, hat sich in der Tag-Welt zu Recht den Titel des berüchtigten Königs der Tags verdient. Alte Websites (und auch neue) wimmeln auf den Seiten wie eine weltweite Ameisenplage. Der größte Teil der Verbreitung von -Tags geht auf
font
Web-Erstellungs-
-Software zurück, die das -Tag einschließlich Farbe und Größe für jedes Element verwendet. Das
font
-Tag wird missbraucht, um auf jedem sich wiederholenden Element zu erscheinen (d. h. jedes Mal, wenn Sie ein
font
-Element verwenden), während Sie mit CSS sich wiederholende Elemente mit einem kurzen Code anwenden oder sogar die gesamte Website steuern können. Mit der CSS-Methode kann die Seite nicht nur schlanker
p
sein als eine
font
, die durch eine große Anzahl von
-Tags parasitiert wird, sondern sie ist auch einfacher zu warten, da Sie nur das ändern müssen Zeile
in der CSS-Datei, anstatt jedes -Tag einzeln zu ändern. Dies erhöht auch die Wahrscheinlichkeit, eine Website mit einem durchgehend einheitlichen Design zu pflegen.
font
-Tags und die unangemessene Verwendung von Tabellen sind zwei Hauptursachen für unnötiges Aufblähen.
Eigentum
font
Vielleicht denken Sie, dass Sie gute Etiketten verwenden, aber es lauern immer noch einige problematische Parasitenattribute, die jederzeit auftauchen können.
name
wird verwendet, um einen Namen für ein Element anzugeben. Es wird in Formularelementen wie
input
vollständig akzeptiert, aber an anderer Stelle wurde die Funktion von
name
durch das Attribut
id
ersetzt .
text
und
bgcolor
können die grundlegende Textfarbe und Hintergrundfarbe der Seite im
body
-Start-Tag definieren. Die CSS-Eigenschaften
color
und
background-color
bewirken dies auch, wenn sie auf den
body
-Selektor angewendet werden.
background
Sie können im Body-Tag ein Hintergrundbild angeben. CSS wird einen besseren Job machen, indem es Eigenschaften wie „background-image“ verwendet, um Hintergrundbilder zu verarbeiten.
link
,
alink
,
vlink
werden im
body
-Tag verwendet, um die Verbindung anzugeben (unbesucht, aktiviert und besucht). CSS-Babys─
:link
,
:active
und
:visited
werden den Job erledigen.
align
kann verwendet werden, um den Inhalt eines Elements auszurichten (z. B.
<div align="center">Stuff</div>).
), aber wie beim
center<code>center
-Tag ist die CSS-Eigenschaft
text-align<code>text-align
der neue Chef.
target<code>target
kann eine Verbindung auf unterschiedliche Weise öffnen. Am häufigsten wird das Öffnen eines neuen Fensters verwendet (z. B.
<a href="wherever.html" target="_blank). „>Hilf mir</a><code><a href=" wherever.html>Help me</a>
). Es sieht toll aus, aber Sie machen das nicht mit Ihrer Website. Benutzer erwarten nicht, dass etwas Magisches (wie ein neues Fenster) erscheint, und das häufigste Browser-Tool ist die Zurück-Schaltfläche des Browsers, die nicht verfügbar ist, wenn Sie ein neues Fenster öffnen. Es ist illegal und nicht einfach zu verwenden.
Beachten
behält die Präsentationseigenschaften von Tags wie
width<code>width
und
height<code>height
für Bilder sowie
cellpadding<code>cellpadding
und
cellspacing<code>cellspacing
für Tabellen bei, da diese Elemente verwenden häufig unterschiedliche Werte. Es ist keine perfekte Lösung, aber wenn Ihre Webseite viele Bilder und Tabellen enthält, haben Sie keine andere Wahl, als diese zu verwenden.
Das verwirrendste Leistungsattribut ist das
textarea<code>textarea
-Tag, das in der neuesten HTML-Version nur zwei zulässige Attribute hat,
cols<code>cols
und
rows<code>rows
. Dies ist auch der Fall notwendig.
Gutes Etikett, schlechte Verwendung
Um in Ihr Schlafzimmer zu gelangen, bücken Sie sich durch ein Hundeloch, aber warten Sie, es gibt eine Tür für Menschen mit einem Griff! Wow, schau mal – genau richtig, um einzutreten.
Verwenden Sie HTML-Tags (gute Tags), ob Sie es glauben oder nicht (glauben Sie es!), es gibt einen guten Grund: Sie verwenden sie mit einer guten Prämisse und Sie werden ein besseres Ergebnis erzielen.
Die Webseite selbst ist für Benutzer einfacher zu verwenden als die HTML-Tag-Syntax und -Semantik. Bildschirmleser stoßen häufig auf ein
ul<code>ul
-Tag oder haben
h1<code>h1
oder
h2<code>h2
Heben Sie sie hervor, wenn Sie Titel-Tags verwenden.
Das am häufigsten missbrauchte Tag in der Welt der HTML-Tags ist die Tabelle. Tabellen werden oft für das Layout verwendet, aber Tabellen sollten, wie vorgesehen, nur zur Anzeige tabellarischer Daten verwendet werden. Die Layout-Methode ohne Tabellen ist kein Zen-Aufklärungsstreben. Sie reduziert nicht nur das Gewicht der Webseite erheblich, sondern erleichtert auch die Pflege und Neugestaltung.
Beachten
Manchmal verwenden Designer auch die hier genannten Tags und Attribute (insbesondere die Verwendung von Tabellen für das Layout), um
Übergangsdesigns zu erstellen, die in älteren Browserversionen (insbesondere Netscape 4) funktionieren und auch darauf funktionieren moderne Browser. Tabellen ermöglichen eine bessere Präsentationskontrolle unter Netscape 4, wo CSS inkompetent ist. Leider gibt es nur wenige dieser Benutzer, während die Zahl der Benutzer mobiler Geräte, die die Mängel von Tabellenlayouts aufdecken, zunimmt. Das oben beschriebene tabellenlose Design verhindert diese Mängel und bleibt trotz einiger geringfügiger Leistungsänderungen für eine kleine Untergruppe von Benutzern in
allen Browsern voll funktionsfähig.
rahmen
Goldilocks hält eine Tasse Müsli für eine gute Idee, doch plötzlich tauchen drei riesige fleischfressende Säugetiere auf und werfen sie aus dem Fenster. Der Rahmen ist der Müslibecher. Sie scheinen zwar in Ordnung zu sein, aber sie haben das gefährdete Stadium erreicht und werden bald verschwinden.
Die meisten Websites verwenden keine Frames und normale Benutzer behandeln ein Dokument als Seite.
In einigen Fällen möchten Sie beispielsweise verhindern, dass Benutzer bestimmte Webseiten zu Lesezeichen hinzufügen, oder Sie möchten, dass Benutzer bestimmte Webseiten per E-Mail oder Instant-Messaging-Software empfehlen, oder Sie möchten, dass die gesamte Website sehr kompliziert wird. Dadurch wird es für Benutzer schwierig, Screenreader-Benutzer häufig zwischen Frames zu wechseln, oder Sie möchten Suchmaschinen verwirren. Genug ist genug, verwenden Sie Frames!
Kurz gesagt, Frameworks
erhöhen nur die Komplexität und
verlieren an Benutzerfreundlichkeit.
Beachten
Solange Sie die folgenden Regeln befolgen, werden Sie nie einen Fehler machen:
1) Verwenden Sie kein Tag oder Attribut, auch wenn es nur geringfügig mit der
Leistung übereinstimmt. Das ist eine CSS-Sache. Und CSS macht es besser.
2) Verwenden Sie das Tag für den Zweck
, der durch seinen Namen vorgeschlagen wird. Tabellen-Tags werden für Tabellendaten verwendet. Titel-Tags werden für Titel verwendet. Warte, warte.
3) Verwenden Sie
passende -Tags für bestimmte Inhalte. Verwenden Sie
list<code>list
für Listen, hx (x = 1 - 7) für Titel usw.
Erweiterte Lektüre
Grundlegendes zu Standards aus dem Advanced Guide to HTML: Brechen Sie schlechte Gewohnheiten ab und wechseln Sie zu Standards – XHMTL-Kompatibilität