HTML5 egyszerű szöveg (meg)jelölések
Szintén ötletként kaptam, hogy a szöveg jelölésekkel egy kicsit részletesebben foglalkozzunk. Ezért úgy gondoltam, hogy főként az újításokra nézünk egy-két példát, valamint a szöveg kiemelésre.
Nézzük mi az amit a szövegekhez kapcsolódóan jó, ha tudunk. Kezdjük talán az alapokkal. A szövegeinket, jó ha bekezdésekbe szedjük, melyre a <p> elem szolgál. Régen volt egy align nevezetű attribútuma, de már a HTML4-ben is elavultnak számított így a HTML5 már nem támogatja.
Használata nagyon egyszerű:
<p>Ez egy új bekezdés</p>
A következő a <q> elem, mely rövid idézetek beillesztésére szolgál, a böngészők egy része idézőjelek között jeleníti meg ezzel a tag-al ellátott szövegeinket. Egyetlen attribútuma a cite, melynek segítségével megjelölhetjük a forrást, ahonnan idézünk. Használható erre a célra még a <blockquote> elem is, mellyel hosszabb idézetek jeleníthetőek meg, de én a <q> elem használatát javaslom, mert jelenleg a böngészők össze-vissza indítanak ez utóbbi esetében új bekezdéseket. A használata 100%-ig megegyezik a <q> elemével. Használata:
<q cite="http://www.magyarorszag.hu/">https://html5.ugyesen.com/ HTML5 webportál</q>
A <br> elemet használhatjuk sortörésre. Általában szimpla elemként használjuk, lássuk erre egy példát:
<br /> ez egy sortörés.
A <h1> <h2>…<h6> elemek segítségével a szövegeinket címezhetjük meg, csökkenő sorrendben, tehát a <h1> a legnagyobb, míg a <h6> a legkisebb cím szöveg.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 text tutorial</title> </head> <body> <h1>1. cím</h1> <h2>2. cím</h2> <h3>3. cím</h3> <h4>4. cím</h4> <h5>5. cím</h5> <h6>6. cím</h6> </body> </html>
Nézzük mivel emelhetjük ki a már beírt szövegeinket, talán kezdjük a sort a <mark> (marked text) elemmel. Ez, a szöveg kiemelésre remekül használható kis eszköz, eddig a HTML4-ben nem volt megtalálható. Gyakorlatilag a szöveg egy részének kiemelésére szolgál, de remek kis eszköz a relevancia kiemelésére is. Használata meglepően egyszerű, gyakorlatilag a két tag közé kell beírnunk a szöveget, amit ki szeretnénk emelni. Pl.: <mark> teszt </mark>
Nézzünk rá egy életszerű példát:
<!DOCTYPE html> <html> <head> <meta content="hu" http-equiv="Content-Language"> <meta charset=utf-8 /> <title>Marked text</title> </head> <body> <p>A <mark>html5</mark>.ugyesen.com egy a <mark>HTML5</mark> nyelvet bemutató oldal.</p> </body> </html>
Mint ahogy a példánkban is látható, kiválóan alkalmas arra, hogy egy adott cikkben, vagy bármilyen munkánkban megjelöljünk vele releváns szövegrészeket.
A következőkben nézzük meg, a már ismerősnek számító <ins> és <del> elemeket. Ezek párban használhatóak.Először <del> majd a kicserélendő szöveg, aztán az <ins> amivel az újat beszúrjuk.
Attribútumai:
– cite – melynek értéke egy URL ami hivatkozik a törlés vagy a beszúrás okára.
– datetime (éééé/hh/nn) – a törlés vagy a beszúrás pontos dátumát jelöli.
Nézzünk rá egy egyszerű példát, ahol a törlésnél meghivatkozzuk a törlés okát, a beszúrásnál pedig beillesztjük az aktuális dátumot.
<!DOCTYPE html> <html> <head> <meta content="hu" http-equiv="Content-Language"> <meta charset=utf-8 /> <title>ins del</title> </head> <body> <p>A html5.ugyesen.com egy a <del cite="https://html5.ugyesen.com/teszt.html">HTML4</del> <ins datetime="2012-03-30 00:00Z">HTML5</ins> nyelvet bemutató oldal.</p> </body> </html>
Nézzük mi az amit még a szövegekhez kapcsolódóan jó, ha tudunk.
Forrás:
http://www.w3.org/TR/html5/the-ins-element.html#the-ins-element
http://www.w3.org/TR/html5/the-del-element.html#the-del-element

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.