--- title: Fragen zu HTML --- Antworten auf [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Pull requests for suggestions and corrections are welcome! import TOCInline from '@theme/TOCInline'; ### Was tut ein doctype? **DOCTYPE** ist eine Abkürzung für **DOCument TYPE**. Jeder DOCTYPE ist immer mit einer **DTD** - verbunden, einer **Document Type Definition**. Eine DTD legt fest, wie ein Dokument eines bestimmten Typs strukturiert ist (d.h. ein `button` kann ein `span` enthalten, aber kein`div`), ein DOCTYPE hingegen erklärt, welche DTD ein Dokument _vermutlich_ akzeptiert (d.h. dieses Dokument akzeptiert eine HTML DTD). Webseiten benötigen die Ausweisung im jeweiligen DOCTYPE. User Agents erkennen so, welche Version der HTML-Spezifikationen das Dokument akzeptiert. Sobald ein User Agent ein korrektes DOCTYPE erkannt hat, löst es den **no-quirks mode** aus, das dem jeweiligen DOCTYPE entspricht. Wenn der User Agent kein korrektes DOCTYPE erkennt, löst er den **quirks mode** aus. Die DOCTYPE Spezifikation für den HTML5 Standard ist ``. ###### Referenzen - https://html.spec.whatwg.org/multipage/syntax.html#the-doctype - https://html.spec.whatwg.org/multipage/xhtml.html - https://quirks.spec.whatwg.org/ ### Wie lieferst du eine Seite mit Inhalten in verschiedenen Sprachen aus? Ich gehe davon aus, dass es sich um den häufigsten Fall handelt: Wie kann eine Seite mit Inhalten bedient werden, die in mehreren Sprachen verfügbar ist. Dabei soll der Inhalt innerhalb der Seite nur in einer konsistenten Sprache angezeigt werden. Wenn ein Server eine HTTP-Anforderung erhält, sendet der anfordernde User Agent normalerweise Informationen über Sprachpräferenzen, die z.B. im `Accept-Language`-Header definiert sind. Der Server kann dann diese Informationen verwenden, um eine Version des Dokuments in der entsprechenden Sprache zurückzugeben, wenn eine solche Alternative verfügbar ist. Das zurückgegebene HTML-Dokument sollte auch das `lang`-Attribut im ``-Tag deklarieren, wie z.B. `...`. Da es keinen Sinn ergibt, eine Suchmaschine wissen zu lassen, dass der gleiche Inhalt in verschiedenen Sprachen erhältlich ist, solltest du das `hreflang` Attribute im `` setzen. D.h `` Im Backend enthält das HTML-Markup `i18n'-Platzhalter und Inhalte für die jeweilige Sprache, die im YML- oder JSON-Format gespeichert sind. Der Server generiert dann dynamisch die HTML-Seite mit Inhalt in dieser speziellen Sprache, normalerweise mit Hilfe eines Backend-Frameworks. ###### Referenzen - https://www.w3.org/International/getting-started/language - https://support.google.com/webmasters/answer/189077 ### Vor welchen Dingen solltest du dich hüten, wenn du mehrsprachige Websites designst oder entwickelst? - Setze im HTML das `lang` Attribut. - Erlauben Sie einem Benutzer, sein Land/seine Sprache einfach und problemlos zu ändern. - Text in rasterbasierten Bildern (z.B. png, gif, jpg, etc.) auszuliefern, ist kein skalierbarer Ansatz. Dabei ist das Platzieren von Texten in Bildern immer noch eine beliebte Methode, um gut aussehende, nicht systemgebundene Schriftarten auf jedem Computer anzuzeigen. In diesem Fall muss aber für jeder auszuliefernde Sprache ein eigenes mit der entsprechenden Textzeichenfolge erstellt werden. Alles, was über eine Handvoll solcher Ersetzungen hinausgeht, kann schnell außer Kontrolle geraten. - Restriktive Wort-/Satzlänge - Manche Inhalte können länger sein, wenn sie in einer anderen Sprache geschrieben sind. Sei vorsichtig bei Layout- oder Überlaufproblemen im Design. Besondere Aufemerksamkeit ist prominenten Elementen wie Überschriften, Beschriftungen und Schaltflächen zu widmen, das hier sich ändernde Zeilenlängen schnell Überläufe bilden können. Frei fließender Text wie Fließtext oder Kommentartext ist weniger problematisch. - Achte darauf, wie Farben wahrgenommen werden - Farben werden je nach Sprache und Kultur unterschiedlich wahrgenommen. Das Design sollte das berücksichtigen. - Formatierung von Daten und Währungen - Kalenderdaten werden unterschiedlich dargestellt. Z.B. "31. Mai 2012" in den USA vs. "31. Mai 2012" in Teilen Europas. - Verketten Sie keine übersetzten Zeichenketten - Machen Sie nichts wie `"Das heutige Datum ist " + date`. So ein Konstrukt funktioniert in einer Sprache mit einer anderen Wortstellung nicht. Verwende stattdessen Template-Strings mit sprachspezifischen Parameter-Substitution. Dazu ein Beispiel: `I will travel on {% date %}` sieht auf Chinesisch so aus: `{% date %} 我会出发`. Beachte, dass die Position der Variable Grammatikbedingt unterschiedlich ist. - Sprachleserichtung - Im Englischen lesen wir von links nach rechts, von oben nach unten, im traditionellen Japanisch wird der Text von oben nach unten, von rechts nach links gelesen. ###### Referenzen - https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites ### Wofür sind `data-` Attribute nützlich? Bevor JavaScript-Frameworks populär wurden, benutzten Front-End-Entwickler `data-` Attribute, um zusätzliche Daten innerhalb des DOM selbst zu speichern. Sie dienen zum Speichern benutzerdefinierter Daten, für die es keine passenderen Attribute oder Elemente gibt. Heute wird die Verwendung von `Daten-` Attributen nicht empfohlen. Zum Beispiel weil Benutzer das Datenattribut leicht modifizieren können, indem sie das inspect-Element im Browser verwenden. Das Datenmodell ist besser im JavaScript gespeichert und bleibt mit dem DOM durch Datenbindung, bspw. eine Library oder ein Framework, auf dem neuesten Stand. Das Hinzufügen eines Hooks für _end to end_ Testframeworks wie Selenium und Capybara ist ein Beispiel für die gültige Verwendung von Datenattributen. Denn so ist es nicht nötig, sinnlose Klassen oder ID-Attribute erstellen zu müssen. Da das Element einen Weg benötigt , um von einer bestimmten Selenium-Spezifikation gefunden zu werden, und etwas wie `data-selector='the-thing'` ist ein gültiger Weg. ###### Referenzen - http://html5doctor.com/html5-custom-data-attributes/ - https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes ### Stelle dir HTML5 als eine offene Internetplattform vor. Was sind die Basiskomponenten von HTML5? - Semantik - Ermöglicht, Inhalte genauer zu beschreiben. - Konnektivität - Ermöglicht, auf (innovative) neue Weise mit dem Server zu kommunizieren. - Offline und Speicherung - Ermöglicht Webseiten, Daten auf der Client-Seite lokal zu speichern und offline effizienter zu arbeiten. - Multimedia - Video und Audio lassen sich besser im Open Web nutzen. - 2D/3D-Grafiken und -Effekte - Ermöglicht eine vielfältigere Palette von Präsentationsmöglichkeiten. - Leistung und Integration - Geschwindigkeitsoptimierung und bessere Nutzung der Computerhardware. - Gerätezugriff - Ermöglicht die Verwendung verschiedener Ein- und Ausgabegeräte. - Styling - Macht anspruchsvollere Themes möglich. ###### Referenzen - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 ### Beschreibe die Unterschiede zwischen `Cookies`, `sessionStorage` und `localStorage`. Alle oben genannten Technologien sind Schlüsselspeichermechanismen auf der Client-Seite. Sie sind nur in der Lage, Werte als Strings zu speichern. | | `cookie` | `localStorage` | `sessionStorage` | | --- | --- | --- | --- | | Initiator | Client bzw. Server. Server nutzt `Set-Cookie` Header | Client | Client | | Ablauf | Manuell gesetzt | Für immer | Wenn Tab geschlossen | | Persistenz über Browser-Sessions | Hängt davon ab, welcher Ablauf gesetzt ist | Ja | Nein | | Wird mit jeder HTTP-Anfrage an den Server gesendet | Cookies werden automatisch über den `Cookie`-Header gesendet | Nein | Nein | | Kapazität (pro Domain) | 4kb | 5MB | 5MB | | Zugänglichkeit | Jedes Fenster | Jedes Fenster | Selbes Tab | _Hinweis: Löscht der Nutzer seine Browser-Daten s zu löschen, löscht dies auch jeden gespeicherten `Cookie`, `LocalStorage` oder `SessionStorage`. Es ist wichtig, dies beim Design für lokale Persistenz zu bedenken. Eventuell sollte eine serverseitige Speicherung in einer Datenbank in Erwägung gezogen werden._ ###### Referenzen - https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies - http://tutorial.techaltum.com/local-and-session-storage.html ### Beschreibe die Unterschiedie zwischen `