Die 6 Arten, HTML zu schreiben (und ihre Kombinationen)

Artikel vom 20. April 2022. ISSN 1614-3124, #70. Schwerpunkt: (RSS-Feed fĂŒr alle Themen).

Jeder kann HTML schreiben – bis er merkt, dass er es doch nicht kann. HTML, beizeiten mal 2.185 Seiten umfassend (PDF), ist riesig, und es gibt hinreichend Belege, dass HTML studiert und geĂŒbt werden will, bevor man es beherrscht.

(Diese SelbstĂŒberschĂ€tzung existiert und ist deutlich. Mit so vielen Menschen, die von sich behaupten, HTML schreiben zu können, ist die Einstellung gegenĂŒber HTML die Antwort der IT-Industrie auf ein Deutschland, das ĂŒber 80 Millionen hauptberufliche Fußballtrainer verfĂŒgt.)

Aufgrund von GrĂ¶ĂŸe und KomplexitĂ€t der Spezifikation sowie Unterschieden in Einstellung und ProfessionalitĂ€t von Entwicklern gibt es verschiedene Arten, HTML zu schreiben (6) sowie Kombinationen davon (19). Dieser Artikel beschreibt diese Arten und Kombinationen. Wenn sich die Argumentation als richtig erweist, sollte jedermanns HTML-Stil widergespiegelt werden, und erlauben, sich bewusst fĂŒr einen anderen zu entscheiden.

Inhalt

  1. Die 6 allgemeinen Arten, HTML zu schreiben
    1. Unsystematisch
    2. Valid
    3. Semantisch
    4. ZugÀnglich
    5. Unbedingt notwendig
    6. Hyperoptimiert
  2. Die 19 Kombinationen, HTML zu schreiben
    1. Beliebte Kombinationen, HTML zu schreiben
    2. Empfohlene Kombinationen, HTML zu schreiben

Die 6 allgemeinen Arten, HTML zu schreiben

1. Unsystematisch

Dieser HTML-Schreibstil ist naiv oder, freundlicher ausgedrĂŒckt, unsystematisch. Die HTML-Elemente wurden noch nicht erlernt, die Idee von Semantik noch nicht ganz erfasst, die Verifizierung des Outputs ist mangelnd, was das Testen und fehlend, was das Validieren anbelangt, Optimierungsoptionen sind noch nicht bekannt, und Konzepte wie Barrierefreiheit fremd.

FĂŒr gewöhnlich ist es die unvollstĂ€ndige Karte der HTML-Elemente, die am meisten zu diesem Stil beitrĂ€gt, in dem Pragmatismus herrscht und bei dem »Divitis« und »Classitis« zu den Symptomen gehören.

Ein Beispiel fĂŒr den unsystematischen Typ ist dieses, einer zufĂ€lligen Website entnommen. Der Code macht alles mögliche, und es fĂ€llt schwer, die Arbeit als professionell zu bezeichnen:

  <!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
<!-- snip -->

</head>

<body class="home page-template page-template-page-templates page-template-page-homepage page-template-page-templatespage-homepage-php page page-id-23 custom-font-enabled single-author">

    <!-- snip -->
      <script type="text/javascript">
      // snip
    </script>

<div id="page" class="hfeed site">
  <header id="masthead" class="site-header" role="banner">
    <div id="hamburger-menu"><span></span><span></span><span></span></div>

    <a href="https://example.com"><img id="pagelogo" src="https://example.com/wp-content/uploads/2016/08/logo.png"></a>

    <nav id="site-navigation" class="main-navigation" role="navigation">
      <div class="secondmenusection">
        <div class="menu-main-menu-container"><ul id="menu-main-menu" class="nav-menu"><li id="menu-item-262" class="work menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-262"><a href="http://example.com/work/">Work</a>
<ul class="sub-menu">
  <li id="menu-item-265" class="all menu-item menu-item-type-custom menu-item-object-custom menu-item-265"><a href="http://example.com/all/">Main</a></li>
  <li id="menu-item-562" class="menu-item menu-item-type-taxonomy menu-item-object-gal-categories menu-item-562"><a href="https://example.com/gal-categories/classic/">Classic</a></li>
</ul>
</li>
<li id="menu-item-21" class="biography menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="https://example.com/biography/">Biography</a></li>
<li id="menu-item-942" class="download hide_item__ menu-item menu-item-type-post_type menu-item-object-page menu-item-942"><a href="https://example.com/downloads/">Download</a></li>
<li id="menu-item-22" class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="https://example.com/contact/">Contact</a></li>
<li id="menu-item-299" class="instagram menu-item menu-item-type-custom menu-item-object-custom menu-item-299"><a target="_blank" rel="noopener" href="https://www.instagram.com/example/"><i class="fa fa-instagram"></i></a></li>
</ul></div>        <p class="create_foo"><span class="create_foo_icon"></span><span class="create_foo_text">Create Foo</span></p>
        <p class="client_login login"><span class="client_login_icon"></span><span class="client_login_text">Client Login</span></p>
              </div>
    </nav>

    <div id="zooms">
      <span class="fa plus"></span>
      <span class="fa minus"></span>
      <span class="fa grid"></span>
      <!--<i class="fa fa-plus"></i>
      <i class="fa fa-minus"></i>-->
    </div>

    <span class="float-down-arrow"></span>
  </header>

<!-- stop stop snip -->

2. Valid

Der nĂ€chste ausgeprĂ€gte HTML-Stil dreht sich um ein grundlegendes QualitĂ€tsmerkmal fĂŒr HTML: Es ist valid. Das ist manchmal alles, was es hier zu sehen gibt, da das entsprechende Markup nicht den besten Gebrauch von Elementen machen mag. Als Anzeichen einer professionellen Entwicklereinstellung und davon, die Grundlagen zu verstehen, ist aber der Code zumindest syntaktisch korrekt.

Hier ein Beispiel einer validen Seite (aus Bequemlichkeit einem meiner alten Projekte entnommen):

<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1,minimum-scale=1,width=device-width">
<meta property="og:image" content="https://mirrors.meiert.org/havewestoppedkillingyet.org/media/redrum.png">
<title>Have We Stopped Killing Yet?</title>
<link rel=icon href=favicon.ico>
<link rel=stylesheet href=setup/default.css>
<h1>Have We Stopped Killing<a href=https://meiert.com/en/blog/on-taking-life/><sup>*</sup></a> Yet?</h1>
<p><strong>No.</strong>
<p>This is unacceptable.
<p>We don’t need arms and armies and industrial slaughterhouses.
<p>We need respect for life.
<p>Everyone can <em>do something</em>. Speaking up is doing something. <a href=https://meiert.com/en/><img src=https://hell.meiert.org/core/png/meiert-logo-80x80-alt.png alt="Jens Oliver Meiert"></a>

3. Semantisch

Ein weiterer Stil ist der semantische. Hier wird deutliche Aufmerksamkeit auf den Gebrauch der richtigen Elemente sowie, wenn anwendbar, Mikroformate und -daten gelegt. Dieser Stil atmet die Idee von Bedeutung in HTML, mit dem ausdrĂŒcklichen Wunsch, dass nicht nur auf div-Elemente zurĂŒckgegriffen wird.

Es folgt ein Beispiel ebenfalls aus meinem Portfolio (nicht wegen mir, sondern weil es schwierig ist, einfach so Seiten zu finden, die lang genug sind, um als Beispiel herzuhalten, aber nicht so lang, dass sie einen Artikel gleich dominieren; und gleichzeitig genug Markup beinhalten, um Sinn zu ergeben, aber nicht soviel, den Punkt zu umnebeln):

<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1,minimum-scale=1,width=device-width">
<meta name=twitter:card content=summary>
<meta property=og:title content="UITest.com · Web Development Tools · Analyze Your Website, Explore Dev Tools">
<meta property=og:description name=description content="Edited">
<meta property="og:image" content="https://d2g3fg8cn2k57g.cloudfront.net/media/logo-social.png">
<title>UITest.com · Web Development Tools · Analyze Your Website, Explore Dev Tools</title>
<link rel=stylesheet href=https://d2g3fg8cn2k57g.cloudfront.net/setup/default.min.css>
<link rel=alternate href=/feed/ type=application/rss+xml title="All tools">
<header>
  <img src=https://d2g3fg8cn2k57g.cloudfront.net/media/logo.svg alt=UITest.com>
</header>
<section id=check>
  <h1><a href=/check/>Site Check</a></h1>
  <p>Test your website in more than 80 tools:
  <form action=/check/results/ method=post>
    <label for=url>URL:</label>
    <input type=url name=url id=url required inputmode=url placeholder=https://>
    <button>Go</button>
  </form>
</section>
<section>
  <h1><a href=/analysis/>Analyze Your Website</a></h1>
  <p><a href=/analysis/#general>General</a>, <a href=/analysis/#accessibility>Accessibility</a>, <a href=/analysis/#code>Code</a> <!-- snip -->
  <p>UITest.com favorite: <a href=https://www.webpagetest.org/>Website Performance Analysis (WebPageTest)</a>
</section>
<section>
  <h1><a href=/exploration/>Explore Dev Tools</a></h1>
  <p><a href=/exploration/#testing>Browser Testing</a>, <a href=/exploration/#auditing>Code Auditing</a>, <a href=/exploration/#generation>Code Generation</a> <!-- snip -->
  <p>UITest.com favorite: <a href=https://coolors.co/generate>Color Scheme Generator (Coolors)</a>
</section>
<section>
  <h1>Stay Up-to-Date</h1>
  <p>The latest additions to UITest.com (usually one per week):
  <ul>
    <li><a href=https://gf.dev/http3-test>HTTP/3 Test</a>
    <li><a href=https://www.seowl.co/title-rewrite-checker/>Google Title Rewrite Check</a>
    <li><a href=https://webspeedtest.cloudinary.com/>Image Performance Analysis</a>
  </ul>
  <p>Never miss new tools: <a href=/feed/>Subscribe to RSS feed</a> or <a href=https://x.com/uitestcom>follow UITest.com on Twitter</a>.
</section>
<footer>
  <ul>
    <li><a href=/feed/>Feed</a>
    <li><a href=https://x.com/uitestcom>Twitter</a>
  </ul>
  <ul>
    <li>Home
    <li><a href=/analysis/>Analysis</a>
    <li><a href=/exploration/>Exploration</a>
    <li><a href=/check/>Site Check</a>
    <li><a href=/contact/>Contact & Legal</a>
  </ul>
  <p>Last update: September 22, 2021
  <p>UITest.com: for people who test websites ✓
  <p id=promo>Learning Web Development? Check out the <a href=https://leanpub.com/b/web-development-foundations-plus>Web Development Foundations book bundle</a>!
</footer>

4. ZugÀnglich

Ein Stil, der sich vom semantischen unterscheidet (mehr dazu in KĂŒrze), ist der zugĂ€ngliche. Dieser stellt Barrierefreiheit ĂŒber alles andere, und kann normalerweise an zwei Punkten ausgemacht werden: Fokus auf WCAG sowie eifriger (und manchmal ĂŒbereifriger) Gebrauch von ARIA:

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="theme-color" content="#e6e6e6" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#636366" media="(prefers-color-scheme: dark)">
  <link rel="canonical" href="https://example.com" />

<title>Home · Example</title>
<meta content="" name="description">
<meta content="" name="keywords">

<meta content="Home · Example" property="og:title">
<meta content="website" property="og:type">
<meta content="Example" property="og:site_name">
<meta content="https://example.com" property="og:url">
<meta content="" property="og:image">
<meta content="" property="og:description">
<meta content="en_GB" property="og:locale">

<!-- snip -->

<meta content="index, follow, noodp" name="robots">

    <link href="https://example.com/assets/css/prism.css" rel="stylesheet">
<link href="https://example.com/assets/css/index-dist.css" rel="stylesheet">
<link href="https://example.com/assets/css/templates/home.css" rel="stylesheet">
  <link rel="openid.delegate" href="https://example.net/">
  <link rel="openid.server" href="https://id.example.net/" />
  <link rel="openid2.provider" href="https://id.example.net/" />
  <meta data-embetty-server="https://example.net/embetty">
  <link rel="shortcut icon" type="image/x-icon" href="https://example.com/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="Latest articles" href="https://example.com/feed"/>
  <link rel="alternate" type="application/json" title="Latest articles" href="https://example.com/feed/json"/>
  <script defer data-domain="example.net" src="https://stats.example.net/js/index.js"></script>

</head>
<body>

  <header class="header">
        <a class="logo" href="https://example.com">
      Example    </a>

    <nav class="menu" aria-label="main">
                  <a  href="https://example.com/blog">Blog</a>
            <a  href="https://example.com/videos">Videos</a>
            <a  href="https://example.com/talks">Talks</a>
            <a  href="https://example.com/about">About</a>
            <span class="social">
    <a href="https://x.com/example" aria-label="Twitter">
    <!-- snip -->  </a>
    <a href="https://youtube.com/example" aria-label="YouTube">
    <!-- snip -->  </a>
  </span>
    </nav>
  </header>

  <main class="main">

<header class="h1">
  <h1>Example</h1>
    <p class="subheadline">Edited</p>
  </header>

<div class="text">
  <img class="avatar" src="https://example.com/media/pages/home/a85119863c-1633597165/avatar.example.net.jpeg" alt="Example, edited.">
  <p>Edited.</p><div class="clients">
  <h2 class="h2">Recommended By:</h2>
  <div class="gallery">
          <div>
        <img role="img" src="https://example.com/media/pages/home/foo.svg" alt="Edited">
      </div>
          <div>
        <img role="img" src="https://example.com/media/pages/home/bar.png" alt="Edited">
      </div>
          <div>
        <img role="img" src="https://example.com/media/pages/home/baz.svg" alt="Edited">
      </div>
          <div>
        <img role="img" src="https://example.com/media/pages/home/scribble.svg" alt="Edited">
      </div>
          <div>
        <img role="img" src="https://example.com/media/pages/home/screech.svg" alt="Edited">
      </div>
      </div>
</div>
<div id="insert_steady_checkout_here" style="display: none;"></div>
</div>

  </main>

  <footer class="footer">
    <div class="grid">
      <section class="column" style="--columns: 8">
        <h2>Example</h2>
        <p>
          Edited
        </p>
      </section>
      <section class="column" style="--columns: 2">
        <h2>Feeds</h2>
        <ul>
          <li><a href="https://example.com/feed">RSS Feed</a></li>
          <li><a href="https://example.com/feed/">JSON Feed</a></li>
        </ul>
      </section>
      <section class="column" style="--columns: 2">
        <h2>Pages</h2>
        <!-- snip -->
      </section>
    </div>
  </footer>

  <script src="https://example.com/assets/js/prism.js"></script>
<script src="https://example.com/assets/js/embetty.js"></script>
<script src="https://example.com/assets/js/index.js"></script>

</body>
</html>

Warum ist das nicht dasselbe wie der semantische Stil? Kurzum, weil die semantischen und barrierefreien AnsĂ€tze zwei unterschiedlichen Schulen entstammen; obwohl sie ĂŒberlappen, sind sie nicht identisch. Ein technisches Merkmal ist, dass die semantische Schule oft Gebrauch von Mikroformaten und Mikrodaten macht, wĂ€hrend die zugĂ€ngliche ARIA mag.

Ein allgemeinere Sicht ist, dass barrierefreies Markup nicht notwendigerweise semantisch sein muss – zumindest nicht, wenn man der nativen Bedeutung von HTML-Elementen mehr Gewicht zuschreibt als dem von mit ARIA angereichertem Markup. Anders ausgedrĂŒckt, wir können nicht – ein Verfechter der semantischen Schule wĂŒrde nicht – behaupten, dass <h1>Heading</h1> und <div role=heading aria-level=1>Heading</div> Ă€quivalent sind. Das mĂŒsste aber gegeben sein, um die Idee zu verteidigen, dass der zugĂ€ngliche Weg, HTML zu schreiben, auch zwingend der semantische ist.

5. Unbedingt notwendig

Im »unbedingt notwendigen« HTML-Stil ist das Ziel, nur das Markup (sowie allen anderen Code) zu benutzen, das zwingend benötigt wird. Es ist der Stil minimaler Webentwicklung und der, der alles optionale Markup schon wÀhrend der Entwicklung vermeidet.

Der unbedingt notwendige Stil gibt dir eine HTML-Vorlage wie diese, nicht nur allen optionalen Code abwerfend, sondern auch die Idee bezweifelnd, dass man ĂŒberhaupt irgendwelche HTML-Vorlagen haben kann:

<!DOCTYPE html>
<title>␣</title>

6. Hyperoptimiert

Der letzte Stil ist der »hyperoptimierten« HTMLs. Dies ist der Stil, der alles tut, um Code und Payload zu minimieren – als solcher ist er eine Untermenge des »unbedingt notwendigen« Stils –, Parse-Fehler einbegriffen. Kaum jemand macht von diesem Stil Gebrauch, aus guten wie aus schlechten GrĂŒnden.

Der schlechte Grund zuerst: HTML ist Jahrzehnte alt, aber mit manchen Entwicklern, die wĂ€hnen, es nach fĂŒnf Minuten zu kennen, ist die höchste Evolutionsstufe eines Frontend-Entwicklers oft der unsystematische Stil, und in einigen FĂ€llen vielleicht noch der semantische.

Der gute Grund ist, dass der hyperoptimierte Ansatz sehr schwer zu spielen ist, mit marginalen Ergebnissen und keinem (oder wenigem) Tooling zur UnterstĂŒtzung. Wir können uns vermutlich froh schĂ€tzen, dass keiner diesen Stil benutzt.

<!doctypehtml><title>Jeder kann HTML</title><img alt="Mein Logo"src=logo><! TODO: dieses Dokument vervollstÀndigen >

Dieser Code ist frei erfunden. Er ist nicht valid. Er funktioniert. Er macht Gebrauch von den Parse-Fehlern »missing-whitespace-between-attributes« und »incorrectly-opened-comment«. Er ist hyperoptimiert.

Die 19 Kombinationen, HTML zu schreiben

Die 6 allgemeinen Arten, HTML zu schreiben, fĂŒhren nun zu den folgenden 19 Kombinationen, HTML zu schreiben. Es ist eine Liste der Arten, die miteinander kompatibel sind.

Die Liste beinhaltet keine unbeabsichtigten Kombinationen – zum Beispiel, wenn ein unsystematisch geschriebenes Dokument zufĂ€llig valid ist.

  1. Unsystematisch
  2. Valid
  3. Valid, semantisch
  4. Valid, semantisch, zugÀnglich
  5. Valid, semantisch, zugÀnglich, unbedingt notwendig
  6. Valid, zugÀnglich
  7. Valid, zugÀnglich, unbedingt notwendig
  8. Valid, unbedingt notwendig
  9. Semantisch
  10. Semantisch, zugÀnglich
  11. Semantisch, zugÀnglich, unbedingt notwendig
  12. Semantisch, zugÀnglich, unbedingt notwendig, hyperoptimiert
  13. Semantisch, unbedingt notwendig
  14. Semantisch, unbedingt notwendig, hyperoptimiert
  15. ZugÀnglich
  16. ZugÀnglich, unbedingt notwendig
  17. ZugÀnglich, unbedingt notwendig, hyperoptimiert
  18. Unbedingt notwendig
  19. Unbedingt notwendig, hyperoptimiert

Dies sind die 19 spezifischen Arten, auf denen wir HTML schreiben.

Fehlt hier eine Kombination, oder habe ich etwas nicht gut erklÀrt? Lass es mich wissen!

Beliebte Kombinationen, HTML zu schreiben

Wenn du durch die Liste gehst, bemerkst du, dass manche Stile welche sind, die wir anstreben und bewerben, dass sich andere populĂ€r anfĂŒhlen, und dass ein paar ungewöhnlich wirken. Ich wĂŒrde die Hauptstile wie folgt anordnen, in absteigender Reihenfolge vermuteter PopularitĂ€t:

  1. Unsystematisch (ein großer Teil von Websites)
  2. Semantisch (verbreitetster Minderheitenstil)
  3. ZugÀnglich
  4. Semantisch, zugÀnglich
  5. Valid, semantisch (selten, <2% von Websites)
  6. Valid, zugÀnglich

Empfohlene Kombinationen, HTML zu schreiben

HTML-Schreibstile identifizieren und empfehlen zu können sind die primÀren AnwendungsfÀlle dieser Kategorisierung. Aus meiner Sicht sollten wir die folgenden Stile stÀrker bewerben, hier in aufsteigender Reihenfolge, was Nutzen und Schwierigkeit anbelangt:

  1. Valid
  2. Valid, semantisch, zugÀnglich
  3. Valid, semantisch, zugÀnglich, unbedingt notwendig

Warum diese Reihenfolge?

  1. Valid: Die grundlegende Messlatte, die angesetzt werden sollte; invalides Markup ist unprofessionell.
  2. Valid, semantisch, zugÀnglich: Semantisches Markup is weitgehend zugÀngliches Markup; obwohl man eine treffen kann (siehe vorherige Anmerkungen), scheint es allgemein wenig nutzbringend, den Unterschied zu betonen.
  3. Valid, semantisch, zugÀnglich, unbedingt notwendig: GrundsÀtzlich ergibt es Sinn, auch optionalen Code wegzulassen.

Selbst wenn unser Feld so weit entwickelt wĂ€re, um bereit fĂŒr den hyperoptimierten Stil zu sein, sind die ErtrĂ€ge zu gering, um dafĂŒr den großen Wert von ValiditĂ€t und KonformitĂ€t (ein Stil, der inkompatibel ist) als QualitĂ€tsmerkmal zu opfern. Der hyperoptimierte Stil ist ein HTML-Schreibstil, aber ein hypothetischer denn ein praktisch nĂŒtzlicher.

❧ Dies sind die 6 Arten, HTML zu schreiben, und ihre 19 Kombinationen. Welche Kombination ist deine? Auf welche arbeitest du hin? Antworte auf den Tweet zu diesem Beitrag, oder schick eine Nachricht! Und wĂ€hrend ich empfehle, unbedingt den validen Stil zum Teil des eigenen Schreibstils zu machen und zu bewahren, ist wichtig, eins zu verinnerlichen: HTML ist der wichtigste Webstandard. Es ist wert, es zu beherrschen.

Mit Dank an Thomas Steiner fĂŒr Feedback zu diesem Beitrag.

War dies nĂŒtzlich oder interessant? Teile diesen Beitrag, werde Nanosponsor oder unterstĂŒtze meine Arbeit, indem du mit meinen E-Books lernst.

Über mich

Jens Oliver Meiert, am 9. November 2024.

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter fĂŒr Firmen wie Google und als Engineering Manager fĂŒr Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prĂŒfe FachbĂŒcher fĂŒr O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Bitte sei kritisch, interpretiere wohlwollend und gib Feedback.)