HTML 5'te yazıları biçimlendirmek için bazı etiketler kullanılır. Bu etiketler yazının görünümünde değişikliğe yol açabileceği gibi sadece bilgi verme amaçlı da olabilir. Böyle durumlarda yazıda estetik olarak bir değişiklik olmasa da tarayıcıya ve arama motorlarına bilgi verilmiş olur. Böyle bir bilgi verilmek istenmezse bu tarz etiketler kullanılmayabilir.
<b>, <i>, <u>, <s> ve <small>
<b> etiketi arasına yazılan yazılar kalın, <i> etiketi arasına yazılan yazılar italik, <u> etiketi arasına yazılan yazılar altı çizgili, <s> etiketi arasına yazılan yazılar üstü çizili ve <small> etiketi arasına yazılan yazılar küçük olarak görüntülenir.
<!DOCTYPE html>
<html>
<body>
<p>Normal yazı örneği</p>
<p><b>Kalın yazı örneği</b></p>
<p><i>İtalik yazı örneği</i></p>
<p><u>Altı çizgili yazı örneği</u></p>
<p><s>Üstü çizili yazı örneği</s></p>
<p><small>Küçük yazı örneği</small></p>
</body>
</html>
<sub> ve <sup>
<sub> etiketi arasına yazılan yazılar indis, <sup> etiketi arasına yazılan yazılar üs olarak görüntülenir.
<!DOCTYPE html>
<html>
<body>
<p>AB</p>
<p>A<sub>B</sub></p>
<p>A<sup>B</sup></p>
</body>
</html>
<strong>, <em> ve <mark>
<strong> etiketi, arasına yazılan yazıların önemli olduğunu belirtir ve bu yazılar tarayıcılarca kalın olarak görüntülenir. <em> etiketi, arasına yazılan yazıların vurgulandığını belirtir ve bu yazılar tarayıcılarca italik olarak görüntülenir. <mark> etiketi, arasına yazılan yazıların vurgulandığını belirtir ve bu yazılar tarayıcılarca fosforlu olarak görüntülenir.
<!DOCTYPE html>
<html>
<body>
<p>Normal yazı örneği</p>
<p><strong>strong yazı örneği</strong></p>
<p><em>em yazı örneği</em></p>
<p><mark>mark yazı örneği</mark></p>
</body>
</html>
<var>, <kbd>, <code> ve <samp>
<var> etiketleri arasına matematiksel değişkenler yazılır. Klavye kısayolları yazılacağı zaman <kbd> etiketi kullanılır. Kod parçası görüntülenmek istendiğinde <code>, örnek bir kodun çıktısı görüntülenmek istendiğinde <samp> etiketi kullanılır.
<!DOCTYPE html>
<html>
<body>
<p><var>X</var>+<var>Y</var>=<var>Z</var></p>
<p><kbd>Ctrl+S</kbd> tuş kombinasyonu dokümanı kaydetmeye yarar.</p>
<p>C'de <code>printf("Hello World!");</code> satırının çıktısı şudur:</p>
<p><samp>Hello World!</samp></p>
</body>
</html>
<ins> ve <del>
Bir yazıya sonradan eklenen kısımlar <ins> etiketi içine yazılır. Bu yazılar tarayıcıların genelinde altı çizgili olarak görüntülenir. Bir yazıdan sonradan çıkartılan kısımlar ise <del> etiketi içine yazılır. Bu yazılar da tarayıcıların genelinde üstü çizili olarak görüntülenir.
Bu iki etiketle birlikte cite ve datetime nitelikleri kullanılabilir. cite niteliği cite="URL" şeklinde kullanılır ve değişikliğin sebebini gösteren linki bildirir. datetime niteliği ise datetime="YYYY-AA-GGThh:dd:ssZD" şeklinde kullanılır ve değişikliğin yapıldığı tarihi belirtir. Burada YYYY yılı, AA ayı, GG günü belirtir. Sonrasında gelen T harfi konması zorunlu olan bir ayraçtır ve tarih ile saati ayırır. Daha sonraki kısımda yer alan hh saati dd dakikayı ss saniyeyi belirtir. Sondaki ZD yerine ise zaman dilimini bildiren harf yazılır. Zaman dilimi harflerini ek bilgiler kısmından görebilirsiniz.
<!DOCTYPE html>
<html>
<body>
<p>Adaylardan beklenen nitelikler İngilizce <ins cite="http://www.google.com"> ve Almanca</ins> bilmeleri<del datetime="2014-06-15T13:00:00B">, 30 yaşını doldurmamış olmaları</del> ve seyahat engellerinin bulunmamasıdır.</p>
</body>
</html>
<abbr>, <cite>, <q> ve <blockquote>
<abbr> etiketi, içine yazılanların kısaltma olduğunu belirtir. Paylaşılan bir eserin ismi <cite> etiketleri arasına yazılır. Satırların içine konan alıntılar <q> etiketleri arasına yazılır. Tarayıcıların geneli bu yazıları tırnak içine alır. <blockquote> etiketleri arasına da alıntılar yazılır. Fakat bu alıntılar satır içinde değil altta blok olarak görüntülenir. <q> ve <blockquote> etiketleri ile birlikte cite niteliği kullanılabilir. Bu nitelik cite="URL" şeklinde kullanılır ve alıntının yapıldığı kaynağı belirtir.
<!DOCTYPE html>
<html>
<body>
<p><abbr>TBMM</abbr></p>
<p><cite>Sophie'nin Dünyası</cite>, Jostein Gaarder</p>
<p><q>Ön yargıları parçalamak atomu parçalamaktan daha zordur.</q> - Einstein</p>
<p><blockquote cite="http:www.google.com">Aslında hiçbir şey iyi ya da kötü değildir. Her şey bizim onlar hakkında ne düşündüğümüze bağlıdır. - Shakespeare</blockquote></p>
</body>
</html>
<address>
<adress> etiketleri arasına yazıyı yazanın iletişim bilgileri yazılır.
<!DOCTYPE html>
<html>
<body>
<p><adress>Gökhan Keskin<br>
Beşiktaş/İSTANBUL<br>
Tel: 00000000</address></p>
</body>
</html>
<dfn>
Bir terim tanımlanırken tanımlanan terim <dfn> etiketleri içine yazılır.
<!DOCTYPE html>
<html>
<body>
<p>Bir kesitten birim zamanda geçen elektriksel yük miktarına <dfn>akım</dfn> denir.</p>
</body>
</html>
<pre>
HTML'de yazılan yazıların arasındaki boşluk miktarının önemi yoktur. Herhangi bir yerde birden fazla boşluk varsa bu tek boşluk olacak şekle dönüştürülerek görüntülenir. Alt satıra geçmede de aynı dönüşüm uygulanır. Alt satıra geçmeler tarayıcı tarafından yok sayılırç <pre> etiketleri arasına yazılan yazılarda ise yazının biçimi aynen korunur. Bu etiketler arasına yazılan yazı tarayıcıların geneli tarafından Courier yazı tipinde gösterilir.
<!DOCTYPE html>
<html>
<body>
<pre>Bu yazının
biçimi aynen korunacaktır.
</pre>
</body>
</html>
<bdo> ve <bdi>
<bdo> etiketi mevcut yazı yönünü değiştirmeye yarar ve dir niteliği ile birlikte kullanılmalıdır. dir niteliği iki değer alabilir. Bunlar ltr ve rtl'dir. Arapça, Farsça ve İbranice gibi sağdan sola yazılan bir dil kullanılıyorsa soldan sağa yazmak için ltr değeri kullanılmalıdır. Türkçe'nin de dahil olduğu soldan sağa yazılan bir dil kullanılıyorsa sağdan sola yazmak için rtl değeri kullanılmalıdır.
<!DOCTYPE html>
<html>
<body>
<p>Bu satır soldan sağa görüntülenecektir.</p>
<p><bdo dir="rtl">Bu satır sağdan sola görüntülenecektir.</p>
</body>
</html>
<bdi> etiketi belli bir metni yön bakımından diğer yazılanlardan izole etmeye yarar. Bu sayede ayrılan kısmın yazının diğer kısmının yönünü etkilemesi engellenmiş olur. Bu etiket tüm tarayıcılarda desteklenmemektedir. Şu an için bu etiketi destekleyen tarayıcılar Google Chrome ve Mozilla Firefox'tur.
<!DOCTYPE html>
<html>
<body>
<p><bdi>İstanbul</bdi>:14.200.000</p>
<p><bdi>London</bdi>: 8.300.000</p>
<p><bdi>تهران</bdi>: 7.800.000</p>
</body>
</html>
Yukarıdaki örnekte İstanbul, Londra ve Tahran'ın nüfusları verilmiştir. <bdi> etiketinin kullanılmaması durumunda yukarıdaki Farsça ifade sağa, nüfus bilgisi sola geçecektir. Yukarıdaki kodu önce Google Chrome ya da Mozilla Firefox daha sonra da <bdi> etiketini desteklemeyen Internet Explorer ile çalıştırarak farkı görebilirsiniz. Bu etiket özellikle bilginin başka bir yerden alınacağı, örneğin kullanıcı tarafından girileceği durumlarda yararlıdır.
<time>
Bir yazının saat belirten kısımları <time> etiketi içerisine alınabilir. Bunun görsel hiçbir etkisi yoktur. Ayrıca yazının bir kısmı <time> elemanının içerisine alınıp datetime niteliği ile bu kısımla ilgili bir zaman bilgisi verilebilir.
datetime niteliğine girilebilecek değerler iki farklı formatta olabilir. Bunlardan ilki yukarıda da gösterilen YYYY-AA-GGThh:dd:ssZD şeklidir. Fakat kısımların tamamının doldurulması zorunlu değildir.
Girilebilecek diğer değer şekli belirli bir süre boyunca manasına gelir ve PT##D##H##M##S formatındadır. Burada # işaretli yerlere sayı girilir. PT boyunca manasını içerir. diğer harflerin manaları ise sırasıyla gün, saat, dakika ve saniyedir. Yine bu formattaki kullanımda da her alan dolu olmak zorunda değildir.
<!DOCTYPE html>
<html>
<body>
<p>Festival bugün <time>08.30</time>'da başlayacaktır. Festival esnasında <time datetime="2014-11-01">dans gösterisi</time> de yapılacaktır. Festivaldeki son etkinlikler <time datetime="PT2D">spor müsabakaları</time> olacaktır.</p>
</body>
</html>
<wbr>
<wbr> elemanı tek etiketle kullanılan bir elemandır. Konulduğu yerde alt satıra geçilebileceğini belirtir. Eğer tarayıcının yazınızı uygun olmayan yerlerde bölerek alt satıra geçeceğini düşünürseniz uygun gördüğünüz yerlere bu etiketi koyarak tarayıcıya alt satıra geçebileceği bir yer önerisinde bulunabilirsiniz.
<!DOCTYPE html>
<html>
<body>
<p>Türkçe'deki en ilginç kelimelerden birisi uzunluğu ile dikkat çeken<wbr> Afyonkarahisarlılaştıramadıklarımızdan mısınız kelimesidir.</p>
</body>
</html>
Bu eleman Internet Explorer tarafından desteklenmemektedir. Elemanın nasıl çalıştığını görmek isterseniz diğer tarayıcılardan biriyle yukarıdaki kodu çalıştırıp pencereye gitgide küçültmeyi deneyebilirsiniz. Bunu yaparken satırın nereden bölüneceğini görebilirsiniz.
<ruby>, <rt> ve <rp>
Bu üç eleman Uzakdoğu dillerindeki yazıların üzerine okunuşu ile ilgili bilgi veren yazılar ekleme amacıyla kullanılır.
<ruby> elemanlarının arasına Uzakdoğu dilinde yazılacak olan yazı yazılır. Yazılan yazıdan sonra <rt> elemanları arasına yazılan yazının okunuşuyla ilgili bilgi yazılır. Bu yazı orijinal yazının üzerinde küçük olarak gösterilir. <rt> elemanının önüne ve arkasına <rp> elemanları içerisinde parantezler konur. Bu sayede <ruby> elemanını desteklemeyen tarayıcılarda okunuş bilgisi parantezler arasına yazılır. <ruby> elemanı yazının yazıldığı an itibarı ile Mozilla Firefox tarafından desteklenmemektedir.
<!DOCTYPE html>
<html>
<body>
<ruby>
冒顿单于<rp>(</rp><rt>Mòdú Chányú</rt><rp>)</rp>
</ruby>
</body>
</html>
Başlık ve Paragraflar <<<<< HTML5 >>>>> Linkler