30 JAHRE SELFHTML
altes SELFHTML-Logo

Mannheimer Quadrate

  • 1995-06-04 erste SELFHTML-Version von Stefan Münz
  • 1998-07-26 SELFHTML-Forum
  • 1999 erstes SELFHTML-Treffen
  • 2002? erste CForum-Version von Christian Kruse
  • 2004 Gründung des Vereins SELFHTML e.V.
  • 2010-03-14 SELFHTML-Wiki

neues SELFHTML-Logo

<!DOCTYPE html> <html> <title>SELFHTML</title> <body> <h1>SELFHTML</h1> <p><b>SELFHTML</b> stellt seit 1995 eine deutschsprachige Dokumentation zu HTML und verwandten Technologien zur Verfügung. <p>Das Motto von SELFHTML lautet: „Die Energie des Verstehens“.</p> </body> </html>

Da fehlt doch was‽ Ja. Aber was davon ist zwingend notwendig?

  • die Angabe der Zeichencodierung
  • die Angabe der Sprache im lang-Attribut
  • head-Start- und -End-Tags
  • das End-Tag beim ersten Absatz

richtige Antwort: die Angabe der Sprache im lang-Attribut

Bei einigen HTML-Elementtypen sind End-Tags nicht zwingend erforderlich; dazu gehört auch p. Bei manchen HTML-Elementtypen sind auch Start-Tags nicht zwingend erforderlich; so bei html, head und body.

Die Zeichencodierung muss nur angeben werden, wenn eine andere als UTF-8 verwendet wird (was man nicht tun sollte).

Erforderlich hingegen ist die Angabe der Sprache des Seiteninhalts. Die HTML-Spezifikation verlangt das nicht, aber die WCAG (Web Content Accessibility Guidelines) tun das.

Wievielen Nutzern kommen barrierefreie Webseiten zugute?

  • 4%
  • 21%
  • 53%
  • 100%

richtige Antwort: 100%

Barrierefreiheit kommt allen Nutzern zugute. Jeder kann situationsbedingt (bspw. laute Umgebung, grelles Licht auf dem Monitor) oder temporär (bspw. Hand gebrochen) eingeschränkt sein.

Welche der Farbangaben ist ungültig?

  • rgba(102, 51, 153)
  • #639F
  • rgba(102 51 153 255)
  • hsl(270 50% 40%)

richtige Antwort: rgba(102 51 153 255)

HSL ist ein für Menschen intuitiver handhabbares Farbmodell, basierend auf Farbwert, Farbsättigung und Helligkeit, das in CSS mit der hsl()-Funktion verwendet werden kann.

rgba() ist jetzt ein Synonym zu rgb(); beides kann mit und ohne Angabe des Alpha-Kanals verwendet werden.

#639F ist die Kurzschreibweise für #663399FF (#663399 mit Angabe des Alphakanals).

Bei der neuen Syntax werden R-, G- und BWerte durch Leerzeichen getrennt, zwischen diesen und dem Alpha-Wert steht aber ein /.

Welches Element gab es nie im HTMLStandard?

  • blink
  • dir
  • marquee
  • meter

richtige Antwort: marquee

blink und dir gab es mal; meter gibt’s immer noch.

marquee wurde zwar von Browsern implementiert, hat aber nie Einzug in den offiziellen Standard gehalten.

Wird heutzutage noch Layout mit <table> gemacht?

  • seit CSS sollte kein Tabellenlayout mehr gemacht werden
  • seit der Implementierung von Flexbox sollte kein Tabellenlayout mehr gemacht werden
  • seit der Implementierung von CSS-Grid sollte kein Tabellenlayout mehr gemacht werden
  • für HTML-Mails ist Tabellenlayout immer noch erforderlich

richtige Antwort: für HTML-Mails ist Tabellenlayout immer noch erforderlich

Einige E-Mail-Clients verstehen CSS immer noch nur rudimentär, sodass man bei HTMLMails tatsächlich immer noch mit Layouttabellen arbeiten muss. Aber nicht vergessen, diese als solche zu kennzeichnen: <table role=”presentation”>

Eine Frage zu Fragezeichen: Was davon ist kein gültiges JavaScript?

  • const heading = document.querySelector(‘h1’)?.textContent;
  • const main = document.querySelector(‘main’) ?? document.body;
  • const title = (document.querySelector(‘h1’) ? document.querySelector(‘h1’).textContent) : document.title;
  • keins davon; alle drei korrekt

richtige Antwort: const title = (document.querySelector(‘h1’) ? document.querySelector(‘h1’).textContent) : document.title;

?. ist der optional chaining operator. Während document.querySelector('h1').textContent einen Fehler werfen würde, wenn kein h1-Element vorhanden ist, läuft document.querySelector('h1')?.textContent ohne Fehler durch und ergibt undefined.

?? ist der nullish coalescing operator und wirkt ähnlich wie ||: wenn der erste Ausdruck nicht null oder undefined ist, wird dieser zurückgegeben, andernfalls der zweite.

? : ist der conditional (ternary) operator. Wenn die Bedingung vor ? erfüllt ist, wird der erste Ausdruck (zwischen ? und :) zurückgegeben, andernfalls der zweite.
Hier hat sich allerdings ein Syntaxfehler eingeschlichen: die Klammern sind falsch gesetzt.

Wieviele HTML-Elementtypen gibt es?

  • unter 50
  • 50 bis 80
  • 81 bis 100
  • über 100

richtige Antwort: über 100

Gegenwärtig sind es etwa 140.

:where(.box.box) { background: red }

:is(.box, div:first-child) { background: yellow }

.box { background: green }

@layer box { #box { background: blue } }

Welche Angabe gewinnt? Welche Hintergrundfarbe hat das <div id=”box” class=”box”>?

  • rot
  • gelb
  • grün
  • blau

richtige Antwort: gelb

:where() tut dasselbe wie :is(), aber mit Spezifität 0.

:is() wirkt nicht mit der Spezifität des jeweiligen Matches, sondern mit der des Selektors in den Klammern mit höchsten Spezifität; in dem Fall mit der von div:first-child (1 Klasse, 1 Elementtyp).

Das nachfolgende .box hat geringe Spezifität, die vorige Angabe wird also nicht überschrieben.

Regeln in Layern, die nicht !important sind, sind in der Kaskade weiter unten als Regeln nicht in Layer. (!important-Regeln sind weiter oben.)

Gelb gewinnt.

In welchem Jahr erschien ein Artikel von John Allsopp, der den Gedanken von responsivem Webdesign propagierte?

  • 2000
  • 2005
  • 2010
  • 2015

richtige Antwort: 2000 ⚪

Der Artikel „A Dao of Web Design“ von John Allsopp erschien im April 2000 auf A List Apart. Auf diesen Artikel bezog sich Ethan Marcotte in seinem 10 Jahre später ebenfalls auf A List Apart erschienenen Artikel „Responsive Web Design“.

Welches HTML-Element sollte verwendet werden, um zusammengehörige Radiobuttons zu gruppieren?

  • div
  • ul
  • ol
  • fieldset

richtige Antwort: fieldset.

Dadurch wird bei den Radiobuttons von Screenreadern nicht nur das label vorgelesen, sondern zusätzlich auch das legend-Element, sodass verständlich wird, worauf sich die Optionen denn eigentlich beziehen.

Welche dieser Personen gilt als Pionier des Internets?

  • Tim Berners-Lee
  • Vince Cerf
  • Bill Gates
  • Eric Meyer

richtige Antwort: Vince Cerf

Tim Berners-Lee hat das World Wide Web entwickelt (HTTP, HTML, den ersten Browser), was eine Anwendung des Internets ist, so wie E-Mail und Newsgroups, die es damals gab.

Vince Cerf hat TCP/IP entwickelt – das Protokoll, mit dem über Kabel verbundene Computer miteinander sprechen können, und damit ein Grundbaustein des Internets.

Beim W3C20 Anniversary Symposium 2014 traten beide gemeinsam auf: Tim Berners-Lee mit T-Shirt „I didn’t invent the Internet“ auf der Vorderseite und „I invented the Web“ auf der Rückseite; Vince Cerf mit „I didn’t invent the Web“ auf der Vorderseite und „I invented the Internet“ auf der Rückseite.

(Fotos davon)

Wieviel ist 2 * (1 + 1 + ‘1’) (in JavaScript)?

  • 6
  • 42
  • 222
  • NaN (not a number)

richtige Antwort: 42

Die Antwort auf alle Fragen.

In der Klammer werden die +-Operatoren von links nach rechts abgearbeitet. 1 + 1 ergibt 2; bei 2 + ‘1’ werden die Typen der Operanden angeglichen, die Zahl 2 wird in den String ‘2’ umgewandelt, der Operator + steht dann für die Verkettung: ‘2’ + ‘1’ ergibt ‘21’.

Der *-Operator steht für keine StringOperation; die Typumwandlung erfolgt zu Zahlen: ‘21’ wird als Zahl 21 gedeutet. 2 * 21 ergibt 42.

Welche benannte Farbe wurde auf Betreiben der Web-Community in den CSS-Standard aufgenommen?

  • burlywood
  • grey (als Synonym zur amerikanischen Schreibweise gray)
  • rebeccapurple
  • whitesmoke

richtige Antwort: rebeccapurple

2014 starb die sechsjährige Tochter von Eric Meyer an Krebs. Ihr zu Ehren wurde ihre Lieblingsfarbe lila nach ihr benannt.

Was lässt sich auch ohne Media-Query umsetzen?

  • einspaltiges Layout auf schmalen Viewports (Bildschirmen), mehrspaltiges auf breiten
  • Hell- und Dunkelmodus (light/dark mode) ⚪
  • beides
  • keins davon

richtige Antwort: beides

Mit Flexbox und auch mit Grid (repeat()-Funktion) ist es möglich, dass der Browser die Anzahl der Spalten je nach zur Verfügung stehender Breite selbst bestimmt, ohne dass man dazu per Media-Query Breakpoints setzen muss. Mit color scheme: light dark und der light-dark()-Funktion lässt sich Hell- und Dunkelmodus auch ohne prefers-color-scheme-Media-Query umsetzen.

Kann man <div class=”0”> verwenden?

  • ja, problemlos
  • ja, aber zum Stylen müsste man schlecht lesbaren CSS-Code verwenden
  • nein, denn in HTML dürfen Klassenbezeichner nicht mit einer Ziffer beginnen
  • nein, denn 0 ist dasselbe wie keine Klasse zu setzen

richtige Antwort: ja, aber zum Stylen müsste man schlecht lesbaren CSS-Code verwenden

Bezeichner für Klassen und IDs, die mit einer Ziffer beginnen, sind in HTML jetzt erlaubt.

Nicht erlaubt sind führende Ziffern bei Klassenund ID-Selektoren in CSS; dort müsste die führende Ziffer escapet werden: für class=”0” wäre der Selektor .\30, für id=”007” wäre es #\30 07.

Das ist schlecht lesbarer (d.h. schlecht wartbarer) CSS-Code, deshalb sollte man führende Ziffern in Klassen- und ID-Bezeichnern doch besser vermeiden.

button { appearance: none; border: none; outline: none; quotes: none; }

Welche Angabe ist falsch?

  • appearance
  • border
  • outline
  • quotes

richtige Antwort: outline

Man darf bei interaktiven Elementen nicht outline entfernen (es sei denn, man implementiert eine andere Anzeige des FokusStatus), ansonsten ist bei Tastaturbedienung nicht erkennbar, wenn der Button (Link, …) den Fokus hat.