Semantisches Web - HTML-Code seiner Bedeutung entsprechend auszeichnen

Semantisches Web - HTML-CodeSemantisches Web - HTML-Code zu schreiben, heißt Inhalte zu gliedern, um Strukturen schaffen die somit untereinander logische Beziehungen zu einander erhalten. Ein Aspekt bei der Webseitengestaltung der nicht erst seit kurzem vielerorts Vernachlässigt wird. Bei dem ein oder anderen Blick unter die Haube einer Webseite, hat man bei genauerer Betrachtung des HTML-Codes immer häufiger den Eindruck, dass es den Betreibern von Webseiten, Blogs, Portalen oder Online-Shops eher darauf ankommt ein Teil des Social Web zu sein und auf jeden Trend aufzuspringen, als die vorhandenen Inhalte ihrer Bedeutung entsprechend auszeichnen und zu strukturieren.

Die Lehre von der Bedeutung!

Auch wenn diese Diskussion schon alt ist, bedarf sie aufgrund vorhandener und immer wieder auftretender fachlicher Fehler im Umgang mit HTML-Code einer nennen wir es einmal "erneute Auffrischung". So werden Webseiten-Elemente auf Landingpages ( bspw. Buttons ), mit umständlichen HTML-Elementen umgesetzt, nur um diesen ein bestimmtes Äußeres geben zu können, um somit die Blickbewegung des Betrachters besser lenken zu können. Aber zu welchem Preis? Umständlicher und vielfach verschachtelter und alles andere als semantischer Code der bspw. über Widgets von Social-Media Plattformen wie bspw. Twitter oder Facebook hohe Verbreitung findet, welcher meistens natürlich auch noch einen entsprechend "umfangreichen" CSS-Code zur Folge hat. In die selbe Kerbe springen leider auch viele Anwender von JavaScript-Frameworks, die nur um Webseiten-Inhalten ein bestimmtes Verhalten auferlegen zu können, zusätzliche und oftmals auch vollkommen falsche HTML-Elemente anlegen.

Semantic, Clean, Fast!

Eine Möglichkeit um sich über die Strukturierung der Dokumenteninhalte im vornherein klar zur werden, ist die sich die Frage nach der Bedeutung des Inhaltes zu stellen, um dann die dafür entsprechend vorhandenen HTML-Elemente zu verwenden. So kann auf diese Weise aus einem "chaotischen Div-Haufen", ein seiner Bedeutung entsprechend gut strukturierter HTML-Code werden, der zudem mit hoher Wahrscheinlichkeit schlanker und um auch den Aspekt der Ladegeschwindigkeit mit ins Spiel zu bringen, schneller von den Browsern geladen werden kann. Zudem können Anwendungen wie Screenreader oder Braillezeilen, mit solch ausgezeichneten Inhalten wesentlich besser umgehen und die Inhalte entsprechend Ihrer Bedeutung an den Anwender weitergeben.

... HTML-Code transportiert nicht die Eigenschaften der Gestaltung von Webseiten, aber HTML-Code transportiert die Bedeutung der Inhalte...

Aber damit nicht genug, die vom Mathematiker Stephen Wolfram ins Leben gerufene Suchmaschine "Wolfram Alpha" basiert auf mathematischen Berechnungen zur semantischen Analyse von Informationen. Ebenso erlauben es bspw. Mikroformate Inhalte ( Adressen, Events oder aber auch die Bewertung von Dienstleistungen und Waren ) mit Merkmalen zu versehen, durch die man allein schon auf deren Bedeutung dieser schließen kann, ohne diese überhaupt zu kennen. Semantisch ausgezeichneter HTML-Code ist also nicht nur was für Anhänger von Standards die auf deren Einhaltung setzen, sondern für jeden der sie nutzt von Vorteil. Der HTML-Code der einzelnen Webseiten-Elemente transportiert nicht die Eigenschaften der Gestaltung von Webseiten, dafür gibt es CSS, aber HTML-Code transportiert die Bedeutung oder auch die Funktion der Inhalte von Webseiten-Elementen.

Backlinks & Linkjuice

Wie zumindest kurz nach Veröffentlichung dieses Beitrages zu erkennen ist, kommt dieser Artikel entgegen meiner sonstigen Beiträge ohne jegliche Verlinkung aus. Das soll bzw. wird aber nicht so bleiben, denn da ich ähnlich wie viele andere Webseitenbetreiber immer wieder Linktausch-Anfragen bekomme, ich diese aber ( fast ) immer ausnahmslos ablehne, habt ihr die Möglichkeit einzelnen Wörtern zusätzliche Bedeutung verleihen zu können. Linkgeiz gibt es zur Genüge in der deutschen Blogosphäre, daher könnt Ihr bei Interesse, keyword-relevante follow Backlinks wie bspw. Webdesign, Usability, Suchmaschinenoptimierung oder Traffic erhalten. Hierfür gibt es lediglich folgende Bedingungen.

  • Die Anzahl der Backlinks ist getreu dem Motto "Wer zu erst kommt, mahlt zu erst!" auf 15 beschränkt ( nur ein Link pro Domain )!
  • Der erste Absatz dieses Artikels steht für Verlinkung nicht zur Verfügung!
  • Es werden nur themenrelevante Links zu Blogs oder Blogbeiträge verlinkt! Links zu Firmen, Agenturen, Online-Shops oder ähnliches werden nicht angenommen.
  • Benötigt wird: Nennung des zu verlinkenden Keywords ( bei Mehrfachnennung im Text, bitte Absatz und Zeile angeben ) und Backlink-URL
  • Kommentarformular nutzen!
Ähnliche Artikel zu diesem Thema:
  1. David 23 Apr 2010, 12:48

    Hab auch bei dreimaligem Durchlesen kein Keyword finden können, was wirklich gepasst hätte :-)


  2. Roman 23 Apr 2010, 12:50

    Hallo, ich nehm dann gerne das Key "follow Backlinks", das mit http://www.seo-blog.ch/blog/communitys/dofollow-social-bookmarking/ ein tolles Linkziel hätte :oD vielen Dank und Grüsse, Roman


  3. Thomas 23 Apr 2010, 13:28

    Hmm, ein Link ist immer schön, aber deine Keyword passen nicht zu meinem Blog. der Artikel entspricht übrigens genau dem was ich seit längerem denke.


  4. Markus 23 Apr 2010, 13:45

    Schöner Artikel, nicht nur wegen der Links ;-)

    Wenn es geht würde ich gern das Keyword "Spiel" mit http://newsburger.de/thema/spiele verlinken lassen.


  5. Christoph Daum
    23 Apr 2010, 14:23

    Super Artikel :)

    Wenn noch Platz ist hätte ich gerne "Gestaltung von Webseiten" als Link auf www.apermo.de :)


  6. Webstandard-Team
    23 Apr 2010, 14:29

    @Christoph Daum: "Gestaltung von Webseiten" ist noch frei, allerdings erfüllt dein Link folgende oben genannte Bedingungen nicht - "Links zu Firmen, Agenturen, Online-Shops ... werden nicht angenommen."


  7. Siegfried
    24 Apr 2010, 11:17

    Falls Pingback nicht funktioniert, kannst Du ja "Bedeutung" oder "Bedeutung des Inhaltes" mit meinem Kommentar http://www.rorkvell.de/news/2010/Ich_weiss_nicht_was_soll_es_bedeuten hierzu verlinken.


  8. Niko
    24 Apr 2010, 13:42

    Ja, mit der Thematik des "sauberen" HTML codes musste ich mich auch anfänglich auseinandnersetzen. Wenn ich so an meine ersten Projekte zurück denke.... Uhm :)

    Klasse Artikel und eine lobenswerte Idee mit den Backlinks, gefällt mir. Vielleicht sollte ich sowas ähnliches auch mal in einem meiner Artikel starten.

    Soltle das Keyword "Traffic" im letzten Absatz noch frei sein, würde ich mich über einen Verlinkung auf
    http://www.blogbetreiber.de/blogbibel/warum-traffic-king-ist-und-content-die-queen/
    freuen.

    Danke für diese Aktion!

    Gruß Niko


  9. Martin 25 Apr 2010, 21:28

    LOL, wieso steht denn bei mir im RSS Reader "auf 15 beschränkt ( nur ein Link pro Domain )!" und im Artikel plötzlich nur noch 10 - und das wo es thematisch um Linkgeiz geht ;)

    Schade, ich hätte gerne irgendeinen (hochwertigen) IT Artikel verlinken (der inhaltlich auch zu Euren Themen passt), aber die Abgrenzungen wie "keine Links zu Agenturen etc." steht dem im Wege.
    Findet Ihr das bei so einer Aktion nicht irgendwie kontraproduktiv? Klar ist Euer Blog und Eure Regeln, aber ich könnte doch auch einfach den follow Link aus dem Kommentarnamen verlinken. Ja, das wäre kein Deeplink ... also irgendwie war Mißfeldts Valentinstags Aktion da deutlich witziger.

    Bei mir bleibt so nur eins hängen: Webstandard wird aus meinem Agentur Blog nicht verlinkt, auch wenn es passen würde. Das widerspricht total meinem Verständnis von Links, die Ihr hier so deutlich mit Währung gleichsetzt.


  10. Siegfried
    26 Apr 2010, 07:46

    Wo Martin Recht hat, hat er Recht. Die Phobie gegen Alles, was irgendwie kommerziell sein könnte, kann geradezu krankhaft werden. Es würde eigentlich reichen, reine werbliche Seiten nicht zu verlinken (oder nur gegen Bares). Ansonsten sollte es eher auf den Inhalt ankommen. Und wenn der zum Thema beiträgt, sollte es doch eigentlich wurscht sen, ob der von einer Agentur oder einer Privatperson stammt. Auch in einer Agentur sitzen und schreiben Menschen. Dieses "wir müssen leider draussen bleiben" wird diesen Menschen nicht gerecht.


  11. Webstandard-Team
    26 Apr 2010, 08:40

    @Martin: Ich habe nichts gegen die Verlinkung von Agentur-Blogs, deren Content mit welcher thematischen Ausrichtung auch immer, die denjenigen die auf den Link klicken somit auch einen gewissen Mehrwert bieten. Was hat ein Leser davon wenn er bspw. auf das Keyword Traffic klickt und dann bei einer Agentur landet und somit keinen Nutzen davon hat. Daher ist die Beschränkung im Sinne der Leser und meines Erachtens nicht nicht kontraproduktiv. Ob ein Link im Kommentarfeld follow bleibt ist dann übrigens auch immer so eine Frage, denn schließlich schaue ich mir diese auch an und "Webdesign Berlin" als Bezeichnung fliegt dann natürlich raus ;o)

    Im Vergleich zu vielen anderen Blogs wird hier viel und gern verlinkt und nur weil es in diesem 1 von über 650 Blogbeiträgen (!) eine solche "Regelung" gibt, möchtest du diesen Blog nicht zu verlinken? Weil du mich nicht verlinkst, verlinke ich dich auch nicht?

    @Siegfried: Phobie? Ich bitte dich, du müsstest mich besser kennen ;o) "Auch in einer Agentur sitzen und schreiben Menschen. Dieses "wir müssen leider draussen bleiben" wird diesen Menschen nicht gerecht." Trägst du da nicht ein wenig dick auf? Es gehen hier wie auf vielen anderen Seiten auch täglich mehrere Kommentare mit nur einem ziel ein. Backlinks zu erhalten! Und diese stammen zu 99% von Agenturen oder Selbstständigen, sie wählen wahllosen Beiträge aus und spammen die Blogs zu, die ihnen "wichtig" erscheinen. Die Blogbetreiber von nebenan oder der Blogneuling, tun dies wesentlich weniger und genau diesen wollte ich mit diesem Artikel die Möglichkeit geben einen Link auf unkomplizierte und einfache Weise erhalten zu können. Wie gesagt, man kann auch alles überspitzen.

    Zu deinem Artikel - Ich wundere mich nicht über den real existierenden Mangel an Bedeutung im allgemeinen, mich wundert es, dass sich insbesondere viele Profis dessen nicht bewusst sind oder die Semantik einfach absichtlich außen vorlassen, denn die müssten strukturell denken und arbeiten können.


  12. Siegfried
    26 Apr 2010, 08:44

    Stimmt, es war etwas überspitzt. Vielleicht tatsächlich bei Dir ein klein wenig übertrieben. Aber wenn Du Dir die Bloglandschaft allgemein anschaust, wirst Du feststellen, dass das mit "Phobie" nicht so arg weit her geholt ist.

    Insofern war das mit der Überspitzung schon Absicht :)


  13. Siegfried
    26 Apr 2010, 09:33

    Interessant in diesem Zusammenhang ist, sich den Begriff "Design" mal in den verschiedenen Sprach- und Kulturkreisen anzusehen. Im Englischen umfasst dieser Begriff deutlich mehr als im Deutschen (http://en.wikipedia.org/wiki/Design). Etwas verkürzt ausgedrückt umfasst dieser Begriff im Englischen sowohl "applied arts" (http://en.wikipedia.org/wiki/Applied_arts) als auch engineering (http://en.wikipedia.org/wiki/Engineering). Im Deutschen ist Design reduziert auf "applied arts". Konsequenterweise ist der Begriff Webdesign speziell im Deutschen beschränkt auf applied arts für das Web. Der Aspekt des engineering geht komplett unter.

    Bemerkenswert ist, dass auch aus dem englischsprachigen Raum Webdesign nur den Aspekt der applied arts enthält, nicht aber den Aspekt engineering. Es scheint so, als ob sich hier im Web der reduzierte Gebrauch aus dem Deutschen durchgesetzt hätte.

    Übrigens, Design hat sogar Einiges zu tun mit Produktion (Produktionsdesign), Planung, System, Prozess (Kochrezept) und Dergleichen. So hat z.B. die Erstellung einer Javascript Animation mit etlichen dieser Designaspekten zu tun. Programmieren ist Design. Und das hat manchmal sogar Etwas mit applied arts zu tun.

    Mein ganz persönlicher Eindruck ist, dass diese Reduktion dem immer größeren Mangel an Zeit geschuldet ist. Alles muss heute wahnsinnig schnell gehen. Und wenn man sich auf das visuelle (applied arts) konzentriert, erhält man am schnellsten Ergebnisse. Das Problem dabei ist, dass man zwar schnell Ergebnisse erhält, diese aber von niedriger Qualität sind, und diese Qualität nur sehr schwer erhöht werden kann. Jeder einzelne Aspekt von Design braucht Zeit. Und diese Zeit hat heute anscheinend kaum noch Jemand.


  14. Steve 26 Apr 2010, 10:26

    Auch wenn der folgende Content bezüglich der "Blickbewegung" nicht meiner Feder entsprungen ist, ist er allemal eine Empfehlung an Eure Leser wert!

    http://www.useye.de/wissensdatenbank/blickbewegungen/


  15. Martin 26 Apr 2010, 15:03

    Hm, in dem Falle mache ich gerne einen Schritt rückwärts und sage das die Formulierung nur mißverständlich war. Ich verlinke selbst gerne aus dem Agentur Blog, da vernünftige Links ja einen Mehrwert bieten und zeigen das man sich mit einem Thema auseinandergesetzt hat.
    Mit dem "dann verlinke ich Dich auch nicht" wollte ich nur deutlich machen, wie so eine Aussage beim Leser ankommen könnte bzw. bei mir ankam. Denn Deine Intention dahinter, die kann ich ja nicht sehen, nur das geschriebene Wort wird interpretiert ;) vernünftigen Content verlinke ich indes immer gerne.

    Und wer als "Webdesign Berlin" o.ä. kommentiert hat schon aus Prinzip keinen Link verdient, da gebe ich Dir vollkommen recht.


  16. Kevin 26 Apr 2010, 20:27

    Hallo Webstandard Team,
    das ist ja mal eine coole Idee an der ich mich gerne beteilige ;)
    Es war nicht leicht etwas passendes auszumachen, aber dann ist mir eingefallen, das ich neulich was über Open Source Frage und Antwort Skripte geschrieben habe:
    http://www.keleo.de/blog/open-source-frage-antwort-skripte-installation-osqa.html

    Viele Grüße
    Kevin


  17. Nils 28 Apr 2010, 00:19

    Sweet, also über "HTML" gibts immer was zusagen
    http://www.phphatesme.com/blog/webentwicklung/the-future-of-the-web-html5/

    Schöner Blog & Danke ans WS Team!


  18. Torsten von webanalyser.de 29 Apr 2010, 09:13

    Hallo,
    klasse Aktion. Wenn möglich, hätte ich gern vom Keyword "Webseiten" einen Link auf webanalyser.de.
    Und noch ein kleiner Hinweis: Wenn man im Kontaktformular einen Fehler macht und dann mit dem Browser-Zurück-Button zurückgeht, wird die Spamschutz-Image-Anzeige nicht aktualisiert, das Eingabefeld aber auch nicht gelöscht. Was zur Folge hat, dass beim nächsten Formularabsender wieder ein Fehler auftritt (Spamschutz falsch). Vielleicht muss da irgendwo ein Meta-Tag rein, dass die Seite nicht Cache landen darf...

    MfG

    Torsten


  19. Webstandard-Team
    29 Apr 2010, 11:02

    @Torsten: Der von Dir angesprochene Bug ist mir bekannt, leider habe ich keinen Zugriff auf die Template-Funktionalitäten des Bloganbieters. Diese wissen Bescheid, dass kann aber dauern ;o(

    BTW: Interessanten Blog hast du, war mir bisher noch nicht bekannt.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage