HTML5 egyszerű szöveg (meg)jelölések

by Szabó Viktor · Published 2012/03/30 · Updated 2016/10/22

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/">http://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>

Itt megtekinthető.

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>

A példa itt megtekinthető.

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="http://html5.ugyesen.com/teszt.html">HTML4</del> <ins datetime="2012-03-30 00:00Z">HTML5</ins> nyelvet bemutató oldal.</p>

</body>
</html>

A példa itt elérhető.

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