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

Artikel vom 20. April 2022. ISSN 1614-3124, #70. Schwerpunkt: Webentwicklung (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

Die 6 allgemeinen Arten, HTML zu schreiben
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://twitter.com/uitestcom>follow UITest.com on Twitter</a>.
</section>
<footer>
  <ul>
    <li><a href=/feed/>Feed</a>
    <li><a href=https://twitter.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://twitter.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.

Unsystematisch
Valid
Valid, semantisch
Valid, semantisch, zugänglich
Valid, semantisch, zugänglich, unbedingt notwendig
Valid, zugänglich
Valid, zugänglich, unbedingt notwendig
Valid, unbedingt notwendig
Semantisch
Semantisch, zugänglich
Semantisch, zugänglich, unbedingt notwendig
Semantisch, zugänglich, unbedingt notwendig, hyperoptimiert
Semantisch, unbedingt notwendig
Semantisch, unbedingt notwendig, hyperoptimiert
Zugänglich
Zugänglich, unbedingt notwendig
Zugänglich, unbedingt notwendig, hyperoptimiert
Unbedingt notwendig
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:

Unsystematisch (ein großer Teil von Websites)
Semantisch (verbreitetster Minderheitenstil)
Zugänglich
Semantisch, zugänglich
Valid, semantisch (selten, <2% von Websites)
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:

Valid
Valid, semantisch, zugänglich
Valid, semantisch, zugänglich, unbedingt notwendig

Warum diese Reihenfolge?

Valid: Die grundlegende Messlatte, die angesetzt werden sollte; invalides Markup ist unprofessionell.
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.
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.

Über mich

Jens Oliver Meiert, am 30. September 2021.

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Mit meinem aktuellen Umzug nach Spanien bin ich offen für eine neue Führungsposition im Frontend-Bereich. Beachte und empfehle gerne meinen Lebenslauf oder mein LinkedIn-Profil.

Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.