Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

30 HTML Best Practices für Anfänger

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Der schwierigste Aspekt beim Betrieb von Nettuts + ist die Berücksichtigung so vieler unterschiedlicher Fähigkeiten. Wenn wir zu viele fortgeschrittene Tutorials posten, wird unser Anfängerpublikum nicht profitieren. Das Gleiche gilt für das Gegenteil. Wir geben unser Bestes, fühlen uns aber immer willkommen, wenn Sie sich vernachlässigt fühlen. Diese Seite ist für dich, sprich also! Damit ist das heutige Tutorial speziell für diejenigen gedacht, die gerade in die Webentwicklung eintauchen. Wenn Sie ein Jahr Erfahrung oder weniger haben, werden Ihnen hoffentlich einige der hier aufgeführten Tipps helfen, besser und schneller zu werden!

Ohne weitere Umschweife, lassen Sie uns 30 Best Practices überprüfen, die Sie beim Erstellen Ihres Markups beachten müssen.


1: Schließen Sie immer Ihre Tags

Früher war es nicht ungewöhnlich, Dinge wie diese zu sehen:

Beachten Sie, dass das umhüllende UL / OL-Tag weggelassen wurde. Darüber hinaus entschieden sich viele, die schließenden LI-Tags ebenfalls auszulassen. Nach heutigen Maßstäben ist dies einfach eine schlechte Praxis und sollte zu 100% vermieden werden. Schließen Sie immer Ihre Tags. Andernfalls werden Sie bei jeder Runde auf Validierungs- und Fehlerprobleme stoßen.

Besser


2: Deklariere den korrekten DocType

Declare doctype

Als ich jünger war, habe ich ziemlich viel an CSS-Foren teilgenommen. Wann immer ein Benutzer ein Problem hatte, bevor wir seine Situation betrachteten, mussten sie zuerst zwei Dinge tun:

  1. Überprüfen Sie die CSS-Datei. Beheben Sie alle notwendigen Fehler.
  2. Fügen Sie einen Doctype hinzu.

"Der DOCTYPE geht vor dem öffnenden HTML-Tag oben auf der Seite und teilt dem Browser mit, ob die Seite HTML, XHTML oder eine Mischung aus beiden enthält, damit das Markup korrekt interpretiert werden kann."

Websites zwischen vier verschiedenen Doctypes.

  1. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd" >
  2. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" >
  3. <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  4. <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Es gibt eine große Debatte über die richtige Wahl hier. Es gibt eine große Debatte über die richtige Wahl hier. An einem Punkt wurde es als beste Methode angesehen, die XHTML Strict-Version zu verwenden. Nach einigen Recherchen wurde jedoch festgestellt, dass die meisten Browser bei der Interpretation auf normales HTML zurückgreifen. Aus diesem Grund haben viele entschieden, stattdessen HTML 4.01 Strict zu verwenden. Die Quintessenz ist, dass jeder von ihnen Sie in Schach halten wird. Recherchieren Sie und machen Sie sich ein eigenes Bild.


3: Verwenden Sie niemals Inline-Styles

Wenn Sie hart an Ihrem Markup arbeiten, kann es manchmal verlockend sein, den einfachen Weg zu gehen und ein bisschen Styling zu schmücken.

Sicher - es sieht harmlos genug aus. Dies deutet jedoch auf einen Fehler in Ihrer Programmierpraxis hin.

    Denken Sie beim Erstellen Ihres Markups noch nicht einmal an das Styling. Sie beginnen erst mit dem Hinzufügen von Stilen, sobald die Seite vollständig codiert wurde.

Es ist, als würden wir die Ströme in Ghostbusters überqueren. Es ist einfach keine gute Idee.
 -Chris Coyier (in Bezug auf etwas völlig unabhängig voneinander.)

Beenden Sie stattdessen Ihr Markup und verweisen Sie dann auf das P-Tag aus Ihrem externen Stylesheet.

Besser


4: Legen Sie alle externen CSS-Dateien in das Kopf-Tag

Technisch können Sie Stylesheets an beliebiger Stelle platzieren. Die HTML-Spezifikation empfiehlt jedoch, dass sie in dem HEAD-Tag des Dokuments platziert werden. Der Hauptvorteil ist, dass Ihre Seiten scheinbar schneller geladen werden.

Bei der Suche nach Leistung bei Yahoo! haben wir festgestellt, dass das Verschieben von Stylesheets in das Dokument HEAD die Seiten schneller lädt. Dies liegt daran, dass das Einfügen von Stylesheets in den HEAD die progressive Wiedergabe der Seite ermöglicht.
- ySlow-Team


5: Betrachten Sie das Platzieren von Javascript-Dateien unten

Place JS at bottom

Denken Sie daran - das Hauptziel besteht darin, die Seite so schnell wie möglich für den Benutzer zu laden. Wenn ein Skript geladen wird, kann der Browser nicht fortgesetzt werden, bis die gesamte Datei geladen wurde. Somit muss der Benutzer länger warten, bevor er Fortschritte bemerkt.

Wenn Sie über JS-Dateien verfügen, deren einziger Zweck darin besteht, Funktionen hinzuzufügen, z. B. nachdem eine Schaltfläche angeklickt wurde, gehen Sie vor und platzieren Sie diese Dateien am unteren Rand, unmittelbar vor dem schließenden body-Tag. Dies ist absolut eine Best Practice.

Besser


6: Verwenden Sie niemals Inline-Javascript. Es ist nicht 1996!

Eine andere gängige Praxis vor Jahren war JS-Befehle direkt in Tags zu platzieren. Dies war sehr häufig bei einfachen Bildergalerien. Im Wesentlichen wurde ein "onclick" -Attribut an das Tag angehängt. Der Wert wäre dann gleich einer JS-Prozedur. Unnötig zu sagen, dass Sie das niemals tun sollten. Übertragen Sie diesen Code stattdessen in eine externe JS-Datei und verwenden Sie "addEventListener / attachEvent", um Ihr gewünschtes Ereignis anzuhören. Oder wenn Sie ein Framework wie jQuery verwenden, verwenden Sie einfach die "Klick" -Methode.


7: Kontinuierlich validieren kontinuierlich validieren

validate continuously

Ich habe kürzlich darüber gebloggt, dass die Idee der Validierung von denjenigen, die ihren Zweck nicht vollständig verstehen, völlig falsch ausgelegt wurde. Wie ich in dem Artikel erwähne, "Validierung sollte für Sie arbeiten, nicht dagegen." 

Vor allem beim ersten Start empfehle ich Ihnen jedoch dringend, die Web Developer Toolbar herunterzuladen und die Optionen "Validate HTML" und "Validate CSS" kontinuierlich zu verwenden. Während CSS etwas leicht zu lernen ist, kann es auch dazu führen, dass Sie sich die Haare ausreißen. Wie Sie häufig feststellen, ist es Ihr schäbiges Markup, das dieses merkwürdige Leerzeichen auf der Seite verursacht. Validieren, validieren, validieren.


8: Lade Firebug herunter Download Firebug

download firebug

Ich kann dieses hier nicht genug empfehlen. Firebug ist ohne Zweifel das beste Plugin, das Sie jemals beim Erstellen von Websites verwenden werden. Es bietet nicht nur ein unglaubliches Javascript-Debugging, sondern Sie erfahren auch, wie Sie bestimmen können, welche Elemente dieses zusätzliche Padding erben, von dem Sie nichts wussten. Lade es herunter!


9: Verwenden Sie Firebug!

use firebug

Nach meinen Erfahrungen nutzen viele Benutzer nur etwa 20% der Firebug-Funktionen. Du machst dir wirklich einen schlechten Dienst. Nehmen Sie sich ein paar Stunden Zeit und durchsuchen Sie das Internet nach jedem nützlichen Tutorial, das Sie zu diesem Thema finden können.

Ressourcen


10: Halten Sie Ihre Tag-Namen in Kleinbuchstaben

Technisch gesehen können Sie Ihre Tag-Namen groß schreiben.

Trotzdem, bitte nicht. Es dient keinem Zweck und tut meinen Augen weh - ganz zu schweigen von der Tatsache, dass es mich an die Word-Funktion von Microsoft Word erinnert!

Besser


11: Verwenden Sie H1 - H6 Tags

Zugegebenermaßen tendiere ich dazu, nachzulassen. Es empfiehlt sich, alle sechs dieser Tags zu verwenden. Wenn ich ehrlich bin, setze ich normalerweise nur die ersten vier ein; aber ich arbeite daran! :) Zwingen Sie sich aus semantischen und SEO-Gründen dazu, das P-Tag durch ein H6 zu ersetzen, wenn es angebracht ist.


12: Wenn Sie einen Blog erstellen, speichern Sie den H1 für den Artikeltitel h1 gespeichert für Titel des Artikels.

h1 saved for title of article.

Gerade heute morgen, auf Twitter, habe ich unsere Follower gefragt, ob sie es für klüger hielten, das H1-Tag als Logo zu verwenden oder es stattdessen als Titel des Artikels zu verwenden. Etwa 80% der zurückgegebenen Tweets waren für die letztere Methode.

Wie bei allem, bestimmen Sie, was am besten für Ihre eigene Website ist. Wenn Sie jedoch einen Blog erstellen, empfehle ich Ihnen, Ihre H1-Tags für Ihren Artikeltitel zu speichern. Für SEO-Zwecke ist dies eine bessere Praxis - meiner Meinung nach.


13: Laden Sie ySlow herunter


download yslow

Besonders in den letzten Jahren hat das Yahoo-Team auf unserem Gebiet großartige Arbeit geleistet. Vor nicht allzu langer Zeit veröffentlichten sie eine Erweiterung für Firebug namens ySlow. Wenn diese Option aktiviert ist, analysiert sie die angegebene Website und gibt eine Art "Berichtskarte" zurück, in der die Bereiche aufgeführt sind, in denen Ihre Website verbessert werden muss. Es kann ein bisschen hart sein, aber es ist alles für das größere Wohl. Ich empfehle es sehr.


14: Navigation mit einer ungeordneten Liste

Wrap navigation with unordered lists

Jede Webseite hat einen Navigationsbereich. Während Sie mit der Formatierung davonkommen können:

Ich würde Sie ermutigen, diese Methode aus semantischen Gründen nicht zu verwenden.  Ihre Aufgabe ist es, den bestmöglichen Code zu schreiben, zu dem Sie fähig sind.

Warum sollten wir eine Liste von Navigationslinks mit etwas anderem als einer ungeordneten LIST gestalten?

Das UL-Tag soll eine Liste von Elementen enthalten.

Besser


15: Lernen Sie, wie Sie auf den IE abzielen

Zweifellos wirst du irgendwann im IE schreien. Es ist tatsächlich eine Verbindungserfahrung für die Gemeinschaft geworden. Wenn ich auf Twitter lese, wie einer meiner Freunde die Kräfte des IE bekämpft, lächle ich nur und denke: "Ich weiß, wie du dich fühlst, Kumpel."

Der erste Schritt, nachdem Sie Ihre primäre CSS-Datei fertig gestellt haben, besteht darin, eine eindeutige "ie.css"-Datei zu erstellen. Sie können es dann nur für IE referenzieren, indem Sie den folgenden Code verwenden.

Dieser Code sagt: "Wenn der Browser des Benutzers Internet Explorer 6 oder niedriger ist, importieren Sie dieses Stylesheet. Andernfalls tun Sie nichts." Wenn Sie IE7 ebenfalls kompensieren müssen, ersetzen Sie einfach "lt" durch "lte" (kleiner oder gleich).


16: Wählen Sie einen großen Code-Editor Wähle einen tollen Code-Editor

choose a great code editor

Ob Sie auf Windows oder Mac sind, es gibt viele fantastische Code-Editoren, die wunderbar für Sie arbeiten. Persönlich habe ich einen Mac und einen PC Seite an Seite, die ich während meines Tages benutze. Als Ergebnis habe ich ein ziemlich gutes Wissen darüber, was verfügbar ist, entwickelt. Hier sind meine Top-Auswahl / Empfehlungen in Reihenfolge:

Mac Liebhaber

PC-Liebhaber


17: Sobald die Website fertig ist, komprimieren!

Compress

Indem Sie Ihre CSS- und JavaScript-Dateien komprimieren, können Sie die Größe jeder Datei um etwa 25% reduzieren. Bitte machen Sie das nicht während der Entwicklung. Sobald die Website jedoch mehr oder weniger vollständig ist, nutzen Sie einige Online-Komprimierungsprogramme, um sich etwas Bandbreite zu sparen.

Javascript-Kompressionsdienste

CSS-Optimierer


18: Schneiden, Schneiden, Schneiden

cut cut cut

Wenn ich auf meine erste Website zurückblicke, muss ich einen SEVERE Fall von Divitis gehabt haben. Dein natürlicher Instinkt besteht darin, jeden Absatz mit einem div zu umhüllen und ihn dann mit einem weiteren div für ein gutes Maß zu umhüllen. Wie Sie schnell erfahren werden, ist dies sehr ineffizient.

Wenn Sie Ihr Markup abgeschlossen haben, gehen Sie noch zwei Mal darüber und finden Sie Möglichkeiten, die Anzahl der Elemente auf der Seite zu reduzieren. Braucht UL wirklich eine eigene Verpackung? Ich denke nicht.

So wie der Schlüssel zum Schreiben "schneiden, schneiden, schneiden" ist, gilt das Gleiche für Ihr Markup.


 19: Alle Bilder erfordern "Alt" -Attribute

Es ist einfach, die Notwendigkeit von alt-Attributen innerhalb von Bild-Tags zu ignorieren. Aus Gründen der Zugänglichkeit und Validierung ist es jedoch sehr wichtig, dass Sie einen zusätzlichen Moment brauchen, um diese Abschnitte zu füllen.

Schlecht

Besser


20: Bleib spät dran

Ich bezweifle sehr, dass ich die Einzige bin, die irgendwann beim Lernen aufblickte und merkte, dass ich bis in den frühen Morgen hinein in einem stockdunklen Raum war. Wenn Sie sich in einer ähnlichen Situation befinden, können Sie sicher sein, dass Sie das richtige Feld ausgewählt haben.

Die erstaunlichen "AHHA" -Momente, zumindest für mich, kommen immer spät in der Nacht vor. Dies war der Fall, als ich anfing, genau zu verstehen, was Javascript-Verschlüsse waren. Es ist ein großartiges Gefühl, das du erleben musst, wenn du es nicht schon getan hast.


21: Quelle anzeigen

view source

Gibt es eine bessere Möglichkeit, HTML zu lernen, als deine Helden zu kopieren? Anfangs sind wir alle Kopierer! Dann beginnen Sie langsam, Ihre eigenen Stile / Methoden zu entwickeln. Besuchen Sie also die Websites derjenigen, die Sie respektieren. Wie haben sie diesen und jenen Abschnitt programmiert? Lerne und kopiere von ihnen. Wir haben es alle getan, und du solltest es auch tun. (Stehlen Sie nicht das Design; lernen Sie einfach vom Programmierstil.)

Hast du irgendwelche coolen Javascript-Effekte bemerkt, die du gerne lernen würdest? Es ist wahrscheinlich, dass er ein Plugin verwendet, um den Effekt zu erzielen. Zeigen Sie die Quelle an und suchen Sie nach dem HEAD-Tag für den Namen des Skripts. Dann Google und implementieren Sie es auf Ihrer eigenen Website! Yay.


22: Style ALLE Elemente

Diese Best Practice gilt insbesondere für das Design für Kunden. Nur weil Sie kein blockquote verwenden, bedeutet das nicht, dass der Client nicht. Benutze niemals geordnete Listen?  Das heißt nicht, dass er es nicht tut! Tun Sie sich selbst einen Service und erstellen Sie eine spezielle Seite, die speziell das Styling jedes Elements zeigt: ul, ol, p, h1-h6, Blockquotes usw.


23: Verwenden Sie Twitter

Use Twitter

In letzter Zeit kann ich den Fernseher nicht einschalten, ohne einen Hinweis auf Twitter zu hören.es ist wirklich ziemlich widerlich geworden. Ich habe nicht die Absicht, Larry King zuzuhören, der für seinen Twitter-Account werben soll - von dem wir alle wissen, dass er ihn nicht manuell aktualisiert. Yay für Assistenten! Wie viele Mütter haben sich nach Oprahs Genehmigung für Konten angemeldet? Wir können uns nur auf den Tag freuen, als nur wenige von uns den Service und sein "Wasserkühler" -Potenzial kennen.

Ursprünglich war die Idee hinter Twitter, "was du getan hast" zu posten. Obwohl dies immer noch in geringem Maße gilt, ist es in unserer Branche viel mehr zu einem Netzwerkwerkzeug geworden. Wenn ein Webentwickler, den ich bewundere, einen Link zu einem Artikel veröffentlicht, den er interessant fand, dann glaubst du besser, dass ich es mir auch ansehen werde - und du solltest es auch! Dies ist der Grund, warum Websites wie Digg immer nervöser werden.

Twitter Snippet

Wenn Sie sich gerade angemeldet haben, vergessen Sie nicht, uns zu folgen: NETTUTS


24: Lerne Photoshop Lerne Photoshop

Learn Photoshop

Ein neuer Kommentator von Nettuts + hat uns angegriffen, weil er ein paar Empfehlungen von Psdtuts + gepostet hat. Er argumentierte, dass Photoshop-Tutorials in einem Webentwicklungsblog keine Geschäfte machen. Ich bin mir nicht sicher über ihn, aber Photoshop ist rund um die Uhr auf meinem Computer geöffnet.

Tatsächlich wird Photoshop sehr wahrscheinlich das wichtigere Werkzeug, das Sie haben. Sobald Sie HTML und CSS gelernt haben, würde ich Ihnen persönlich empfehlen, so viele Photoshop-Techniken wie möglich zu lernen.

  1.  Besuchen Sie den Abschnitt Videos bei Psdtuts +
  2. Holen Sie sich über $ 25, um sich für eine einmonatige Mitgliedschaft bei Lynda.com anzumelden. Sieh dir jedes Video an, das du finden kannst.
  3. Genieße die "You Suck at Photoshop" -Serie.
  4. Nehmen Sie sich ein paar Stunden Zeit, um sich so viele PS-Tastenkürzel wie möglich einzuprägen.

25: Lerne jedes HTML-Tag

Es gibt buchstäblich Dutzende von HTML-Tags, auf die Sie nicht jeden Tag stoßen werden. Trotzdem heißt das nicht, dass du sie nicht lernen solltest! Kennen Sie das "abbr" -Tag? Was ist mit "zitieren"? Diese beiden verdienen allein einen Platz in deiner Werkzeugkiste. Lerne alle von ihnen!

Übrigens, falls Sie mit den beiden oben genannten nicht vertraut sind:

  • abbr macht ziemlich genau das, was Sie erwarten würden. Es bezieht sich auf eine Abkürzung. "Blvd" könnte mit einem -Tag versehen werden, weil es eine Abkürzung für "boulevard" ist.
  • cite wird verwendet, um auf den Titel einiger Arbeiten zu verweisen. Wenn Sie beispielsweise auf diesen Artikel in Ihrem eigenen Blog verweisen, können Sie "30 bewährte HTML-Vorgehensweisen für Anfänger" innerhalb eines -Tags einfügen. Beachten Sie, dass es nicht verwendet werden sollte, um den Autor eines Zitats zu referenzieren. Dies ist ein häufiges Missverständnis.

26: Teilnahme an der Gemeinschaft

Genauso wie Websites wie unseres wesentlich dazu beitragen, das Wissen eines Webentwicklers zu erweitern, sollten Sie es auch tun! Endlich herausgefunden, wie man deine Elemente richtig schweben lässt? Mache einen Blogeintrag, um anderen zu zeigen, wie. Es wird immer diejenigen geben, die weniger Erfahrung haben als du. Du wirst nicht nur zur Gemeinschaft beitragen, sondern auch dich selbst unterrichten. Hast du jemals bemerkt, wie du etwas wirklich nicht verstehst, bis du gezwungen wirst, es zu lehren?


27: Verwenden Sie einen CSS-Reset

Dies ist ein weiterer Bereich, der zu Tode debattiert wurde. CSS resets: verwenden oder nicht verwenden; das ist hier die Frage. Wenn ich meinen eigenen persönlichen Ratschlag anbieten würde, würde ich 100% empfehlen, dass Sie Ihre eigene Reset-Datei erstellen. Beginnen Sie mit dem Herunterladen eines beliebten, wie Eric Meyers, und dann langsam, wie Sie mehr erfahren, beginnen Sie, es in Ihre eigenen zu ändern. Wenn Sie dies nicht tun, werden Sie nicht wirklich verstehen, warum Ihre Listenelemente dieses zusätzliche Padding erhalten, wenn Sie es nirgends in Ihrer CSS-Datei angegeben haben. Sparen Sie sich die Wut und setzen Sie alles zurück! Dieser sollte dich beginnen.

28: Linie sie auf!


Line em up

Im Allgemeinen sollten Sie sich bemühen, Ihre Elemente so gut wie möglich anzugleichen. Schau dir deine Lieblingsdesigns an. Schau dir deine Lieblingsdesigns an. Ist Ihnen aufgefallen, wie sich Überschrift, Symbol, Absatz und Logo auf einer anderen Seite befinden? Dies nicht zu tun ist eines der größten Anzeichen für einen Anfänger. Stellen Sie es sich so vor: Wenn ich Sie frage, warum Sie an dieser Stelle ein Element platziert haben, sollten Sie mir einen genauen Grund angeben können.


29: Schneiden Sie eine PSD

Slice a PSD

Okay, Sie haben sich ein solides Verständnis von HTML, CSS und Photoshop angeeignet. Der nächste Schritt besteht darin, Ihre erste PSD in eine funktionierende Website umzuwandeln. Mach dir keine Sorgen. es ist nicht so schwer wie du vielleicht denkst. Ich kann mir keinen besseren Weg vorstellen, Ihre Fähigkeiten auf die Probe zu stellen. Wenn Sie Hilfe benötigen, lesen Sie diese ausführlichen Videoanleitungen, die Ihnen genau zeigen, wie Sie Ihre Arbeit erledigen können.


30: Benutze kein Framework ... Noch nicht

Frameworks, egal ob für Javascript oder CSS, sind fantastisch; aber bitte benutze sie nicht beim ersten Start. Obwohl argumentiert werden könnte, dass jQuery und Javascript gleichzeitig erlernt werden können, kann dasselbe nicht für CSS gemacht werden. Ich habe das 960 CSS Framework persönlich gefördert und nutze es oft. Wenn Sie also noch CSS lernen - also das erste Jahr -, werden Sie sich nur noch verwirrter fühlen, wenn Sie eines verwenden.

CSS-Frameworks sind für erfahrene Entwickler, die sich etwas Zeit sparen wollen. Sie sind nicht für Anfänger.

  • Folgen Sie uns auf Twitter, oder abonnieren Sie den NETTUTS RSS-Feed für mehr tägliche Web-Entwicklungstuts und -artikel.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.