Verwenden Sie sauberes HTML-Markup zum Erstellen Ihrer Seiten

Verwenden Sie sauberes HTML-Markup zum Erstellen Ihrer Seiten

Das Internet ist ein Organismus, der sich ständig weiterentwickelt. Es ist wichtig, Seiten zu erstellen, die sich langfristig an die Entwicklung des Internets anpassen können. Dadurch kann Ihre Website schnell mit der rasanten Entwicklung des Internets Schritt halten.

Die Verwendung sauberer HTML-Markups und die Erstellung standardkonformer Seiten können Ihnen dabei helfen und, was noch wichtiger ist, Sie können dadurch bei zukünftigen Vorgängen viel Zeit und Geld sparen.

Die Webseiten-Technologie hat sich parallel zur Entwicklung der Internet-Technologie weiterentwickelt. Die HTML-Technologie wird schon seit langer Zeit entwickelt und die dazugehörigen Technologien haben sich ebenfalls stabil weiterentwickelt.

Zuerst kam Javascript, dann CSS, XML und jetzt AJAX. Auch HTML5 wird zunehmend weithin angenommen – Firefox, Safari, Opera und Chrome unterstützen HTML5 bereits (in dieser Hinsicht bremst Microsofts Internet Explorer das Internet wieder einmal aus #-_-)

In diesem Artikel untersuchen wir grundlegende Webstandards. Wir diskutieren, was sie sind, warum sie wichtig sind und wie diese wichtigen, aber oft übersehenen Probleme angegangen werden können.


Was ist „sauberes“ HTML-Markup?

Einfach ausgedrückt bedeutet „sauberes“ HTML-Markup, dass es keine Unordnung aufweist, Standards einhält und aussagekräftige Tags und Strukturen verwendet .

Es gibt keinen umständlichen HTML-Code, wodurch Tags voll ausgenutzt, unnötiger Code eliminiert und nur aussagekräftige Tags gespeichert werden können. Es vermeidet nutzlose Eigenschaften, wie eingebettetes CSS, und sorgt für eine übersichtliche Dokumentstruktur.

Ebenso sollte nicht umständlicher CSS-Code Wiederholungen vermeiden, vererbbare Eigenschaften verwenden (denken Sie daran, dass die ursprüngliche Bedeutung von CSS Cascading Style Sheets sind) und CSS-Klassen wissenschaftlich wiederverwenden.

Standardskonformität bedeutet, dass Ihre Seite nach den HTML-, CSS- und XML-Standards des W3C validiert werden kann. Verwenden Sie den kostenlosen W3C-Validator, um Fehler zu finden und zu korrigieren, und testen Sie weiter, bis die Seite 100 % konform ist.


Warum machst du das? Reicht es nicht, solange es normal angezeigt werden kann?

Bei jedem Projekt herrscht eine enge Deadline und die Benutzer möchten, dass die Website so schnell wie möglich veröffentlicht wird. Daher müssen Website-Entwickler und -Designer ihre Arbeit schnell und effizient erledigen.

Man verfällt leicht in die Annahme, dass schnell gleichbedeutend mit schlampig ist und dass das Schreiben von sauberem, standardkonformem Code Zeitverschwendung ist. Die Leute sagen oft: „Es wird normal angezeigt, also gibt es kein Problem.“

Obwohl es im Moment deutlich wird, wie sieht es nächstes Jahr aus? Und drei Jahre später? Wie ändere ich den Browser? Ist das Gerät kompatibel?

Glauben Sie wirklich, dass Suchmaschinen Ihren Code Zeile für Zeile durchgehen? Sie sind sehr wählerisch. Wenn Sie keine standardisierten Codes verwenden, vertreiben Sie die Suchmaschinen.

Was passiert, wenn andere Mitarbeiter Ihren Code ändern? Was passiert, wenn Sie von Ihrem Chef gefeuert werden oder den Arbeitsplatz wechseln? Jemand wird vorbeikommen, sich Ihren Code ansehen und verstehen, was er bedeutet. Wollen Sie es ihm leicht machen oder möchten Sie, dass er Ihnen in den Rücken fällt?

Beginnen Sie mit dem korrekten Schreiben. Es ist keine langwierige Aufgabe, Sie sparen dadurch Zeit und Geld und haben weniger Sorgen.

Sie denken vielleicht, dass es schneller geht, Seiten mit eingebettetem CSS zu schreiben, oder Sie finden es bequemer, HTML zu schreiben, ohne über die Struktur nachzudenken.

Wenn Sie das Dokument jedoch künftig ändern oder die Website neu gestalten, werden Sie mehr Zeit darauf verwenden, die durch die minderwertige Codequalität verursachten Störungen auszugleichen. Wenn Sie neue Stylesheets erstellen, können im gesamten HTML-Code eingebettete CSS eine Menge Probleme verursachen und Sie können Stunden damit verbringen, diese zu entfernen.


Skalierbar, gerätefreundlich, semantisch und leicht zu aktualisieren

Mobile Browser entwickeln sich immer schneller. Mobiler Internetzugang ist nicht mehr nur BlackBerry vorbehalten. Heute nutzen Hunderte Millionen Menschen täglich ihr Mobiltelefon, um im Internet zu surfen.

Es gibt bereits viele Geräte mit unterstützender Browsing-Technologie für Sehbehinderte oder mit speziellen Schnittstellen für Menschen mit körperlichen Behinderungen. Wer eine so große Nutzerbasis nicht verlieren möchte, muss das Thema Gerätefreundlichkeit berücksichtigen.

Ihre Website kann den Benutzern in Blindenschrift bereitgestellt werden und mit Tools wie der Internet-Inhaltsspeicherung und Google Snapshots können Ihre Webseiten für lange Zeit im Internet erhalten bleiben, selbst wenn sie gelöscht werden.

Durch die Verwendung sauberer, standardmäßiger Markierungen können Sie mit den oben genannten Situationen leichter umgehen.


Tun und lassen

DO – Verwenden Sie vordefinierte Tags. Beispiel: h1 ist der wichtigste Teil einer Webseite, gefolgt von h2, h3 usw. Auf einer Webseite kann es nur ein h1 geben;

DO - Verwenden Sie aussagekräftige Elementnamen. Fragen Sie sich, ob jemand anderes die Bedeutung Ihrer Klassen- und ID-Benennung verstehen würde, wenn er Ihren Code liest. Was ist Ihrer Meinung nach beispielsweise für dieselbe Ebene besser, #box12 oder #comment-footer?

DO – Nutzen Sie die CSS-Vererbung. Wenn Sie beispielsweise die Schriftarteigenschaft in einem Container festlegen, müssen Sie sie in seinen untergeordneten Elementen nicht separat festlegen, es sei denn, es wird eine andere Schriftart verwendet. Dadurch bleiben Ihre Stile klar und prägnant.

DO – Sorgen Sie dafür, dass Ihr HTML-, CSS- und XML-Code den Standards entspricht. Verwenden Sie den W3C-Validator, um Fehler und Warnungen zu validieren und zu beheben, bis Sie die Standards zu 100 % erfüllen.

DO - Überprüfen Sie den vom WYSIWYG-Editor erstellten Code noch einmal. WYSIWYG-Browser sind die Hauptquelle für Junk-Code. Versuchen Sie daher, den von ihnen generierten Code so einfach wie möglich zu halten.

NICHT – Verwenden Sie keine eingebetteten CSS-Stile und überflüssigen Tags und Attribute. Auch wenn Sie sehr beschäftigt sind, fügen Sie diese Dinge nicht hinzu.

NICHT - Geben Sie sich nicht damit zufrieden, „das Richtige zu zeigen“. Denn versteckte Fehler auf der Seite können dazu führen, dass die Seite in anderen Browsern oder Geräten bis zur Unkenntlichkeit zerstört wird.

<<:  Beheben Sie das Problem, dass das vom Docker bereitgestellte Verzeichnis nicht gelesen und geschrieben werden kann

>>:  Vue.js implementiert ein einfaches Faltpanel

Artikel empfehlen

js implementiert eine Formularvalidierungsfunktion

In diesem Artikelbeispiel wird der spezifische Co...

JavaScript, um den Effekt des Tab-Leistenwechsels zu erzielen

Registerkartenleiste: Klicken Sie auf verschieden...

Dieser Artikel hilft Ihnen, JavaScript-Variablen und -Datentypen zu verstehen

Inhaltsverzeichnis Vorwort: Freundliche Tipps: Va...

So verwenden Sie die ElementUI-Paginierungskomponente Paginierung in Vue

Die Verwendung der ElementUI-Paging-Komponente Pa...

Installieren Sie Centos7 mithilfe einer virtuellen Hyper-V-Maschine

Inhaltsverzeichnis einführen Vorbereiten Systemab...

So ändern Sie den Speicherort von Datendateien in CentOS6.7 mysql5.6.33

Problem: Die Partition, in der MySQL Datendateien...

Natives JS zum Erzielen eines funkelnden Sterneneffekts

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung der wichtigsten Einzigartigkeit von v-for in Vue

Inhaltsverzeichnis 1. DOM-Diff 2. Fügen Sie Eleme...

Detaillierte Erklärung zur Verwendung der Vue h-Funktion

Inhaltsverzeichnis 1. Verstehen 2. Verwendung 1. ...

Beispiel für eine dynamische Sperre der IP-Blacklist von Nginx

Wenn eine Website böswillig angefragt wird, ist d...