HTML

Wat doet een DOCTYPE?

DOCTYPE is een afkorting voor Document Type. Een DOCTYPE is altijd gekoppeld aan een DTD - voor Document Type Definition.

Een DTD definieert hoe documenten van een bepaald type gestructureerd moeten zijn (d.w.z. een button kan een span bevatten, maar geen div), terwijl een DOCTYPE verklaart welke DTD een document vermeende respecteert (d.w.z. dit document respecteert de HTML DTD).

Voor webpagina's is de DOCTYPE-declaratie vereist. Het wordt gebruikt om user agents te vertellen welke versie van de HTML-specificaties uw document respecteert. Zodra een user agent een correcte DOCTYPE heeft herkend, zal het de no-quirks modus activeren die overeenkomt met deze DOCTYPE voor het lezen van het document. Als een user agent geen correcte DOCTYPE herkent, zal het de quirks modus activeren.

De DOCTYPE-declaratie voor de HTML5-standaarden is <!DOCTYPE html>.

Hoe serveer je een pagina met inhoud in meerdere talen?

Ik ga ervan uit dat het gaat om het meest voorkomende geval, namelijk hoe je een pagina serveert met inhoud die in meerdere talen beschikbaar is, maar de inhoud binnen de pagina alleen in één consistente taal moet worden weergegeven.

Wanneer een HTTP-verzoek naar een server wordt gedaan, stuurt de aanvragende user agent meestal informatie over taalvoorkeuren, zoals in de Accept-Language header. De server kan deze informatie dan gebruiken om een versie van het document in de juiste taal terug te sturen als een dergelijk alternatief beschikbaar is. Het teruggestuurde HTML-document moet ook het lang attribuut in de <html> tag declareren, zoals <html lang="en">...</html>.

Natuurlijk is dit nutteloos om een zoekmachine te laten weten dat dezelfde inhoud in verschillende talen beschikbaar is, en dus moet je ook gebruik maken van het hreflang attribuut in de <head>. Bijv. <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />

In de back-end zal de HTML-markup i18n placeholders en inhoud voor de specifieke taal bevatten die zijn opgeslagen in YML- of JSON-indelingen. De server genereert dan dynamisch de HTML-pagina met inhoud in die specifieke taal, meestal met behulp van een back-end framework.

Waar moet je op letten bij het ontwerpen of ontwikkelen voor meertalige sites?

  • Gebruik het lang attribuut in uw HTML.
  • Gebruikers naar hun moedertaal leiden - Sta een gebruiker toe om zijn land/taal gemakkelijk en zonder gedoe te wijzigen.
  • Tekst in rasterafbeeldingen (bijv. png, gif, jpg, enz.) is geen schaalbare aanpak - Tekst in een afbeelding plaatsen is nog steeds een populaire manier om mooie, niet-systeemlettertypen op elke computer weer te geven. Om tekst in afbeeldingen te vertalen, moet echter voor elke taal een aparte afbeelding worden gemaakt voor elke tekstreeks. Meer dan een handvol van dergelijke vervangingen kan snel uit de hand lopen.
  • Beperkende woorden/zinslengte - Sommige inhoud kan langer zijn wanneer deze in een andere taal is geschreven. Wees bedacht op lay-out- of overloop problemen in het ontwerp. Het is het beste om ontwerpen te vermijden waarbij de hoeveelheid tekst een ontwerp zou maken of breken. Tekens tellen mee bij dingen zoals koppen, labels en knoppen. Ze zijn minder een probleem bij vrij stromende tekst zoals hoofdtekst of opmerkingen.
  • Wees bedacht op hoe kleuren worden waargenomen - Kleuren worden verschillend waargenomen in verschillende talen en culturen. Het ontwerp moet kleur op de juiste manier gebruiken.
  • Datums en valuta formatteren - Kalenderdatums worden soms op verschillende manieren weergegeven. Bijv. "May 31, 2012" in de VS versus "31 May 2012" in delen van Europa.
  • Vertaalde strings niet samenvoegen - Doe niets zoals "De datum vandaag is " + datum. Het zal breken in talen met een andere woordvolgorde. Gebruik in plaats daarvan een template string met parametersubstitutie voor elke taal. Kijk bijvoorbeeld naar de volgende twee zinnen in respectievelijk Engels en Chinees: I will travel on {% date %} en {% date %} 我会出发. Merk op dat de positie van de variabele anders is vanwege de grammatica regels van de taal.
  • Leesrichting van taal - In het Engels lezen we van links naar rechts, van boven naar beneden, in traditioneel Japans wordt tekst van boven naar beneden, van rechts naar links gelezen.
  • Handig om te hebben - neem de locale op in het pad (bijv. en_US, zh_CN, etc).

Waar zijn `data-` attributen goed voor?

Voordat JavaScript-frameworks populair werden, gebruikten front-end ontwikkelaars data- attributen om extra gegevens in het DOM zelf op te slaan, zonder andere hacks zoals niet-standaard attributen, extra eigenschappen op het DOM. Het is bedoeld om aangepaste gegevens op te slaan die privé zijn voor de pagina of applicatie, waarvoor geen geschiktere attributen of elementen zijn.

Tegenwoordig wordt het gebruik van data- attributen over het algemeen niet aangemoedigd. Een reden is dat gebruikers het data-attribuut eenvoudig kunnen wijzigen door inspect element in de browser te gebruiken. Het datamodel kan beter in JavaScript zelf worden opgeslagen en up-to-date blijven met het DOM via databinding, eventueel via een bibliotheek of een framework.

Een perfect geldige toepassing van data-attributen is echter om een haakje toe te voegen voor end-to-end testframeworks zoals Selenium en Capybara zonder dat er zinloze klassen of ID-attributen hoeven te worden aangemaakt. Het element heeft een manier nodig om te worden gevonden door een bepaalde Selenium-specificatie en iets als data-selector='the-thing' is een geldige manier om dit te doen zonder de semantische markup anderszins te bemoeilijken.

Beschouw HTML5 als een open webplatform. Wat zijn de bouwstenen van HTML5?

  • Semantiek - Hiermee kunt u nauwkeuriger beschrijven wat uw inhoud is.
  • Connectiviteit - Hiermee kunt u op nieuwe en innovatieve manieren communiceren met de server.
  • Offline en opslag - Hiermee kunnen webpagina's lokaal gegevens aan de client-zijde opslaan en efficiënter offline werken.
  • Multimedia - Video en audio tot eersteklas burgers in het Open Web maken.
  • 2D/3D grafische weergave en effecten - Een veel diverser scala aan presentatieopties mogelijk maken.
  • Prestaties en integratie - Meer snelheidsoptimalisatie en beter gebruik van computerhardware bieden.
  • Toegang tot apparaten - Het gebruik van verschillende invoer- en uitvoerapparaten mogelijk maken.
  • Styling - Auteurs in staat stellen om geavanceerdere thema's te schrijven.

Beschrijf het verschil tussen een `cookie`, `sessionStorage` en `localStorage`.

Alle bovengenoemde technologieën zijn key-value opslagmechanismen aan de clientzijde. Ze kunnen alleen waarden als strings opslaan.

| | cookie | localStorage | sessionStorage | | --- | --- | --- | --- | | Initiator | Client of server. Server kan Set-Cookie header gebruiken | Client | Client | | Vervaldatum | Handmatig instellen | Voor altijd | Bij het sluiten van het tabblad | | Persistent over browsersessies heen | Hangt af van of de vervaldatum is ingesteld | Ja | Nee | | Naar server gestuurd bij elk HTTP-verzoek | Cookies worden automatisch verzonden via Cookie header | Nee | Nee | | Capaciteit (per domein) | 4kb | 5MB | 5MB | | Toegankelijkheid | Elk venster | Elk venster | Dezelfde tab |

Opmerking: Als de gebruiker besluit om bladergegevens te wissen via welk mechanisme dan ook dat door de browser wordt geleverd, worden alle opgeslagen cookie, localStorage of sessionStorage gewist. Het is belangrijk om dit in gedachten te houden bij het ontwerpen voor lokale persistentie, vooral bij vergelijking met alternatieven zoals server-side opslag in een database of iets dergelijks (die natuurlijk persistent blijft ondanks gebruikersacties).

Beschrijf het verschil tussen `<script>`, `<script async>` en `<script defer>`.

  • <script> - HTML-parsing wordt geblokkeerd, het script wordt onmiddellijk opgehaald en uitgevoerd, HTML-parsing wordt hervat nadat het script is uitgevoerd.
  • <script async> - Het script wordt parallel aan de HTML-parsing opgehaald en uitgevoerd zodra het beschikbaar is (mogelijk voordat de HTML-parsing is voltooid). Gebruik async wanneer het script onafhankelijk is van andere scripts op de pagina, bijvoorbeeld analysescripts.
  • <script defer> - Het script wordt parallel aan de HTML-parsing opgehaald en uitgevoerd wanneer de pagina klaar is met parsen. Als er meerdere zijn, wordt elk uitgesteld script uitgevoerd in de volgorde waarin ze in het document zijn aangetroffen. Als een script afhankelijk is van een volledig geparsed DOM, is het defer attribuut nuttig om ervoor te zorgen dat de HTML volledig is geparsed voordat het script wordt uitgevoerd. Een uitgesteld script mag geen document.write bevatten.

Opmerking: De async en defer attributen worden genegeerd voor scripts die geen src attribuut hebben.

Waarom is het over het algemeen een goed idee om CSS `<link>`s tussen `<head></head>` en JS `<script>`s net voor `</body>` te plaatsen? Kent u uitzonderingen?

Plaatsen van <link>s in de <head>

Het plaatsen van <link>s in de <head> is een onderdeel van de juiste specificatie voor het bouwen van een geoptimaliseerde website. Wanneer een pagina voor het eerst wordt geladen, worden HTML en CSS gelijktijdig geparseerd; HTML creëert de DOM (Document Object Model) en CSS creëert de CSSOM (CSS Object Model). Beide zijn nodig om de visuals op een website te creëren, wat zorgt voor een snelle "first meaningful paint" timing. Deze progressieve rendering is een categorie waarin de prestatiescores van optimalisatiesites worden gemeten. Het plaatsen van stylesheets onderaan het document is wat progressieve rendering in veel browsers belemmert. Sommige browsers blokkeren rendering om te voorkomen dat elementen van de pagina opnieuw moeten worden geverfd als hun stijlen veranderen. De gebruiker blijft dan een blanco witte pagina zien. Andere keren kunnen er flitsen van ongestyleerde inhoud (FOUC) optreden, die een webpagina zonder toegepaste styling tonen.

Plaatsen van <script>s net voor </body>

<script> tags blokkeren HTML-parsing terwijl ze worden gedownload en uitgevoerd, wat uw pagina kan vertragen. Door de scripts onderaan te plaatsen, kan de HTML eerst worden geparseerd en aan de gebruiker worden weergegeven.

Een uitzondering voor de positionering van <script>s onderaan is wanneer uw script document.write() bevat, maar tegenwoordig is het geen goede gewoonte om document.write() te gebruiken. Bovendien betekent het plaatsen van <script>s onderaan dat de browser de scripts pas kan downloaden nadat het hele document is geparseerd. Dit zorgt ervoor dat uw code die DOM-elementen moet manipuleren geen fout zal veroorzaken en het hele script zal stoppen. Als u <script>s in de <head> moet plaatsen, gebruik dan het defer attribuut, wat hetzelfde effect zal bereiken van het script pas uitvoeren nadat de HTML is geparseerd, maar de browser kan het script eerder downloaden.

Denk eraan dat het plaatsen van scripts net voor de afsluitende </body> tag de illusie zal wekken dat de pagina sneller laadt op een lege cache (omdat de scripts het downloaden van de rest van het document niet blokkeren). Als u echter code hebt die u wilt uitvoeren tijdens het laden van de pagina, zal deze pas beginnen met uitvoeren nadat de hele pagina is geladen. Als u die scripts in de <head> tag plaatst, zouden ze eerder beginnen met uitvoeren - dus op een geprimede cache zou de pagina eigenlijk sneller lijken te laden.

<head> en <body> tags zijn nu optioneel

Volgens de HTML5-specificatie zijn bepaalde HTML-tags zoals <head> en <body> optioneel. De stijlgids van Google raadt zelfs aan om ze te verwijderen om bytes te besparen. Deze praktijk wordt echter nog steeds niet breed toegepast en de prestatiewinst zal waarschijnlijk minimaal zijn en voor de meeste sites waarschijnlijk niet van belang zijn.

Wat is progressieve rendering?

Progressieve rendering is de naam die wordt gegeven aan technieken die worden gebruikt om de prestaties van een webpagina te verbeteren (met name de waargenomen laadtijd) om inhoud zo snel mogelijk weer te geven voor weergave.

Hetzelfde was veel gangbaarder in de dagen vóór breedbandinternet, maar het wordt nog steeds gebruikt in moderne ontwikkeling, aangezien mobiele dataverbindingen steeds populairder (en onbetrouwbaarder) worden!

Voorbeelden van dergelijke technieken:

  • Lui laden van afbeeldingen - Afbeeldingen op de pagina worden niet allemaal tegelijk geladen. JavaScript wordt gebruikt om een afbeelding te laden wanneer de gebruiker naar het deel van de pagina scrollt dat de afbeelding weergeeft.
  • Prioriteren van zichtbare inhoud (of boven-de-vouw rendering) - Neem alleen de minimale CSS/inhoud/scripts op die nodig zijn voor het deel van de pagina dat het eerst in de browser van de gebruiker zou worden weergegeven om zo snel mogelijk weer te geven, u kunt dan uitgestelde scripts gebruiken of luisteren naar de DOMContentLoaded/load gebeurtenis om andere bronnen en inhoud te laden.
  • Asynchrone HTML-fragmenten - Delen van de HTML naar de browser spoelen terwijl de pagina aan de back-end wordt opgebouwd. Meer details over de techniek zijn te vinden.

Waarom zou je een `srcset` attribuut gebruiken in een `img` tag? Leg het proces uit dat de browser gebruikt bij het evalueren van de inhoud van dit attribuut.

Je zou het srcset attribuut gebruiken wanneer je verschillende afbeeldingen aan gebruikers wilt aanbieden, afhankelijk van de breedte van hun apparaatweergave - afbeeldingen van hogere kwaliteit aanbieden aan apparaten met een retina-scherm verbetert de gebruikerservaring, terwijl het aanbieden van afbeeldingen met een lagere resolutie aan low-end apparaten de prestaties verhoogt en de verspilling van gegevens vermindert (omdat het aanbieden van een grotere afbeelding geen zichtbaar verschil zal hebben). Bijvoorbeeld: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> vertelt de browser om de kleine, middelgrote of grote .jpg afbeelding weer te geven, afhankelijk van de resolutie van de client. De eerste waarde is de afbeeldingsnaam en de tweede is de breedte van de afbeelding in pixels. Voor een apparaatbreedte van 320px worden de volgende berekeningen gemaakt:

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

Als de resolutie van de client 1x is, is 1.5625 het dichtstbijzijnde, en 500w overeenkomend met small.jpg wordt door de browser geselecteerd.

Als de resolutie retina is (2x), zal de browser de dichtstbijzijnde resolutie boven het minimum gebruiken. Dit betekent dat het niet de 500w (1.5625) zal kiezen, omdat deze groter is dan 1 en de afbeelding er slecht uit zou kunnen zien. De browser zou dan de afbeelding kiezen met een resulterende verhouding dichter bij 2, namelijk 1000w (3.125).

srcsets lossen het probleem op waarbij je kleinere afbeeldingsbestanden wilt aanbieden aan apparaten met een smal scherm, omdat deze geen enorme afbeeldingen nodig hebben zoals desktopdisplays - en optioneel ook dat je afbeeldingen met verschillende resoluties wilt aanbieden aan schermen met een hoge/lage dichtheid.

Heeft u eerder verschillende HTML-sjabloontalen gebruikt?

Ja, Pug (voorheen Jade), ERB, Slim, Handlebars, Jinja, Liquid en EJS om er maar een paar te noemen. Naar mijn mening zijn ze min of meer hetzelfde en bieden ze vergelijkbare functionaliteit voor het escapen van inhoud en handige filters voor het manipuleren van de weer te geven gegevens. De meeste sjabloon engines stellen u ook in staat om uw eigen filters in te voegen voor het geval u aangepaste verwerking nodig heeft voordat de weergave plaatsvindt.

Wat is het verschil tussen canvas en SVG?

Canvas is gebaseerd op pixels en werkt met rasterafbeeldingen, terwijl SVG gebaseerd is op vectoren en wiskundige beschrijvingen van vormen gebruikt. Canvas maakt gebruik van imperatief tekenen, waarbij elke stap wordt gespecificeerd met JavaScript, ideaal voor dynamische en interactieve graphics zoals animaties en games.

SVG daarentegen maakt gebruik van declaratief tekenen, waarbij vormen en paden direct in HTML worden gedefinieerd, waardoor het toegankelijker en SEO-vriendelijker is. Canvas is optimaal voor complexe scènes vanwege de lagere overhead, maar schalen kan leiden tot verlies van beeldkwaliteit. SVG, omdat het resolutie-onafhankelijk is, past zich aan verschillende schermformaten aan zonder kwaliteitsverlies.

Uiteindelijk is canvas geschikt voor dynamische, prestatie-intensieve graphics, terwijl SVG uitblinkt in schaalbare, resolutie-onafhankelijke graphics, met inherente toegankelijkheids- en SEO-voordelen.

Wat zijn lege elementen in HTML?

Lege elementen in HTML zijn elementen die geen inhoud bevatten tussen hun openings- en sluittags. In plaats daarvan zijn het zelfsluitende tags, wat betekent dat ze een schuine streep (/) hebben vóór de afsluitende punthaak (>). Enkele veelvoorkomende voorbeelden van lege elementen zijn:

  • <img>: Wordt gebruikt om afbeeldingen in het document in te bedden.
  • <input>: Wordt gebruikt om gebruikersinvoer te accepteren.
  • <br>: Wordt gebruikt om regeleindes of geforceerde regeleindes in te voegen.
  • <hr>: Wordt gebruikt om horizontale lijnen of scheidingstekens te maken.