HTML in 2012

Door Wouter J, 3 jaar geleden, 8.656x bekeken

Het is 2012, HTML5 is klaar om te gebruiken en daarmee zijn de grappen van W3C bovenwater gekomen.
Tijd om eens te kijken wat nu echt nodig is en wat niet, wat semantiek precies is en hoe je een juiste pagina opbouwt.
Ook is er natuurlijk plek voor wat uitleg van de nieuwe tags.

Deze tutorial is niet bedoelt als beginnershandleiding, maar meer om je wat in HTML te gaan verdiepen als je HTML al kent.

Een hele goede (video)tutorial over semantiek is Let's write semantic markup. Zeker een aanrader om eens te bekijken.

Gesponsorde koppelingen

Inhoudsopgave

  1. HTML Doctype
  2. <meta charset=utf-8>
  3. Quotes in HTML
  4. Nieuwe semantische tags
  5. Wanneer kun je HTML5 gebruiken?
  6. Nawoord

 

Er zijn 18 reacties op 'Html in 2012'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jeroen VD
Jeroen VD
3 jaar geleden
 
1 +1 -0 -1
Op pagina 4 bij het <article> tag is er wat mis met je BB code code tag.

Bij het<hgroup> tag heb je het over een tweede titel. Dat heet een ondertitel. Je legt het wat vaag uit.

Misschien is het een idee om schermafdrukken erbij te zetten op pagina 4, ik denk dat het dan wat duidelijker wordt

Verder een mooie, duidelijke tut

Een vraage, wat is nu het nut van een <nav> tag?
Jacco Brandt
Jacco Brandt
3 jaar geleden
 
1 +1 -0 -1
Dode link bij puntje 3.
Wouter J
Wouter J
3 jaar geleden
 
0 +1 -0 -1
Jeroen:
>> Op pagina 4 bij het <article> tag is er wat mis met je BB code code tag.
Bedankt voor het melden, het is nu aangepast.

>> Misschien is het een idee om schermafdrukken erbij te zetten op pagina 4, ik denk dat het dan wat duidelijker wordt
Dat is juist iets wat ik niet wil doen en wat ik ook duidelijk wou maken. HTML draait niet om hoe het er op het scherm uit ziet, dat zijn slechts extra dingen die een browser doet met CSS. HTML is het goed weer geven van elke tekst die er op je pagina verschijnt.

>> Een vraage, wat is nu het nut van een <nav> tag?
Om te gebruiken waarbij navigatie van doen is. Dit kan zijn bij het menu van een site, een menu van een tutorial (zoals hier) of bijv. waar alle buttons naar social media in staan.

Jacco:
>> Dode link bij puntje 3.
Bedankt, ook dit aangepast.
Jeroen VD
Jeroen VD
3 jaar geleden
 
0 +1 -0 -1
Dus alle tags geven niets weer? Je ziet of merkt er niets van? Maar is het enige nut dan om overzicht te krijgen in je source te krijgen? Dat is me niet helemaal duidelijk geworden.
Wouter J
Wouter J
3 jaar geleden
 
0 +1 -0 -1
HTML draait niet alleen om wat de browser ziet, eigenlijk draait HTML daar helemaal niet om. De tags geven voor een machine juist heel erg veel. Als wij zo'n site als dit zien dan zien we aan de opmaak wat belangrijk is, wat een alinea is; wat een titel is; wat een menu is. Alleen een machine (browser, zoekrobot, andere robot) ziet dit natuurlijk niet. Die kan alleen de HTML code bekijken.
En dus moet je doormiddel van HTML tags proberen precies uit te leggen wat een mens ziet. Dit zorgt voor betere SEO, echte HTML en minder stijl problemen met CSS.

HTML is niet een beetje alles in een div stoppen en aan de slag met CSS. Nee, HTML is eigenlijk een gewone taal opzich. Het is de taal waarmee jij vertelt aan een browser wat de tekst voorstelt.
Bas Kreleger
Bas Kreleger
3 jaar geleden
 
0 +1 -0 -1
Weet je ook wanneer de HTML5 zal worden gebruikt als standaard? De tags worden nu nog niet herkend in de hudige w3c validator. Is het wel al aan te raden om de nieuwe tags te gebruiken?
Ozzie PHP
Ozzie PHP
3 jaar geleden
 
0 +1 -0 -1
http://ishtml5readyyet.com/

Voor nieuwe websites zou ik al wel de nieuwe tags gebruiken. De nieuwste browsers zullen namelijk een steeds betere ondersteuning leveren. Voor oudere browsers kun je een extra javascript toevoegen zodat de nieuwe elementen in oudere browsers toch worden herkend. Meer info: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
Wouter J
Wouter J
3 jaar geleden
 
Bas Kregeler:
Is het wel al aan te raden om de nieuwe tags te gebruiken?

Ik meen ergens gelezen te hebben dat W3C denkt dat je het vanaf 2020 het volledig voor iedereen kunt gebruiken. Deze datum is ondertussen wat naar voren geschoven, omdat MicroSoft IE6 aan het verwijderen is.

Maar ik zou het nu al gebruiken. Alle moderne browsers supporten het en mochten ze het niet supporten dan kun je HML5shiv gebruiken zodat je lay-out tenminste niet verpest wordt.

Bas Kregeler:
Weet je ook wanneer de HTML5 zal worden gebruikt als standaard?

Eigenlijk is het nu al de standaard. Precies zoals CSS3, dat is ook nu al de standaard. HTML5 is een samenhang van verbeterde XHTML1 en HTML4 dingen en een combinatie van het nu geaccepteerde dingen die nog nooit naar buiten zijn gekomen.

Bas Kregeler:
De tags worden nu nog niet herkend in de hudige w3c validator.

Ik zal er een nieuwe link bij plaatsen, want W3C heeft een nieuwe, veel betere, html validator: http://www.w3.org/html/check

Wel grappig dat deze tutorial nu een 'PHP top-tutorial' label heeft terwijl het over HTML gaat... ;)
Bas Kreleger
Bas Kreleger
3 jaar geleden
 
0 +1 -0 -1
Misschien leuk om daar nog een extra hoofdstuk van te maken? Dat is wel erg interessant. HTML is wel een apart iets, alleen kan niet iedere programmeur vlekkeloos gevalideerd HTML'en, vandaar even wat extra aandacht op de homepage.
Wouter J
Wouter J
3 jaar geleden
 
0 +1 -0 -1
Bedankt voor de tip. Ik heb het wat uitgebreid, nog wat onderzoek erna gedaan en een nieuwe pagina toegevoegd.
Gerhard l
gerhard l
3 jaar geleden
 
1 +1 -0 -1
Hoe werkt die validator?? http://www.w3.org/html/check
Wouter J
Wouter J
3 jaar geleden
 
1 +1 -0 -1
Ik zie dat hij verwijderd is. Jammer, het was een veel betere validator...

Bedankt voor het melden, heb hem even weg gehaald.

EDIT


Ik heb meteen een stukje over Modernizr en YEPnope.js toegevoegd aan de Wanneer kun je HTML5 gebruiken? pagina.
Kris Peeters
Kris Peeters
3 jaar geleden
 
1 +1 -0 -1
Dit is ook wel grappig

http://diveintohtml5.info/past.html

Een stukje geschiedenis. Van waar komen we?
Wouter J
Wouter J
3 jaar geleden
 
0 +1 -0 -1
Inderdaad, geschiedenis is best leuk. Heb wel eens geprobeerd IE1 te downloaden en dan HTML1 te schrijven, maar helaas, dat was niet mogelijk...

Ook een leuke: http://evolutionofweb.appspot.com/
Niek Kasius
Niek Kasius
1 jaar geleden
 
0 +1 -0 -1
Nou ik heb het ook eens geprobeerd dat html5 maar ben er maar weer mee gestopt, want toen ik de browser wou afsluiten verdweed opeens de menu balk boven in de browser, en kon ik niks mee dan alleen via taakbeheer, naderhand zag ik dat als ik met de aanwijzer naar rechtsboven ging dat die balk wel weer verscheen maar ook weer verdween als er niet op stond.
Nu weet ik niet of die test met html5 daar de oorzaak van was, maar ik vind het toch wel vreemd, is net of die html mijn internet opties heeft veranderd
Wouter J
Wouter J
1 jaar geleden
 
0 +1 -0 -1
Nee, dat komt niet door HTML5. HTML5 kan alleen de website aanpassen, niet je browser.

Mogelijk komt het omdat je per ongeluk op F11 hebt geklikt, waardoor je browser in fullscreen mode schiet. Klik eens op 'esc' of 'F11' om weer terug te gaan
Donny Wie weet
Donny Wie weet
1 jaar geleden
 
0 +1 -0 -1
Is hgroup nogsteeds een validated semantische tag? Hoorde van mijn docent dat die eruit zou gaan omdat die eigenlijk redelijk bullshit is...
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Wouter J
Wouter J
1 jaar geleden
 
0 +1 -0 -1

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. HTML Doctype
  2. <meta charset=utf-8>
  3. Quotes in HTML
  4. Nieuwe semantische tags
  5. Wanneer kun je HTML5 gebruiken?
  6. Nawoord

Labels

PHP tutorial opties