Comment text here/p>
Opmaak is iets moois en het is in de loop der jaren zeker veranderd. Wat effectief HTML1 was, is zeker verder gegaan tot een verbazingwekkende semantische markup-taal, waaraan we grotendeels het W3C kunnen danken. En wat weet u, het volgende om hen te bedanken voor is tot stand gekomen - HTML5.
In tegenstelling tot de vorige versie van HTML, waar de code meestal een beperkte structuur was die werd bepaald door hoe je gebruik maakte van de klasse- en ID-elementen, probeert html5 echt veel meer structuur te bieden.
Alle lay-outs kunnen worden gemaakt met semantische tags en elementen die bepalen hoe u moet structureren en, misschien wel belangrijker, die u helpen bij het structureren van elke pagina. Dit levert code op die veel meer schoon en leesbaar is dan in eerdere HTML-versies, en het is echt iets heel verbluffends. De nieuwe tags vereisen echt dat u nadenkt over hoe u uw pagina structureert. Laten we eerlijk zijn - op het einde is dat iets geweldigs voor zowel webontwerpers als ontwikkelaars.
Voordat u de structuur van HTML5 begrijpt en een voorbeeldsjabloon voor uw projecten maakt en codeert, moet u weten hoe dit is gebeurd. Houd er echter rekening mee dat de huidige versie van HTML5 nog geen versie heeft bereikt die de W3C alsnog final zou kunnen noemen, maar er is nog vrij veel over te leren en te gebruiken in je code. Dit is wat het W3C over dit onderwerp te zeggen heeft:
"Implementators moeten zich ervan bewust zijn dat deze specificatie niet stabiel is. Uitvoeringsverantwoordelijken die niet deelnemen aan de discussies, zullen waarschijnlijk merken dat de specificaties op onverenigbare wijze van onder hen veranderen. Leveranciers die geïnteresseerd zijn in het implementeren van deze specificatie voordat deze uiteindelijk de fase van de kandidaat-aanbeveling bereikt, moeten zich aansluiten bij de bovengenoemde mailinglijsten en deelnemen aan de discussies .”
Maar laat je niet afschrikken. Er zijn altijd mensen die er voortdurend voor zorgen dat het niet van onder ons verandert. U zult dus zeker weten of zo'n drastische verandering inderdaad gebeurt. Terug naar het onderwerp, een van de belangrijkste vragen die mensen hebben over HTML5 is "
Het kwam eigenlijk van ons allemaal. In 2005 voerde Google een studie van meer dan 3 miljard websites en ontdekte dat de meest voorkomende klassen die in algemene markup werden gebruikt, eigenlijk waren wat u daar op die pagina ziet. Voettekst, menu, titel, klein, tekst, inhoud, koptekst en navigatie behoren allemaal tot de top van de populariteitskaart. En eigenlijk heeft de W3C besloten wat te gebruiken voor de nieuwe semantische tags voor HTML5. Nu we dat weten, laten we meteen dieper ingaan op wat die tags zijn en de fundamentele fundamentele wijzigingen in HTML5.
Een doctype is niet bepaald een element van de HTML, maar het is een vertraging, en een die steeds belangrijker wordt naarmate de tijd vordert. Door er op de juiste manier gebruik van te maken, kan uw browser begrijpen wat voor soort HTML het probeert te ontleden, dus we willen altijd de juiste doctypes gebruiken. In alle eerlijkheid, op dit moment kun je eigenlijk al het HTML5-doctype voor alles gebruiken, maar laten we ook een aantal oude versies behandelen. Dit is waar we zo eenvoudig zijn gekomen:
Best goed toch? U hoeft geen document bij te houden voor het kopiëren en plakken in een belachelijk lang doctype, of nog erger, probeer de belachelijk lange doctypes van eerdere versies te onthouden. Voor HTML5 hoeft u alleen maar te typen . Ah, wat een opluchting.
Voordat we dit gedeelte verlaten, gaan we eerst een aantal andere elementen bekijken die eenvoudiger zijn geworden. Het wortelelement is vereenvoudigd, waarnaar in plaats van het schrijven van iets als:
We kunnen gewoon schrijven:
De dingen die we moeten kopiëren en plakken om steeds kleiner en kleiner te worden. Bijvoorbeeld, in het head-element ging onze karaktercodering van dingen als:
naar de nieuwere versie in HTML5:
En ten slotte hebben onze links hun typekenmerk laten vallen. Dus bijvoorbeeld:
Wordt dit:
Het sectie-element is eigenlijk elke generieke sectie van een HTML-document. Meestal is het echter een thematische groep van inhoud - die een kop kan hebben maar er geen nodig heeft.
Een algemene vuistregel voor het gebruik van de sectiekop is deze alleen te gebruiken als er expliciet naar wordt verwezen in het overzicht van het document. Als er in de omtrek een 'sectie' is waarnaar u verwijst of als u vindt dat alle inhoud in een gebied een 'sectie' van soorten is, voeg dan ook de sectietag toe. Als je het echter vooral voor stylingdoeleinden wilt gebruiken, doe het dan gewoon niet . Gebruik in plaats daarvan een
Het "nav" -element vertegenwoordigt elke sectie van een pagina die linkt naar andere delen van die pagina of andere pagina's binnen de sitemap. Telkens wanneer u denkt aan navigatielinks, moet u denken aan "nav-tag".
Het nav-element is met name bedoeld voor grotere navigatieblokken. Elk groot element dat links bevat naar andere delen van de pagina van de site of naar andere pagina's van de site. Houd er echter rekening mee dat een navigatiegedeelte niet de vorm van een lijst hoeft te hebben, hoewel dat vrij standaard is. Het kan in proza, alinea-tags of vrijwel alles zijn - zolang het oorspronkelijk geschikt was om in de eerste plaats in dergelijke tags te zijn.
Het artikelelement vertegenwoordigt een zelfstandige compositie in een document, pagina of elke site. Het belangrijkste om rekening mee te houden met artikellabels is dat het meestal onafhankelijk distribueerbare of herbruikbare inhoud is die meestal binnen de tags wordt geplaatst. Het kan een forumpost, een tijdschrift- of krantenartikel of een blogbericht zijn, zelfs opmerkingen - zolang het een onafhankelijk inhoudsitem betreft.
Artikelen kunnen "secties" bevatten, "koppen" erin, zelfs "hgroup" s erin. Maar houd er rekening mee wanneer en hoe u dit element gebruikt, omdat het niet zo vaak wordt gebruikt als een
Laten we een voorbeeld nemen. Stel dat u bijvoorbeeld een blogbericht hebt met enkele opmerkingen. Je kunt dit als volgt doen in HTML5:
The Blog Entry Title
12/25/2045
Blog entry
...
Comments
Comment text here/p>
Another comment here
Het element opzij vertegenwoordigt elke sectie van een pagina die bestaat uit inhoud die tangentieel gerelateerd is aan de inhoud rond het element opzij. Het belangrijkste om te onthouden met deze tag is dat, hoewel het inhoudelijk tangentieel gerelateerd is aan de inhoud rond de opzij-tag, dit meestal informatie of inhoud is die in karakteristiek is gescheiden. Je zult het het vaakst in zijbalken gebruiken, omdat de meeste zijbalken perfect zijn om volledig in ophangtags te worden gewikkeld. Andere toepassingen kunnen pull-quotes, stukjes reclame, groepen nav links of zelfs adressen in de buurt van het adres van een locatie in kwestie zijn.
Om meer in detail te treden, is het echter op elk moment dat je de behoefte voelt om letterlijk een woordje terzijde te nemen en iets uit te leggen, te verwijzen, te noemen, te verklaren of te bevragen. U kunt zelfs een opzij-element gebruiken voor een groter gedeelte van een site, zoals een zijbalk voor Twitter of Facebook, of willekeurige koppelingen. Je zou kunnen dat het een kanttekening is, gebruik dan een header en een nav-sectie erin, zelfs om te helpen begrijpen wat daar gaande is. Je kunt het gebruiken in het voettekstgedeelte van blogposts om naar dingen over hen te verwijzen, of vrijwel overal waar het perfect kan worden geïmplementeerd.
Het hgroup-element vertegenwoordigt de kop van een sectie. Dit element kan het best worden gebruikt om een reeks h1-h6-elementen te groeperen wanneer de kop meerdere niveaus of subkoppen heeft, zoals precies het artikel dat u aan het lezen bent. Dit zou perfect zijn voor een hgroup. Je kunt het ook gebruiken voor alternatieve titels of taglines.
De W3C herinnert ons eraan:
"Voor de doeleinden van documentsamenvattingen, contouren en dergelijke wordt de tekst van hgroup-elementen gedefinieerd als de tekst van het hoogst gerangschikte h1-h6-element na afstammeling van het hgroup-element, als er dergelijke elementen zijn, en de eerste als zodanig element als er meerdere elementen met die rangorde zijn. Als er geen dergelijke elementen zijn, is de tekst van het hgroup-element de lege tekenreeks.
Andere toepassingen zijn bijvoorbeeld delen van een blog waarin u de koptekst en ondertitel voor uw blog post opslaat. U kunt het ook gebruiken voor boektitels en beschrijvingen, om artsen in uw regio en hun expertisegebied een lijst te geven, of het zelfs gebruiken om de functionaliteit van een tabel te kopiëren. Laten we eens naar zo'n voorbeeld kijken. Op een tafel zouden we hebben:
Doctor Name:
Randy McDocterson
Doctor Specialty
Slapping People
Dus daar kun je duidelijk in de opmaak zien dat we een arts hebben genaamd Randy McDoctoerson die gespecialiseerd is in het slaan van mensen. Nu, dat is een beetje vreemd, maar hey - het krijgt het punt over.
De header-tag vertegenwoordigt elke groep inleidende of navigatiehulpmiddelen binnen een site of secties van een site. Dus nu de formele definitie is vermeld, laten we het een beetje uiteenrafelen. We weten allemaal wat een header is, maar om specifiek te zijn bevat het verschillende dingen op de top van de meeste sites. Deze koptekstgebieden bevatten meestal brandingsecties, call-to-action-items en misschien wat navigatie. Het kan echt overal worden gebruikt die je hebt gebruikt om te schrijven:
Opmerking: het kan worden gebruikt in het begingebied van elke sectie, omdat het niet bovenaan of aan het begin van uw HTML-document hoeft te staan. Maar dat is waar het meestal wordt geïmplementeerd.
Het voettekstelement vertegenwoordigt een voettekst voor de dichtstbijzijnde geneste bovenliggende sectie en bevat meestal informatie over de bijbehorende sectie van de ouder. De footer-tag lijkt sterk op de header-tag, maar op de tegenoverliggende sectie van een pagina. Vaak zie je een voettekst van een pagina die weer links bevat die in de navigatie stonden, en misschien een logo, of iets dergelijks - nou, deze kunnen nu allemaal gehuisvest worden in een
Lorem
ipsum
Een beetje tekst hier.
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5 The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
HTML5 Template
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
HTML5 Template
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
HTML5 Template The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
HTML5 Template Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
En daar gaan we, we hebben wat navigatie toegevoegd met een mooie ongeordende lijst daar in het kopgedeelte. Maar wacht even. Wat als je een mooie grote voettekst hebt en ook diezelfde navigatorelementen in het voettekstbestand wilt hebben. Nou, laten we het daar ook toevoegen. Behalve, deze keer zullen we het niet gebruiken
HTML5 Template Over HTML5Laten we nu wat bits toevoegen voor IE en andere dergelijke technische details.
HTML5 Template HTML5-sjabloon
Mooie standaardsjabloon
En daar hebben we het: een eenvoudige maar complete HTML5-template!
Wat zijn je favoriete nieuwe CSS3-technieken? Of weinig gebruikte / weinig bekende CSS-technieken? Laat het ons weten in de reacties!