Teilen Sie dies:
9 Fehler, die Sie beim Erstellen einer Webseite nicht machen sollten
Das Erstellen einer Webseite mit HTML und CSS ist ziemlich unkompliziert. So erstellen Sie eine Website: Für Anfänger So erstellen Sie eine Website: Für Anfänger Heute werde ich Sie durch den gesamten Prozess der Erstellung einer vollständigen Website führen. Mach dir keine Sorgen, wenn das schwierig klingt. Ich werde Sie bei jedem Schritt des Weges durch das Haus führen. Weiterlesen . Aber es ist leicht, Fehler zu machen, und es gibt einige Dinge, über die Sie möglicherweise nicht nachdenken. Meistens machen diese kleinen Fehler keinen großen Unterschied.
Aber auf lange Sicht können sie Ihr Leben schwieriger machen. Diese neun Fehler sind leicht zu begehen, aber wenn Sie sie früher und später abstellen, wird Ihre Seite besser aussehen, einfacher zu warten und funktioniert so, wie Sie es möchten.
1. Inline-Styling
HTML und CSS bieten unter anderem die Möglichkeit, jede Textzeile zu formatieren - jedes einzelne Wort - wann immer Sie möchten. Das bedeutet jedoch nicht, dass Sie diese Fähigkeit nutzen sollten.
Hier ein Beispiel für einen Inline-Stil, mit dem Sie einen Absatz größer als die umgebenden Absätze machen und ihn in einer anderen Farbe hervorheben können:
Dein Text hier.
Dadurch erhält der Absatz einen CSS-Stil. Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials. Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials. Neugierig auf HTML, CSS und JavaScript? Wenn Sie der Meinung sind, wie Sie eine Website von Grund auf neu erstellen können, dann haben Sie hier einige großartige Schritt-für-Schritt-Anleitungen, die einen Versuch wert sind. Lesen Sie mehr, das mit dem Abschluss des Absatzes endet. Scheint ziemlich effizient, richtig?
Es gibt ein großes Problem damit: Wenn Sie viele Dinge auf Ihrer Website ändern möchten, müssen Sie alle Instanzen des Inline-Stylings finden und ändern. Wenn Sie 100 verschiedene Absätze mit einer Textgröße von 120% und blau haben, müssen Sie alle 100 finden und in das ändern, in dem Sie sich für ein besseres Format entschieden haben.
Verwenden Sie stattdessen ein CSS-Stylesheet. Hier ist der Stil, den Sie für den obigen Absatz verwenden würden:
p.wichtig Größe: 120%; Farbe blau; Anstatt den Inline-Stil zu verwenden, können Sie einfach diese Zeile verwenden:
Dein Text hier.
Und dein Absatz wird groß und blau sein. Und wenn Sie das ändern “wichtig” Klasse in Ihrem CSS, werden sich alle ändern.
2. Tabellen für das Layout
Früher benutzten die Leute Tabellen regelmäßig, um das Seitenlayout zu formatieren. Mithilfe einer Tabelle können Sie die Elemente auf Ihrer Seite in Spalten und Zeilen anordnen sowie verschiedene Ausrichtungen und Stile anwenden. Sogar einzellige Tabellen würden verwendet, um den Inhalt korrekt auszurichten. Aber diese Verwendung von Tabellen ist im Allgemeinen verpönt.
Ähnlich wie bei Inline-Styles ist die Verwendung von CSS anstelle von HTML-Tabellen für das Layout einfacher zu verwalten. Wenn Sie Änderungen auf Dutzenden oder Hunderten von Seiten vornehmen möchten, ist es viel einfacher, Ihr Stylesheet zu bearbeiten, als jede Seite durchzugehen und die Tabellen zu optimieren.
Das Lesen von CSS-Layouts ist in der Regel einfacher als das Lesen von HTML-Tabellen. Vor allem, wenn Sie am Ende viele Tabellenebenen ineinander schachteln. Es ist möglicherweise nicht ganz einfach, zwischen Ihrem HTML-Dokument und Ihrem Stylesheet hin und her zu wechseln, um genau zu sehen, was passiert, aber der Inhalt Ihrer Seite wird klarer und einfacher zu bearbeiten.
Tabellen hier und dort zu verwenden, um Seiten in Spalten aufzuteilen, ist keine Todsünde. Manchmal ist es einfacher und schneller, als mit CSS herumzuspielen. Wenn Sie jedoch riesige, mehrstufige Tabellen erstellen, sollten Sie eine Neuformatierung mit CSS in Betracht ziehen.
3. Veraltetes HTML
HTML ändert sich wie jede Sprache regelmäßig. Offiziell anerkannte Tags ändern sich und einige werden nicht mehr unterstützt. Selbst wenn diese Tags noch funktionieren, sollten Sie sie am besten vermeiden.
Zum Beispiel, wenn Sie es gewohnt sind, die tag für fett und die Tag für Kursivschrift, Sie sind hinter den Zeiten. und (zum “Betonung”) sind jetzt die Standard-Tags.
Die meisten veralteten Tags wurden durch CSS ersetzt. Daher müssen Sie Stile (vorzugsweise keine Inline-Tags) verwenden, um denselben Effekt zu erzielen. Wenn Sie nicht sicher sind, wie ein veraltetes Tag ersetzt werden soll oder ein bestimmtes Tag noch verwendet wird, lesen Sie die offizielle HTML-Dokumentation oder führen Sie einfach eine Schnellsuche aus.
4. Inline-JavaScript
Einige Webseiten verwenden JavaScript, um zusätzliche Funktionen für JavaScript und Webentwicklung hinzuzufügen: Verwenden des Dokumentobjektmodells JavaScript und Webentwicklung: Verwenden des Dokumentobjektmodells In diesem Artikel werden Sie mit dem Dokumentskelett vertraut gemacht, mit dem JavaScript arbeitet. Wenn Sie mit diesem abstrakten Dokumentobjektmodell vertraut sind, können Sie JavaScript schreiben, das auf jeder Webseite funktioniert. Weiterlesen . Es kann Webseiten interaktiv machen, Text bei der Eingabe überprüfen, Animationen hinzufügen, Antworten auf Benutzeraktionen bereitstellen und so weiter. Kurz gesagt, es kann eine Seite nützlicher machen, indem zusätzliches Verhalten bereitgestellt wird.
Ähnlich wie CSS können Sie Ihrem HTML-Code Inline-JavaScript hinzufügen. Wie auch CSS wird dies generell nicht empfohlen. Neben der möglicherweise schwierigeren Wartung gibt es einige andere Gründe, die diese Ermahnung rechtfertigen.
Inline-JavaScript kann eine größere Bandbreite als ein Skript verwenden, das mit einer anderen Datei verknüpft ist. Ein Prozess namens Minification komprimiert HTML und CSS, bevor er an einen Benutzer gesendet wird, wodurch weniger Bandbreite für Breitband- oder mobile Verbindungen erforderlich ist. Inline-JavaScript kann jedoch nicht minimiert werden. Es wird auch nicht zwischengespeichert, sondern eine separate JavaScript-Datei können zwischengespeichert werden.
All diese Faktoren machen Inline-JavaScript bandbreitenintensiver.
Es ist auch schwieriger zu debuggen, da Sie einen JavaScript-Validator für eine JavaScript-Datei verwenden können. Inline-Skripts funktionieren jedoch nicht. Und wieder macht es saubereres und leichter zu pflegendes HTML.
5. Mehrere H1-Tags
Überschriften-Tags sind großartig. Sie erleichtern das Überfliegen von Seiten, sie können Ihnen einen SEO-Schub geben und sie können verwendet werden, um bestimmte Punkte hervorzuheben.
Es gibt jedoch sechs verschiedene Kategorien von Überschriften-Tags. Es sollte wirklich nur ein H1-Tag auf Ihrer Seite sein. Und das ist oft der Titel der Seite (besonders auf Blogs und ähnlichen Websites). Vielleicht denken Sie, dass das Setzen einer Reihe von Keywords in H1-Tags die Wahrscheinlichkeit erhöht, dass Google diese Keywords aufruft und Ihre Website in den Ergebnissen höher bewertet.
Was es aber wirklich macht, macht Ihre Seite verwirrender und schwerer zu lesen. Dies wird alle SEO-Vorteile, die Sie sowieso sehen, negieren.
Verwenden Sie H2, H3 und die übrigen Überschriften, um Ihre Seite besser zu gliedern. Die Ebene der Überschrift sollte Ihrem Leser eine Vorstellung davon vermitteln, wie wichtig der folgende Abschnitt ist. Wenn Sie sie in die Irre geführt haben, wissen sie es und werden nicht glücklich sein.
6. Bildalarme überspringen
Jedem Bild kann ein gegeben werden “alt” Attribut, das eine bestimmte Textzeile anzeigt, wenn das Bild nicht angezeigt werden kann. Dies scheint keine große Sache zu sein, insbesondere bei modernen Browsern (Desktop und Mobile), die nahezu alles anzeigen können.
Das Hinzufügen von alt-Attributen ist jedoch ein großer Fehler, insbesondere im Zeitalter des ständigen mobilen Browsens. Mobile Verbindungen sind nicht immer großartig. Wenn ein Browser ein Bild nicht laden kann, hat der Leser keine Vorstellung davon, was er dort sehen sollte. Ein alt-Attribut kann das beheben.
Wenn jemand einen Bildschirmleser verwendet, macht VoiceOver Apple-Geräte so gut zugänglich wie nie zuvor VoiceOver macht Apple-Geräte besser als je zuvor Präsident der American Foundation of the Blind glaubt, dass "Apple bisher mehr für die Barrierefreiheit getan hat als jedes andere Unternehmen" - und VoiceOver spielte dabei eine große Rolle. Lesen Sie mehr oder eine andere Eingabehilfefunktion. Dieses alt-Attribut kann alles sein, was sie aus dem Bild bekommen.
Natürlich gibt es auch potenzielle SEO-Vorteile. Suchmaschinen können kurze, beschreibende ALT-Attribute indizieren. Der größte Vorteil dabei ist jedoch, Ihren Lesern zu helfen.
7. Tags nicht schließen
Es gibt einige HTML-Tags, die Sie nicht schließen können, wie beispielsweise
und
In erster Linie besteht trotz der Fortschritte in der Browsertechnologie durchaus die Möglichkeit, dass der Browser Ihren Inhalt nicht ordnungsgemäß anzeigt, wenn Sie Ihre Tags nicht geschlossen haben. Das Anwenden von Stilen kann zu unvorhersehbaren Ergebnissen führen, wie der Stack Exchange-Benutzer robertc demonstriert.
Es kommt darauf an, dass Browser schließende Tags erwarten. Sie brauchen sie nicht unbedingt… aber sie profitieren definitiv vom richtigen HTML-Code, wenn sie versuchen, Ihre Seite anzuzeigen.
Glücklicherweise dauert es nicht viel, um Ihre Tags zu schließen, besonders wenn Sie einen guten HTML-Editor verwenden.
8. Ohne DOKTYP
Am Anfang von HTML-Dokumenten wird normalerweise eine DOCTYPE-Deklaration wie die folgende angezeigt:
Es ist etwas, über das nicht oft geredet wird, aber es ist ein wichtiges Element auf Ihrer Seite. Die DOCTYPE-Deklaration teilt einem Browser mit, welchen HTML-Typ Sie verwenden. Dadurch kann der HTML-Code korrekt dargestellt werden.
Wenn Sie die DOCTYPE-Deklaration überspringen, wird die Seite gerendert “Quirks-Modus.” Dies ist die Verteidigung des modernen Browsers gegen veraltete Webseiten. Und es ändert sich, wie Ihre Seite angezeigt wird. Ein kurzer Blick auf den Quirks-Modus von Firefox zeigt, dass sich die Empfindlichkeit der Groß- / Kleinschreibung ändert, die Schriftarten-Eigenschaften nicht in Tabellen erben, die Schriftgrößen werden unterschiedlich berechnet und Bilder ohne ALT-Attribute werden manchmal falsch angezeigt.
Die meisten dieser Dinge sind relativ gering. Wenn Sie jedoch möchten, dass Ihre Seite korrekt angezeigt wird, sollten Sie sicherstellen, dass der vollständige Standardmodus eines Browsers aktiviert ist.
Und dafür brauchen Sie einen DOKTYP. (Wenn Sie nicht sicher sind, was Sie verwenden sollen, verwenden Sie einfach .)
9. Vernachlässigen Sie das Schema Markup
Schema-Markup hilft Suchmaschinen dabei, eine bessere Vorstellung davon zu erhalten, was auf Ihrer Seite angezeigt wird. Genauer gesagt, dieses Markup teilt den Suchmaschinen mit, worüber Sie in den einzelnen Abschnitten schreiben.
In einem Artikel können Sie beispielsweise mit einer Schemamarkierung einer Suchmaschine Titel, Autor, Datum, Herausgeber und andere nützliche Informationen zu einem Artikel mitteilen.
Es gibt Schemata für Filme, Bücher, Organisationen, Menschen, Restaurants, Produkte, Orte, Aktionen, verschiedene Arten von Daten, Musik, Skulpturen, Reservierungen, Dienstleistungen, Geldautomaten, Brauereien und fast alles, was Sie sich vorstellen können. Es ist ziemlich erstaunlich.
Sie können auf jeden Fall ohne Schema-Markup davonkommen. Ihre Seite wird ohne sie korrekt angezeigt. Ihre Leser werden nicht einmal wissen, dass es da ist. Aber durch das Einfügen dieses Markups kann viel gewonnen werden. Suchmaschinen können viel detailliertere und nützliche Informationen zu Ihrer Seite bereitstellen, einschließlich umfassender Schnipsel.
Mit dem Schema-Markup-Tool von Google ist der Prozess eigentlich ziemlich einfach.
Gewöhnen Sie sich an HTML Best Practices
Diese bewährten Methoden zur Gewohnheit zu machen, kann eine Weile dauern. Und manchmal fühlt es sich an, als ob Sie sich viel Zeit für etwas nehmen, was Sie nicht besonders reizt. Stellen Sie jedoch sicher, dass Ihr HTML und CSS mit diesen Step-by-Step-Tutorials HTML und CSS lernen. Lernen Sie mit diesen Step-by-Step-Tutorials HTML und CSS. Neugierig auf HTML, CSS und JavaScript? Wenn Sie der Meinung sind, wie Sie eine Website von Grund auf neu erstellen können, dann haben Sie hier einige großartige Schritt-für-Schritt-Anleitungen, die einen Versuch wert sind. Read More ist übersichtlich, einfach zu bedienen und wartbar und erspart Ihnen auf lange Sicht viel Zeit.
Welche anderen guten Gewohnheiten haben Sie beim Erstellen von Webseiten für sinnvoll erachtet? Stimmen Sie einer der oben genannten Praktiken nicht zu? Teilen Sie Ihre Gedanken in den Kommentaren unten mit!