Sémantika (X)HTML dokumentu I.

Sémantika. Zvláštní slovo. Otevřu-li slovník cizích slov na tomto hesle, dozvím se, cituji: „Sémantika je nauka o významu jazykových jednotek.“

To platí i pro (X)HTML dokument. Jak dobře víte, v (X)HTML dokumentu se jednotlivé jazykové jednotky nazývají tagy. Každý tag má svůj specifický význam, například <a> označuje odkaz nebo <img> říká, že obsahem je obrázek. V těchto případech těžko nahradit konkrétní tag nějakým jiným, z hlediska funkčnosti jsou unikátní. Jiná situace nastává při podání textové informace.

Zajímavý dotaz k tématu padl na diskusi Jak psát webu. Uživatel PerToon se tam zajímá o to, zdali lidé při tvorbě stránek používají tag <p>, nebo jej suplují neutrálními tagy <div> či <span>. Dovolím si situaci rozebrat zde.

Podívám-li se na zdrojový kód svých stránek ve svém oblíbeném editoru, vidím jej asi tak, jak jej vnímají prohlížeče. Všímám si a orientuji se podle jednotlivých tagů, text vnímám v jejich kontextu. Podívám-li se na stejnou stránku v internetovém prohlížeči, vidím ji tak, kterak ji vidí uživatel. Logicky je mým cílem, aby stránce a jejím jednotlivým prvkům rozuměl jak stroj (např. vyhledávač), tak člověk. Splnění druhé podmínky je v ideálních podmínkách snadné, kaskádové styly (CSS) mi dovolují s jednotlivými elementy takové eskapády, že i při použití neutrálních tagů bude dokument vypadat významově správně. Nicméně stroj nezajímá, jak si vzhled prvků předefinujete, stroj se snaží zjistit, co jednotlivé prvky znamenají. Dobrým příkladem mohou být nadpisy. Je veliký rozdíl mezi nadpisem nejvyšší úrovně (<h1>) a adekvátně naformátovaným neutrálním tagem (<div>). Ačkoliv člověk může vidět v obou případech to samé, stroj bude v prvním případě vidět důležitý nadpis a ve druhém pouze řadový text. Toto má značný vliv například na optimalizaci pro vyhledávače (SEO).

Vrátím se k původnímu příkladu. Používat pro text tag <p>? Jedná-li se o text odstavcový, tak nepochybně. K čemu jinému by takový tag jinak byl? Sémantická pravidla jsou právě o tomhle, vyjádřit značkami opravdový význam jednotlivých prvků dokumentu. Přesto někteří kodéři mnohé značky ignorují. Proč? Někteří si myslí, že sémantika není podstatná. Někteří o sémantice nikdy neslyšeli. U některých se jedná pouze o špatný návyk a konečně někteří ani neznají určité specifické tagy. Jak často se například setkávám s vyjádřením nadpisu pouze tagem <strong> (hůře pak <b>) namísto tagu pro nadpis (<h1> – <h6>).

Je to také sémantika, která je jednom z hlavních důvodů proti tabulkovým layoutům. Tabulka má ze sémantického hlediska obsahovat tabulková data, nikoliv sloužit k rozvrstvení jednotlivých částí dokumentu.

Můj názor je takový, že nikdy není na škodu vštěpit si základní pravidla sémantiky (X)HTML dokumentu. S přibývajícími zkušenostmi si tu a tam třebas vědomě dovolíte tato pravidla porušit za určitým specifickým cílem (například kvůli správným uvozovkám v citacích, kdy je porušení pravidel sémantiky jediným jednoduchým řešením pro všechny používané prohlížeče), nicméně si pamatujte, že sémanticky správně provedený web je čitelný pro všechny. Chcete-li se alespoň trochu vžít do plechu chladného stroje, vypněte si v prohlížeči styly (CSS) a prohlédněte si stránky v jejich syrové podobě. V takových případech oceníte, pakliže jsou seznamy opravdu seznamy, tučné písmo opravdu tučné písmo a nejsou-li nadpisy ničím jiným než nadpisy.

Příště vám něco povím o málo známých (X)HTML značkách a jejich sémantickém významu.

3. 11. 2005, 1.10 | (X)HTML, CSS, Použitelnost, přístupnost, SEO.


50 komentářů k “Sémantika (X)HTML dokumentu I.”

  1. dgx říká:

    2. Pěkně vysvětleno.

    Stejně si dovolím jednu kacířskou otázku :-) Proč je <b> hůře než <strong> ?

    3. 11. 2005 v 2.24

  2. Dero říká:

    3. Na hranici s Tebou, Davide, a díky za návštěvu. :o)

    <strong> versus <b> je ošemetné téma. Pakliže je nadpis suplován jedním z těchto tagů, tak si myslím, že <strong> je nepochybně lepší.

    Uvedu pro to dva důvody:

    1. tag <strong> znamená silné zvýraznění slova – má sémantický význam takový, že označuje důležitý termín, kdežto tag <b> pouze mění vykreslení, slouží k formátování textu
    2. nikdo to neví jistě, ale je možné, že i některé vyhledávače chápou slovo zvýrazněné tagem <strong> jako důležité, kdežto slovo zvýrazněné boldem pouze jako jinak naformátované
    3. 11. 2005 v 17.58

  3. Timy říká:

    4. Na téma <b> vs. <strong> doporučuji tuto diskusi: http://diskuse.jakpsatweb.cz/index.php?…

    Jinak s článkem souhlasím, jen bych ještě dodal, že správná sémantika je důležitá především kvůli přístupnosti, to slovo mi nějak v článku chybělo ;-)

    3. 11. 2005 v 19.28

  4. Timy říká:

    5. imho bys měl vypnout formátování podle html…

    jinak tam tedy mělo být „Na téma b vs. strong doporučuji…“

    3. 11. 2005 v 19.30

  5. dENIS říká:

    6. Mám dotaz: Jak se v ie dělá toto: vypněte si v prohlížeči styly (CSS)?

    3. 11. 2005 v 21.49

  6. pjotr říká:

    7. Pekne a pútavo napísané, len čo je pravda. Myslím, že v XHTML 1.1 značky <b> už nie sú povolené, pretože na to slúži CSS.

    3. 11. 2005 v 22.15

  7. phonik říká:

    8. 2denis: napriklad faveletem, do url dej nasledujici kod: javascript:var i=0; if(document.styleSheets.length>0) {cs = !document.styleSheets[0].disabled; for ( i=0; i< document.styleSheets.length; i++) document.styleSheets[i].disabled=cs; }; void(cs = true);

    7. 11. 2005 v 10.24

  8. Derův zápisník » Archív » Typografická fičůrka říká:

    9. […] e to pravé ořechové. Druhé řešení, neuzavírat první odstavec tagem <p>, je sémanticky chybné. Je jen na vás, jestli tuto cenu za výsledný efekt zaplatíte. Třetí řešení, řešení […]

    7. 11. 2005 v 18.01

  9. dENIS říká:

    10. 2phonik: pěkně děkuju:)))

    7. 11. 2005 v 19.48

  10. Chamurappi říká:

    11. "Toto má značný vliv například na optimalizaci pro vyhledávače (SEO)." "Nikoliv.":?/…/C12.cs.aspx

    "tag <strong> znamená silné zvýraznění slova – má sémantický význam takový, že označuje důležitý termín, kdežto tag <b> pouze mění vykreslení" Ne. Element <b> se používá také k vyjádření důrazu. Motivace webmastera je jednoznačná.

    Reaguji na Pjotra: "Myslím, že v XHTML 1.1 značky <b> už nie sú povolené" Jsou.

    10. 11. 2005 v 14.08

  11. Chamurappi říká:

    12. Sakra. Já si na to Texy! asi nikdy nezvyknu :-)

    10. 11. 2005 v 14.09

  12. pjotr říká:

    13. Áno, Chamurappi, mýlil som sa.. značka <b> je normálne použiteľná, ale aj tak bola kedysi určená na formátovanie vzhľadu dokumentu pomocou HTML a to nebolo príliš správne. Tak isto, ako značka <font> alebo <i> alebo <u>.

    24. 12. 2005 v 12.28

  13. Duk říká:

    14. Zajímavé

    18. 11. 2006 v 18.28

  14. psenik říká:

    15. Je to jednoduché. dnešní normy upouštějí od a soustřeďují se na .. pokud si na SEO zvaliduješ stránku obsahující a web s tagem SEO validátor napíše že sstránka s obsahuje nesémantické tagy.

    17. 4. 2008 v 14.25

  15. cheap products říká:

    16. fdsaf china wholesale distributor We sell bulk wholesale

    14. 11. 2009 v 4.49

  16. wow gold říká:

    17. Wow gold Buy wow gold Cheap wow gold Links of London Links of London charms Tiffany Tiffany jeweler Louis Vinton

    5. 1. 2010 v 6.59

  17. replica gucci handbags říká:

    18. fake louis vuitton handbagsdasfsf

    1. 3. 2010 v 7.57

  18. fsfe říká:

    19. fdfzumba dvd wholesalef wholesale bootsfd wholesale nflf

    1. 3. 2010 v 10.13

  19. Wangshanghai říká:

    20. 网上购物 牛尔 薇姿 To recommend

    10. 3. 2010 v 9.17

  20. hh123686 říká:

    21. sssdsdsdChristian Louboutin Shoes Christian Louboutin Shoes gggghg dfdfddfdChristian Louboutin Shoes discount Christian Louboutin Shoes discountgghghg

    31. 3. 2010 v 7.44

  21. lady bags říká:

    22. good news handbags lady bags golf bags

    9. 4. 2010 v 4.50

  22. replica watches říká:

    23. replica watches
    Rolex Milgauss watches<BR

    26. 4. 2010 v 6.26

  23. solarwaterheater říká:

    24. Solar water heater or solar hot water is water heated by the use of solar energy. Solar heating systems are generally composed of solar thermal collectors, a water storage tank or another point of usage, interconnecting pipes and a fluid system to move the heat from the collector to the tank.

    5. 5. 2010 v 4.14

  24. jersey říká:

    25. Sémantika (X)HTML dokumentu I. Mám díru v hlavě ve stylu Canady.

    10. 5. 2010 v 3.06

  25. ASDA říká:

    26. hello

    10. 6. 2010 v 7.13

  26. Replica Handbags říká:

    27. sfa df design handbags. and other as Replica Louis Vuitton Handbags

    13. 6. 2010 v 17.56

  27. dsfds říká:

    28. cheap christian louboutin

    30. 6. 2010 v 10.08

  28. johnsupra shoes říká:

    29. Tom Penny and Antwian Dixon. Apart from a large fan base compromising skateboarders, supra vaider high tophas also aught the attention of the music industries big names such as Jay-Z, Justin Timberlake and Lil Wayne. supra vaider black high boots, it is the main creative recreation sneakers teal we push in our online shop these days.

    1. 7. 2010 v 2.25

  29. johnhand říká:

    30. Check out our new models, you can have your own Timberland boots mailed right to your door a few seconds from now. What are you waiting for? timberland boots uk. timberland boots were created closely and carefully designed to provide its wearer with comfort and protection necessary for outdoor activities.they continuetimberland Shoes to adjust how and with what materials boots are made.

    1. 7. 2010 v 2.25

  30. Express Life říká:

    31. I had some similar question last year. In doing my occurrence, the most effective solutions are patient and confident. Be realistic bravely, and you will be alright now.Cafe Wine Shaker Dropship Affiliate

    1. 7. 2010 v 6.21

  31. sdfsd říká:

    32. gucci bags sells Designer Handbags and has a pretty good selection. I have not seen the quality of the merchandise myself but I know that they are legit.dfgfd

    12. 7. 2010 v 11.00

  32. rolex replicas sale říká:

    33. Check out our new models, you can have your own Timberland boots mailed right to your door a

    19. 7. 2010 v 7.51

  33. Gucci Outlet říká:

    34. Thank you very much.gucci bags sale gucci gucci handbags cheap gucci bags http://www.guccis.net

    21. 7. 2010 v 4.11

  34. lv-sales říká:

    35. We are louis bag wallet all familiar with the abuses of technology.louis handbags Many people blame technology itself for widespread pollution, resource depletion and even social decay in general--so much so that the promise of technology is obscured.louis handbags multicolore LV and the louis bag is very cheap.

    24. 7. 2010 v 3.33

  35. hollister uk říká:

    36. hollister ukgsg

    26. 7. 2010 v 10.34

  36. UGG Classic Tall Boots říká:

    37. [url=http://www.uggboots5815.com]UGG Classic Tall Boots,UGG Boots5815[/url] [url=http://www.uggboots5815.com]UGG Boots Classic Tall,UGG Boots5815[/url]

    27. 7. 2010 v 10.02

  37. Baby Carriers říká:

    38. hot sell baby carriers

    28. 7. 2010 v 3.24

  38. balecnciaga handbags říká:

    39. Beautify your personal style with balenciaga bags .b2chandbag designer handbag shop offer high quality Balenciaga bags.Shop popular brands and stores to find top quality of balenciaga handbags for discerning ladies.welcome to enjoy balenciaga handbags sale.cheap and balenciaga handbags

    28. 7. 2010 v 7.36

  39. UGG Classic Tall Boots říká:

    40. http://uggboots5815.com http://uggboots5815.com http://uggboots5815.com

    29. 7. 2010 v 8.54

  40. abercrombie říká:

    41. [url=http://www.abercrombiemilano.com] abercrombie and fitch [/url]

    30. 7. 2010 v 15.15

  41. abercrombie říká:

    42. It's always nice when you can not only be informed, but also engaged! abercrombie fitch

    30. 7. 2010 v 15.31

  42. tiffany uk říká:

    43. I have to admit to a raisedtiffany uk eyebrow with this as wells guudoenxko sdofuismx

    2. 8. 2010 v 10.22

  43. oil paintings říká:

    44. Many thanks for creating the effort to talk about this, I feel strongly about this and enjoy learning a great deal more on this matter. If feasible, as you gain knowledge, would you mind updating your weblog with a great deal more info? It's extremely useful for me. oil paintings discount paintings

    6. 8. 2010 v 3.04

  44. Wholesale accessories říká:

    45. Oh,good,This way you have one for fine details,Wholesale Accessories and another for larger fill areas,China Wholesale so you don't have to start and stop in the middle.tattoo machine More than two allows you to switch from one color to another fluidly.

    10. 8. 2010 v 7.41

  45. womens ugg boots říká:

    46. Not even as I shook womens ugg boots and trembled uncontrollably in the trenches, did I forget your ugg boots face. I would sit huddled into the wet mud, terrified, as the ugg australia hails of bullets and mortars crashed down around me. WYQ

    16. 8. 2010 v 1.39

  46. Wholesale Accessories říká:

    47. so you don'tYamaha YZFR 1 have to start and stop in the Honda CBR600Fmiddle.More than two allows you to switch from one colorSuzuki GSX 600/750 R to another fluidly.

    24. 8. 2010 v 8.03

  47. louis vuitton wallet říká:

    48. Louis Vuitton Saumur Online buy Louis Vuitton Outlet at wholesale price from lv handbags online store, 24/7 live service, Free Shipping and accept PayPal.

    1. 9. 2010 v 6.44

  48. boots říká:

    49. I ran across search engines and find this blog that fulfill my needs. There is a thing I do not agree ugg cardy boots but It doesn't matter since I think it does not hurt the whole content.ugg boots Watchesdesigning, bailey button ugg bootsbusinesses associated with tattoo Swiss Watchesdesigning,

    6. 9. 2010 v 9.47

  49. UGG Boots říká:

    50. so you don'tugg 5825 have to start and stop UGG Classic Shortin the middle.More than two allows you toUGG Boots Classic Tall 5815 switch from one color to another fluidly.

    7. 9. 2010 v 8.37

  50. NFL Jersey říká:

    51. Nice post.Thank you for taking the time to publish this information very useful! I’m still waiting for some interesting thoughts from your side in your next post thanks

    8. 9. 2010 v 7.56

Zanechte komentář





Můžete použít Texy! formátování.
Pokud se obsah boxů níže mění, zatímco píšete, potom žádné číslice nevyplňujte. V takovém případě antispam funguje, pouze se prohlížeči nepovedlo skrýt tento box.