Přechod z XHTML na sémantické HTML5

Přechod z XHTML na sémantické HTML5

Sémantika v HTML5 je na úplně jiné úrovni než v XHTML. Kódováním v HTML5 lépe označíte obsah na svém webu, vyhledávače mu tedy lépe rozumí. A i to je jeden z důvodů, proč mnoho nových šablon webů je kódováno již s využitím sémantických elementů HTML5. Že vám HTML5 nezaručí vyšší pozice ve výsledcích vyhledávání? Zatím je to stále pravda, ale HTML5 se stává novým standardem webdesignu a je jen otázka času, než webů v HTML5 bude více než ve starších verzích HTML. A tak jsem se i já rozhodl pro přechod na HTML5.


Výhody HTML5 oproti XHTML

  • Čistší kód - mnoho elementů je možné nahradit vhodnějšími tagy, krátká doctype deklarace
  • Lepší sémantika - HTML5 nabízí mnoho nových tagů, které přesně popisují určité části stránky
  • Konzistentnost - dobře napsanému HTML5 kódu se dá porozumět rychleji
  • Lepší přístupnost
  • Řada zjednodušení a vylepšení pro vývoj webových aplikací a her
  • Moderní technologie

Není mnoho objektivních důvodů, proč HTML5 nezačít používat. I kompatibilita se staršími verzemi Internet Exploreru je jednoduše možná (viz níže), takže? Jdeme na to.

Přechod z XHTML kódu do HTML5

Rozepisovat tu dokumentaci rozdílů nemá cenu, ale jen několik rychlých postřehů.

Doctype deklarace

V XHTML 1.0 transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

V HTML5:

<!DOCTYPE html>

Opravdové zjednodušení, které si zapamatujete i kdybyste nechtěli.

Nepárové samouzavírací značky

V XHTML

<img /> znamená <img></img>

V HTML5

<img/> znamená <img>

V HTML5 samouzavírací značky již neexistují - pokud jste zvyklí je používat, můžete, ale je to zcela zbytečné. Navíc musíte myslet na to, že se taková značka v HTML5 chová jinak, než jste byli doposud zvyklí.

Nové HTML5 elementy, značky, tagy

Je jich celá řada, z těch nejdůležitějších, o kterých se chci zmínit, jsou to hlavně ty blokové:

  • header
  • footer
  • section
  • article
  • aside
  • nav

A jelikož sémantika v HTML5 bude hlavní náplň mé bakalářské práce, tak jsem začal toto téma studovat už o malinko dříve. Všechny vyjmenované tagy jsou blokové, je tedy u nich minimálně vhodné nastavit styl display: block. A pak už nezbývá, než se podívat na strukturu svého webu, zamyslet se nad tím, které tagy by bylo vhodné nahradit kterými, a všechny podle toho upravit.

Hrubé schéma kódu tohoto webu ještě v XHTML

Schéma kódu webu Tomáše Janečka ještě v XHTML

 

Hrubé schéma kódu tohoto webu po přepracování do HTML5

Schéma kódu webu Tomáše Janečka po přepracování do HTML5

Rozdíly jsou jasné na první pohled. Kdo by je přesto neviděl, Firebug / Dragonfly nebo jiný debugger vám ukáže to, co pravá strana následujícího obrázku. Když jsem dělal screenshot, Doctype jsem měl již přepsaný, tam tedy změnu neuvidíte, podle výše napsaného je ale vcelku jasná.

HTML struktura webu Tomáše Janečka před a po předělání do HTML5

 

Pryč s divy? Ne!

Přejít na HTML5 neznamená automaticky všechny značky <div> přepsat na <section>, popř. article/aside nebo i jiné značky. Každý nový HTML5 tag má svůj význam a tedy i podmínky, za kterých by se měl použít - a tedy i podmínky, kdy by se používat rozhodně neměl. Tak daleko tento článek ale nemířím.

Jak si můžete všimnout, rozhodně jsem neodstranil všechny divy. Celý tento web je v <div id="wrapper">, stejně tak je v obalovém divu i sidebar a obsah. A protože tyto obaly slouží pouze k usnadnění stylování, bylo by úplně špatně nahradit je třeba tagem <section>.

HTML5 ve starším Internet Exploreru? Žádný problém.

HTML5 je v IE oficiálně podporováno až od verze 9, ale díky javascriptu html5shiv není problém HTML5 web zobrazit v pořádku už od Internet Exploreru verze 6! Tedy žádné omezení oproti XHTML. To, že staré IE neumí CSS3, je problém jiný...

Závěrem

HTML5 je prima a nevidím důvod na něj nezačít pomalu přecházet. Podle obrázků výše si dokážete udělat představu o tom, co základní přechod na HTML5 obnáší. HTML5 není ani příliš složité, než jej ale používat špatně, lepší zůstat u starého XHTML.

A na závěr ještě přihodím pár hodnotných zdrojů, ze kterých jsem sám čerpal při učení se HTML5. Někoho možná nepotěší, že jsou kompletně v angličtině, ale opravdu stojí za to.

Jdete do HTML5 taky? Napište o tom komentář a podělte se s ostatními!

<< Back to the previous page


Comments.
LesFeen
0

Comprar Cialis Original En Madrid Buy Cialis Purchase Amoxicillin Online No Pre scrption <a href=http://cialibuy.com>Cialis</a> Baclofene Et Methadone

Published on 25.01.2020 08:27:39, from Kaohsiung County
Kelteashy
0

Generic Provera With Free Shipping Price Overseas Amex Accepted Lexington п»їcialis Priligy Precio 60 Mg <a href=http://buyciaonlinex.com>online cialis</a> Forum Cialis En France

Published on 28.01.2020 09:21:56, from Vila Franca de Xira
LesFeen
0

Quik Delivery Of Vermox Buy Cialis Levitra Originale Prezzo In Farmacia <a href=http://buyciallisonline.com/#>Buy Cialis</a> Buy Wellbutrin With No Pre scrption

Published on 06.02.2020 13:50:41, from Kaohsiung County
Stevrase
0

150mg Clomid Clomiphene Citrate Buy Cialis Cialis For Sale Canada <a href=http://buycialisuss.com>generic cialis canada</a> Buy Cheap Nexium Online

Published on 18.02.2020 13:33:09, from Avarua
LesFeen
0

Zithromax Online Uk Cialis Kamagra Legal <a href=http://buycialisuss.com>cialis 5 mg best price usa</a> Vardenafil Generique

Published on 28.02.2020 07:46:27, from Kaohsiung County
Stepdex
0

El Cialis Sirve Cialis Retin A Gel 0.1 Without Pre scrption <a href=http://apcialisle.com/#>Cialis</a> Propecia Catalunya

Published on 14.03.2020 05:13:07, from Duverge
Stepdex
0

Amoxicilina Antibiotic Cash Delivery Cialis Propecia Fertilita <a href=https://apcialisle.com/#>Cialis</a> Cephalexin For Dog No Pre scrptions

Published on 23.03.2020 11:09:57, from Duverge
LesFeen
0

Vendo Viagra Milano Cialis Venta Kamagra Farmacia <a href=https://apcialisle.com/#>cialis generic</a> 5mg Cialis Online Canada

Published on 27.03.2020 19:14:56, from Kaohsiung County
Janchelve
0

Viagra Generico Originale buy cheap cialis online Kamagra How To Use <a href=http://cialibuy.com/#>Cialis</a> Propecia Side Effects Months

Published on 30.03.2020 21:18:26, from Axum
spidly
0

Whether you are writing an essay or paper that is driving you crazy, are in need of any academic or professional writing, research or editing, is your answer!
<a href="http://watergraphs.com/write-my-paper-for-cheap/#">custom papers</a> Students who buy papers for college want the process to be as easy and as convenient as possible, and we aim to offer them that with our intuitive ordering process.

Published on 02.04.2020 17:09:59
Onedalf
0

You can work in the areas of basic research, development, application of new technologies as well as construction, commissioning and service. <a href="https://lachkraempfe.net/beruf-horoskop/">beruf horoskop</a> Turn your socks inside out, and pull them wholesale nfl jerseys up so that the cuff of the sock is over the rolled up cuff of the leggings. <a href="https://mytraderbook.com/wie-erobert-man-einen-fische-mann/">wie erobert man einen fische mann</a> When exposed to a changing climate, humans suddenly needed to protect themselves from the cold, wind and rain, prompting them to make use of animal furs. <a href="https://mytraderbook.com/sternzeichen-berechnen/">sternzeichen berechnen</a>

Published on 04.04.2020 20:45:44
AlevyRer
0

If you receive your item and need a new size, please contact me within 5 days of receiving your item for exchange instructions. <a href="https://formip.net/kartenlegen-min-gratisgesprch/">kartenlegen min gratisgespräch</a> The leaders of the church at the time strayed away from the truth based orientation of their believers. <a href="https://mytraderbook.com/wochenhoroskop-widder-nchste-woche/">wochenhoroskop widder nächste woche</a> P so far are not available in such a detailed form due to the considerably lower number of cases observed. <a href="https://formip.net/sternzeichen-stier-und-krebs/">sternzeichen stier und krebs</a>

Published on 05.04.2020 00:33:15
KNOPAME
0

Eladriel is a fantastic monster as he can be used from early if you are lucky to get him to end game. <a href="https://lachkraempfe.net/gratisgespraech-hellsehen/">gratisgespraech hellsehen</a> Essay about should college be free health is wealth essay in telugu, young goodman brown argumentative essay. <a href="https://collegereadingbootcamp.com/symbol-lwe/">symbol löwe</a> However, the application of clinical and imaging biomarkers is currently not able to allow individual characterization and prediction. <a href="https://formip.net/wassermann-und-wassermann-frau/">wassermann und wassermann frau</a>

Published on 05.04.2020 01:32:51
TrandMak
0

Lung function improvement and airways inflammation reduction in asthmatic children after a rehabilitation program at moderate altitude. <a href="https://collegereadingbootcamp.com/gttliche-geometrie/">göttliche geometrie</a> Copenhagen-inspired pattern featuring blue flowers and flourishes set onto a white ground with a dark, blue edge. <a href="https://cfsinlimites.com/lila-stein/">lila stein</a> To minimise social contacts will contribute significantly to a reduction of the infection rate and prevent overloading a health system. <a href="https://lachkraempfe.net/dia-dia/">dia dia</a>

Published on 05.04.2020 05:41:41
issuers
0

Kongo over a decade ago, bringing with them their entire culture as unique physical link of their country. <a href="https://cfsinlimites.com/astrologie-liebe/">astrologie liebe</a> If you gave us wrong shipping address and parcel will be returned to us, we send it again only after when you pay for the second delivery. <a href="https://cfsinlimites.com/jungfrau-monatshoroskop/">jungfrau monatshoroskop</a> Australia, thereare unique laws that utilize to vacation as opposed tohousehold rentals that want to be taken intoaccount. <a href="https://cmitmedia.com/entspannungstechniken/">entspannungstechniken</a>

Published on 05.04.2020 09:29:30
taigue
0

Then, if we are to accept such as being a fact or fiction, may truly dependupon what value to the human family knowledge concerning such a peopleswould be in the affairs of individuals today. <a href="https://cfsinlimites.com/horoskop-astroportal/">horoskop astroportal</a> Entscheidungen funktionieren, warum wir uns damit oft schwer tun und wie leicht wir uns manipulieren lassen. <a href="https://collegereadingbootcamp.com/krebsfrau-und-jungfraumann/">krebsfrau und jungfraumann</a> Our bistro is a great place for those in search of affordable prices, high quality dishes and friendly service. <a href="https://carrilloycarrilloabogados.com/tageshoroskop-stier-heute/">tageshoroskop stier heute</a>

Published on 05.04.2020 14:30:01
amizeve
0

T the measuring or recording device itself which collapses the wave-function but it is consciousness itself. <a href="https://cmitmedia.com/kontakt-mit-verstorbenen/">kontakt mit verstorbenen</a> Sub id tempus pestis vehementer ibi saeviens sustulit matrem, relicto filio, iam annum decimum tertium agente. <a href="https://lachkraempfe.net/lilith-symbol/">lilith symbol</a> This frees you from the costs and complexities of planning, purchasing, and maintaining hardware and transforms what are commonly large fixed costs into much smaller variable costs. <a href="https://collegereadingbootcamp.com/ergin/">ergin</a>

Published on 05.04.2020 18:26:40
Praceaws
0

What is more, we ensure to reward our dear customers with our special discounts that guarantee they pay less for a high school essay or a research paper in the future. <a href="https://dentalsell.com/write-my-paper-cheap.html">paper writer</a> Most of the income made by relationship corporations appear from on-line and cellular courting products and services deliver a large amount of resourceful services.

Published on 06.04.2020 05:11:28
Padyday
0

How to write an njhs essay great way to start essay, essay about the future of computer technology 5 paragraph essay formula write an essay on your matriculation day. <a href="https://dentalsell.com/write-my-paper-cheap.html">paper help</a> How to conclude an essay on communication citation source essay pages 3000 word essay double spaced how to write an better essay, short essay on my best day ever.

Published on 06.04.2020 09:04:09
Ingero
0

The healing of many physical diseases is contingent on the healing of the spiritual disease called sin. <a href="https://muahangtaigia.info">muahangtaigia</a> Khan educators to develop resources for differentiating instruction, engaging students, and driving both teacher and student ownership around learning and growth mindset.

Published on 07.04.2020 06:47:00
Sueple
0

<a href="https://leviolonrouge.com/category/politics/">politics news</a>

Published on 07.04.2020 09:01:20
Fausync
0

Aber ich denke mir es wird es nicht jucken was ich sage oder sie werden versuchen mein gesagtes anzufechten. <a href="https://frontechnigeria.com/by-fate/">by fate</a> One in which collaborative working between the regulator and industry, enabled by developing technologies, supports positive and innovative outcomes for patients. <a href="https://crmcontactform.com/aszendent-berechnen/">aszendent berechnen</a> The deteriorating human rights situation in the country has made it necessary for us to adapt our funding policy, focusing on civil society rather than governmental agencies. <a href="https://favoures.com/kostenlose-astrologie/">kostenlose astrologie</a>

Published on 07.04.2020 12:03:09
Claizele
0

Street expectations, above the 63percent beat rate since 1994 and roughly in line with the 66percent rate over the past four quarters. <a href="https://tgu-tommyguns.com">tgu tommyguns</a> For our programme, they constructed a machine that temporarily eliminates the prescribed sightline of the cinema auditorium.

Published on 07.04.2020 17:45:20
TriepsY
0

<a href="https://gendermyn.com/category/beauty-balance/">beauty & balance</a>

Published on 07.04.2020 17:48:23
rarlique
0

Sub scrption automatically renews unless auto-renew is turned off at least 24-hours before the end of the current period. <a href="https://thunkzine.com">thunkzine</a> Pobles siaguen reconeguts per fin depreservar lo prodigios potencial de creati-vitat que representan pel monde de de-man.

Published on 08.04.2020 03:43:12
Ovargy
0

<a href="https://lasixlineon.com/category/travel/">https://lasixlineon.com/category/travel/</a>

Published on 08.04.2020 07:55:35
Claizele
0

Wenn du dich mit dem, was du tust, identifizieren kannst, macht dich das zufriedener und erfolgreicher. <a href="https://thefereviewcourse.com">thefereviewcourse</a> The assumption is that each innovation was eagerly awaited, and was putto immediate use to improve communication.

Published on 08.04.2020 15:52:54
naislap
0

By the rules of the game inferior colors are not allowed to speak to or socialize with superior ones. <a href="https://thewriteacademy.org">the write academy</a> Tags of your pages, rather it tries to use the same spider technology as the search engine spiders themselves.

Published on 09.04.2020 16:05:16
aledits
0

At the first and every fifth film viewing, the customer receives a five-euro voucher by e-mail, which can be redeemed for the next visit to their favourite cinema. <a href="https://ketosuccessacademy.com/gnstige-wahrsager/">gГјnstige wahrsager</a> As device displays are very small in m-business, the quality of the information that is offered there must be of high importance. <a href="https://thunkzine.com/delphie/">delphie</a> K is an essential nutrient that plays a vital role in helping the blood clot 5, which affects the way the body bruises and bleeds. <a href="https://crmcontactform.com/blaue-farbe/">blaue farbe</a>

Published on 09.04.2020 20:54:08
Stepdex
0

Viagra Para Durar Toda Noche Cialis Prezzi Viagra <a href=http://cialibuy.com/#>Cialis</a> Who Has The Cheapest Cialis

Published on 09.04.2020 23:24:41, from Duverge
Stepdex
0

Prix De Levitra En Pharmacie buying cheap cialis online Cephalexin 500 Mgs Twice A Day <a href=http://cialibuy.com/#>Cialis</a> Vyvanse Online

Published on 10.04.2020 10:57:36, from Duverge
Stepdex
0

World Select Pharmacy buy cialis 10mg Buy Periactin Pills In Usa <a href=https://apcialisle.com/#>Cialis</a> Acquistare Levitra Da Scaricare

Published on 15.04.2020 00:46:53, from Duverge
Jerrywipsy
0

tomasjanecek.cz compra cialis italiacialis consumer reviews <a href="https://cialistld.com/">Health</a> cialis has stopped workingcialis originale spedizione italia <a href="https://cialistld.com/">Cialis</a> cheaper alternative to cialis

Published on 06.05.2020 08:47:35, from Maputo
Erygep
0

Hi! free cialis couponscialis grupo terapeutico <a href="https://cialisnw.com/">buy cialis online pay paypal</a> prijzen cialis 20mgcialis fa male <a href="https://cialisnw.com/">cialisnw.com</a>

Published on 15.05.2020 08:56:38, from Maputo
Erygep
0

Hi! quanto custa o comprimido cialiscialis lt <a href="https://cialisnw.com/">buy cialis online hong kong</a> ou trouver cialis a pariscialis 5 mg cmi <a href="https://cialisnw.com/">where to buy cialis 5mg</a>

Published on 22.05.2020 06:09:13, from Maputo
Write a comment
 If you cann't see the verification code clearly.
Type the characters into the text field below(*)
 
This website uses cookies for ads, just like any other website. Further information