Egyes szavak vagy teljes szakaszok könnyedén kiemelhetők dőlt és félkövér formázással. Először is a félkövér formázási lehetőséghez. Ehhez általában két HTML elem, a b és a strong áll rendelkezésre.
Üdvözöljük a <b>PSD-Tutorials.de</b> oldalon! <br /> Üdvözöljük a <strong>PSD-Tutorials.de</strong> oldalon!
A böngészőben az alábbi kép jelenik meg:
Világosan látható, hogy mindkét elem azonos megjelenést eredményez. Miért vannak akkor mégis két különböző elem? Valójában az internetes oldalakon más megjelenési formák is léteznek, mint a megszokott standard böngészőké. Például gondoljunk a vakemberek olvasóira vagy az okostelefonokra. Az általuk kínált HTML elemek segítségével a W3C az elemek szemantikai értelmezést kívánja segíteni. Például, a b elem már nem azt jelenti, hogy vastagon jelenjen meg valami. Inkább egy láthatóan kiemelt szöveget jelöl, melynek nincs kiemelt fontossága. Ilyen például a terméknév vagy kulcsszavak a dokumentumokban.
A strong elem eddig egy erőteljesebb hangsúlyozást jelentett. Míg az em hangsúlyos, fontos szöveget jelzett. Az em előzőleg az em erősített változata volt az HTML korábbi verzióiban. Mindkét elemnek az HTML5-ben más jelentést tulajdonítanak.
Először itt egy normál hangsúlyozással rendelkező szöveg.
<p> A macskák aranyos állatok. </p>
Most ugyanez a szöveg, azonban most a hangsúly a szöveg első szavára van helyezve.
<p> <em>Macskák</em> aranyos állatok. </p>
Az em használatával a hangsúlyt a Macskák szóra helyezzük. Elképzelhető ez egy olyan vitában, ahol arról folyik a vita, hogy a kutyák vagy macskák édesebbek-e.
Képzeljük el, hogy ebben a példában az em elemet ráhelyezzük a sind szóra.
<p> Macskák <em> sind </em> aranyos állatok. </p>
Ez lehetne egy válasz vitahelyzetben, amikor valaki azt állítja, hogy a macskák egyáltalán nem aranyosak.
Valójában az em-el jelzett részek dőlten jelennek meg a böngészőben. Ugyanezt az optikai hatást érhetjük el az i elemmel is.
A HTML5 tervezet szerint az i elem most már nem félkövér.
<p> Szívélyes üdvözlet a <i>PSD-Tutorials.de</i> </p>
Ezzel az elemmel mostantól inkább egy másik hangulatot kívánunk közvetíteni. Például érdekes lehet az i elem technikai kifejezése vagy taxonómiai megnevezései számára.
Ez mind szörnyen elméleti, tudom. Általában azt kellene megpróbálnod, hogy ragaszkodj az HTML5 irányelveihez. Másrészről persze senki sem fogja leharapni a fejed, ha a b helyett a strong-ot használod.
<p> <em>Sor em</em><br /> <i>Sor i</i><br /> <strong>Sor strong</strong><br /> <b>Sor b</b> </p>
Végül is a böngészőgyártóknak kell eljárniuk.
A fent említett elemek formázásáért végül is a CSS felelős.
Akrónimák az abbr elemmel
Az akrónimák kiemeléséhez ugyanarra az elemre van szükség, amely az rövidebbítésekhez is használták eddig, méghozzá az abbr elemre.
A World Wide Web Consortium (Világháló Konszorcium) <abbr title="World Wide Web Consortium">W3C</abbr> 2009 áprilisától a Fachhochschule Potsdamon található.
A böngészők, amelyek helyesen értelmezik az abbr elemet, az elem belsejébeni szöveget aláhúzottként jelenítik meg.
Továbbá az abbr elemhez érdemes hozzárendelni egy title attribútumot. Általában az attribútumban az akrónimához tartozó teljes kifejezést írjuk fel. Ha az egér hozzáér az akrónimához, akkor egy felugró ablakban megjelenik a kifejezés.
Címadatok az address elemmel
A address-elem segítségével lehet címinformációkat megjelölni.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
A böngészők általában dőlt betűvel jelenítik meg az address-elem tartalmát.
Programkódot az code-elemmel megjelölni
A code-elemet programkód jelölésére használják. Ebben az értelemben az előző HTML verziókhoz képest semmi sem változott. A code továbbra is ugyanarra a célra szolgál.
<pre>
Ez egy HTML fejrészlet:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Általában a code elemet kombinálják a pre-elemmel, így a programkódban használt behúzásokat megőrizhetik.
A HTML5 specifikációja javasolja a class-attribútum használatát a code-elemmel kapcsolatban. Ezen attribútumnak a code-elemben használt nyelvet lehet hozzárendelni. Néhány tipikus példa, hogyan lehetnek ezek a jelölések:
<pre>
Ez egy HTML fejrészlet:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Jelenleg a class-attribútumnak semmi látható hatása nincs a böngészőben. Azonban az emberi nézők így láthatják, hogy a programkód milyen nyelven van írva, ha megnézik az oldal forráskódját.
Kisbetűsítés az small-elemmel
A small-elem eredetileg arra szolgált, hogy a szöveget normálnál kisebb méretben jelenítse meg. Az HTML5-ben a small kifejezetten a kisebb méretű szövegekhez használatos. Ezek a kisebb szövegrészek lehetnek például:
• Szerzői jogi információk
• Felelősségmentesítő nyilatkozatok
• Licencfeltételek
• Általános Szerződési Feltételek (ÁSZF)
A W3C kifejezetten arra figyelmeztet, hogy a small-t nem szabad hosszú szövegrészletekre használni.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Szöveg aláhúzása
A u-elem segítségével lehet szavakat aláhúzva megjeleníteni. Itt egy példa:
<p>Willkommen bei <u>PSD-Tutorials.de</u></p>
Az eredmény a böngészőben így jelenik meg:
Ha megtekintjük az eredményt, valóban a kívánt hatás érvényesül. Azonban van egy szöcske. Az interneten az aláhúzott szövegek általában hiperhivatkozásokat jelentenek. Ha most egy szót vagy szöveget aláhúzva jelenítünk meg, a látogatók valószínűleg azt gondolják, hogy hiperhivatkozásról van szó. Az ilyen hivatkozásra kattintás sikertelen lesz. Tehát érdemes eltekinteni az aláhúzástól.
