{"id":48,"date":"2012-08-13T12:36:23","date_gmt":"2012-08-13T12:36:23","guid":{"rendered":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/13\/10-sauberer-html-code-unterstuetzt-das-html-lernen\/"},"modified":"2025-11-04T12:14:02","modified_gmt":"2025-11-04T12:14:02","slug":"10-sauberer-html-code-unterstuetzt-das-html-lernen","status":"publish","type":"post","link":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/13\/10-sauberer-html-code-unterstuetzt-das-html-lernen\/","title":{"rendered":"10 Sauberer HTML-Code unterst\u00fctzt das HTML lernen"},"content":{"rendered":"\n
\n

 <\/p>\n

Warum \u00fcberhaupt der Hinweis auf sauberen Code? Daf\u00fcr gibt es einige Gr\u00fcnde:<\/p>\n

    \n
  1. WYSIWYG-Editoren machen es nicht \ud83d\ude42<\/li>\n
  2. Eine eventuelle Fehlersuche geht sp\u00e4ter schneller<\/li>\n
  3. Nachtr\u00e4gliche \u00c4nderungen und Hinzuf\u00fcgen von Informationen ist problemlos<\/li>\n
  4. du selber siehst deinen Fehler schneller<\/li>\n
  5. dein Lehrer sieht gemachte Tippfehler schneller<\/li>\n<\/ol>\n

    Diesen sauberen HTML-Code machst du eigentlich nur f\u00fcr dich. Dem Webbrowser ist es egal, ob er den Inhalt in einer einzigen Zeile bekommt oder wenigstens mit Umbr\u00fcchen oder mit Einr\u00fcckungen. <\/p>\n

    F\u00fcr einen sauberen Code arbeitee mit Umbr\u00fcchen und Leerzeilen und Einr\u00fcckungen. So sollte z.B. jeder Text-Abschnitt (<p>-TAG) davor und danach eine Leere Zeile haben, damit du siehst, wo die Abschnitte sind. Beispiel:<\/p>\n

    <p>Hier f\u00e4ngt unser erster Abschnitt mit seinem Inhalt an. \r\nDabei kannst du wie hier gezeigt sofort nach dem \r\np-Tag anfangen zu schreiben oder...<\/p>\r\n\r\n<p>\r\nwie in diesem zweiten Absatz in der n\u00e4chsten Zeile nach dem \r\np-Tag und am Ende auch wieder eine Zeile freilassen. Diese
    Version ist \u00fcbersichtlicher.\r\n<\/p>\r\n<\/pre>\n
    Mit Einr\u00fcckungen arbeitest du, wenn mehrere HTML-TAGs geschachtelt werden, wie z. B. bei Aufz\u00e4hlungen oder Tabellen, die im folgenden Kapitel kommen.<\/p>\n
    So ist auf einen Blick im Quellcode sichtbar, wo Aufz\u00e4hlungen anfangen und aufh\u00f6ren und was zusammengeh\u00f6rt. Also auch wenn du die folgenden HTML-TAGs (noch) nicht kennst \u2013 anhand vom Aufbau und den Einr\u00fcckungen siehst du schnell, was zusammengeh\u00f6rt.<\/p>\n
    <ul>\r\n  <li>erster Aufz\u00e4hlungspunkt<\/li>\r\n  <li>zweiter Aufz\u00e4hlungspunkt<\/li>\r\n  <li>dritter Aufz\u00e4hlungspunkt, der mehr Platz ben\u00f6tigt<\/li>\r\n  <li>nach Ende keine Einr\u00fcckung mehr<\/li>\r\n<\/ul>\r\n<\/pre>\n
    Und das Ganze als Negativbeispiel f\u00fcr un\u00fcbersichtliche Gestaltung des HTML-Codes<\/strong> bei denselben Aufz\u00e4hlungen:<\/p>\n
    <ul><li>erster Aufz\u00e4hlungspunkt<\/li><li>zweiter \r\nAufz\u00e4hlungspunkt<\/li><li>dritter Aufz\u00e4hlungspunkt, der \r\nmehr Platz ben\u00f6tigt<\/li><li>nach Ende keine \r\nEinr\u00fcckung mehr<\/li><\/ul>\r\n<\/pre>\n
    Am folgenden Beispiel siehst du sehr sch\u00f6n, dass alleine durch die Darstellung ein Verst\u00e4ndnis m\u00f6glich ist (obwohl wir bisher keine Tabellen hatten). Du siehst auf einen Blick, wo die Tabellen anfangen und aufh\u00f6ren.<\/p>\n
    So sollte z. B. ein Tabellenaufbau dann aussehen. Acht auf die Einr\u00fcckungen, die die einzelnen Zellen verdeutlichen. Dazu aber sp\u00e4ter mehr. Nutze also Einr\u00fccken und Leerzeilen f\u00fcr eine gute \u00dcbersicht.<\/p>\n
    <table>\r\n    <tr>\r\n        <td>\r\n            INHALT\r\n        <\/td>\r\n        <td>\r\n            INHALT\r\n        <\/td>\r\n    <\/tr>\r\n<\/table>\r\n<\/pre>\n
    \"\"<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      Warum \u00fcberhaupt der Hinweis auf sauberen Code? Daf\u00fcr gibt es einige Gr\u00fcnde: WYSIWYG-Editoren machen es nicht \ud83d\ude42 Eine eventuelle Fehlersuche geht sp\u00e4ter schneller Nachtr\u00e4gliche \u00c4nderungen und Hinzuf\u00fcgen von Informationen ist problemlos du selber siehst deinen Fehler schneller dein Lehrer sieht gemachte Tippfehler schneller Diesen sauberen HTML-Code machst du eigentlich nur f\u00fcr dich. Dem Webbrowser […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[9,47],"tags":[],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-html","category-html2"],"_links":{"self":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":6,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":2376,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/48\/revisions\/2376"}],"wp:attachment":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}