Jelölőelemek gyűjteménye
Logikai vagy vizuális jelölőcimkét alkalmazzunk.
A Világháló nem pusztán vizuális megjelenésre alkalmas.
Az Internetet, Világhálót felkereső személyek 10-15%-a rosszul látó, ezen személyek nem vizuális úton érik el az ottani információkat, hanem hangos képernyőfelolvasókkal.
A hangos képernyőfelolvasók a logikai elemeket más hangszínnel olvassák föl, mint a dokumentumunk többi részét.
Ez a lényege annak, hogy mi a különbség a logikai jelölőelemek, és a fizikai, azaz vizuális jelölőelemek között.
Röviden összefoglalva:
Logikai címkével jelölt szöveg, a hangos képernyő-felolvasók más hangon olvassák fel, mint a normál szöveget.
Fizikális, azaz vizuális címkével jelölt szöveg, pusztán díszítési szempontból szükséges, de nem hordoz semmilyen logikai mellékjelentést, és nem hoz létre erős kihangsúlyozást.
Fizikai, azaz vizuális elemek
| <b> </b> | Félkövér. Példa: <b>Szöveg</b> = Szöveg |
| <i> </i> | Dőlt. Példa: <i>Szöveg</i> = Szöveg |
| <tt> </tt> | Írógépbetűknek megfelelő szöveg írása. <tt>Írógépbetűknek megfelelő szöveg írása.</tt> |
| <u> </u> | Aláhúzás. Példa: <u>Szöveg</u> = Szöveg |
| <big> </big> | Nagyít. Példa: A - <big>A</big> = A |
| <small> </small> | Kicsinyít. Példa: A - <small>A</small> = A |
| <sub> </sub> | Alsó index. Példa: H<sub>2</sub>O = H2O |
| <sup> </sup> | Felső index. Példa: m<sup>2</sup> = m2 |
Logikai elemek
| <em> </em> | Kihangsúlyozott dőlt. Példa: <em>Szöveg</em> = Szöveg |
| <strong> </strong> | Kihangsúlyozott félkövér. Példa: <strong>Szöveg</strong> = Szöveg |
| <cite> </cite> | Referencia anyagból történő idézethez, és címhivatkozáshoz. Példa: <cite>Hivatkozási szöveg</cite> = Hivatkozási szöveg |
| <code> </code> | Egy darab számítógépes kód, megjelenítése. <code> Egy darab számítógépes kód.</code> |
| <dfn> </dfn> | A kifejezés elsődleges vagy meghatározó példánya HTML A szabványos jelölőnyelv, a weboldalak létrehozásához. |
| <samp> </samp> |
<samp>Minta kimenet, számítógépes programból</samp> |
| <kbd> </kbd> | Billentyűzetről beviendő utasítások megadása. <kbd>Billentyűzet bemenet, input</kbd> |
| <var> </var> | Váltó érték. <var>Variable, változó</var> |
| <q> </q> | Idézőjel. Példa: <q>Szöveg</q> = Szöveg |
| <abbr title=".."> </abbr> | Rövidítést aláhúzza, ha az egér fölötte, megjelenik a title szöveg. Példa: <p>A <abbr title="Egészségügyi Világszervezet"> WHO </abbr> 1948-ban alakult.</p> A WHO 1948-ban alakult. |
| <acronym> </acronym> | Mozaikszó. Példa: Megkaphatom ASAP? Megjegyzés:Az akronim elem, nem támogatott a HTML5-ben. |
A pre elemet néha hosszú kódblokkok weblapon való megjelenítésére is használják
A pre blokkszintű jelölőelem, míg a kbd, a tt és a code szövegközi jelölőelem.
Blokk, azaz tömbszíntű elemek
| <pre> </pre> | Paragrafus elrendezés. Megjegyzi, és figyelembe veszi a szóköz billentyű használatát és a returnt, azaz új sor következik utasításokat. Egyszerű, azaz primitív táblázatokat is készíthetünk. |
| <blockquote></blockquote> | Idézetblokk, kiemelt bekezdésekhez. Idézet szövege beljebb van, mint a normál szöveg. Példa: <p>Idézet szövege.</p> <blockquote>Aki nem lép egyszerre<br />Nem kap rétest estére.</blockquote> Idézet szövege. Aki nem lép egyszerre |
| <address> </address> | Külső címek, hivatkozások, kiemelése. Példa: <address> Dokumentumot írta: Zöld Elefánt<br /> Elérhetőség: <a href="mailto:Valaki@example.com">Valaki@example.com</a> <address> Eredmény: Dokumentumot írta: Zöld Elefánt Elérhetőség: Valaki@example.com |
| <ins> </ins> | Beágyazott szöveget, aláhúzza, ha az egér fölötte, megjelenik a title szöveg. Példa: <ins title="2015-04-22-től">piros</ins> = piros Az <ins> együtt a <del> elemmel, jelölje meg a dokumentum frissítéseit és módosításait. Példa: <p>Kedvenc színe a <del>kék</del> <ins title="2015-04-22-től">piros</ins>!</p> Eredmény: Kedvenc színe a (Megadja a beillesztett / módosított dátumot és időt) datetime="YYYY-MM-DDThh:mm:ssTZD"> Megadhatunk egy URL-t is, egy dokumentumhoz, mely megmagyarázza a szöveg beillesztésének / módosításának okait Példa: Fontos, az <ins datetime="2014 - 04 - 05T09:00:00-05 : 00" title="A bizottság szavazása után megváltozott"> Igazgatóságnak</ins> <del>Az elnök hivatalának</del> lehetősége legyen, hogy ügyét a részvényesek felé terjessze. Eredmény: Fontos, az Igazgatóságnak hogy ügyét a részvényesek felé terjessze. Példa URL megadásával: Fontos, az <ins datetime="2014 - 04 - 05T09:00:00-05 : 00" title="A bizottság szavazása után megváltozott. Részletekhez, kattints ide!"> <a href="#Blokkelemek">Igazgatóságnak</a></ins> <del> Az elnök hivatalának</del> lehetősége legyen, hogy ügyét a részvényesek felé terjessze. Eredmény: Fontos, az Igazgatóságnak hogy ügyét a részvényesek felé terjessze. |
| <del> </del> | Áthúzza a szöveget. Példa: <del>Szöveg</del> = |