Typography Format Text Pada HTML

Typography adalah format teks yang ada pada html, yang umumnya didesain menggunakan css yang akan kita bahas pada artikel lainnya, format teks umumnya ada pada Office Word/Writer namun juga tersedia pada html untuk mengatur teks baik dari segi penebalan atau pemiringan atau yang lainnya, kita akan membahas satu persatu kegunaan dari tag-tag ini yang ditulis kedalam tag body sehingga bisa ditampilkan pada browser bentuknya.

Heading

Heading adalah tag yang dibuat untuk judul yang tampil pada browser baik pada judul web atau judul artikel untuk tag heading terdiri dari h1, h2, h3, h4, h5, h6, mulai dari h1 yang terbesar sampai dengan h6 yang terkecil, untuk dokumen html (heading.html) yang menjelaskan tentang heading seperti dibawah ini yang harus ditulis kedalam <body> … </body> yang telah saya jelaskan pada artikel sebelumnya yaitu Belajar HTML Paling Dasar.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

</body>
</html>

Paragraf

Pada tag pembuatan paragraf cuma terdiri dari tag p, span, div atau istilah dari tag paragraf bisa dibilang sebagai tag body artikel tag p merupakan tag paragraf, span suma seleksi text sedangkan tag div itu tag element yang umum digunakan pada bagian lainnya, sebagai contoh dibawah ini (paragraf.html).

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<div>
    <p>... ini tag paragraf ...</p>
    <span>... ini tag penanda ...</span>
</div>

</body>
</html>

Element

Element yang saya maksud ini adalah tag bagian atau side yang merupakan tag komponen seperti tag header, footer, nav, article, main, content, section, div dan aside yang memiliki fungsi yang sama namun nama yang berbeda serta lebih ditekankan pada penggunaan css dan untuk membuat filenya (element.html) seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<div class="container">
   <header> .... </header>
   <nav> .... </nav>
   <main>
      <section>
         <article> .... </article>
         <article> .... </article>
         <article> .... </article>
      </section>
      <section>
         <aside> .... </aside>
         <aside> .... </aside>
         <aside> .... </aside>
      </section>
   </main>
   <footer> .... </footer>
</div>

</body>
</html>

Inline Text

Inline text adalah text yang ada dalam paragraf atau body artikel yang biasa digunakan pada text editor yang terdiri dari b, i, u, s, strong, em, mark, del, ins, small, sub, sup, br dan abbr, untuk penebalan teks menggunakan tag b dan strong, untuk pemiringan teks menggunakan i dan em, untuk garis bawah teks menggunakan u, ins dan abbr, untuk garis tengah teks menggunakan tag del dan s, untuk menandakan teks menggunakan mark dan span, untuk mengecilkan teks menggunakan small untuk membuat teks diatas dan dibawah menggunakan sup dan sub, untuk baris baru adalah tag br. Untuk lebih jelas buat file inlinetext.html dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<b> .... format teks ... </b><strong> .... format teks ... </strong><br/>
<i> .... format teks ... </i><em> .... format teks ... </em><br/>
<u> .... format teks ... </u><ins> .... format teks ... </ins><br/>
<s> .... format teks ... </s><del> .... format teks ... </del><br/>
<mark> .... format teks ... </mark><span> .... format teks ... </span><br/>
<small> .... format teks ... </small><abbr> .... format teks ... </abbr><br/>

</body>
</html>

Block Text

Block teks terdiri dari quote seperti blockquote, q, pre, code, address, cite, bdo, kbd, var dan samp, untuk pre dan code adalah tag yang digunakan untuk menampilkan kode program atau sintaks ke artikel dengan cara diblock kusus untuk kode sedangkan selain pre dan code adalah block teks biasa yang sering digunakan untuk menandakan suatu teks yang terpenting, untuk cara penulisannya adalah seperti dibawah ini dan disimpan kedalam blocktext.html.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<blockquote cite="http://www.contoh.xyz"> ... teks panjang ... <blockquote>
<abbr title="Organisasi"> ... teks singkat ... </abbr>
<address> ... teks alamat ... </address>
<cite>... judul orang dalam teks ...</cite>
<bdo dir="rtl">... teks dari kanan ke kiri seperti huruf arab ...</bdo>
<kbd><kbd>Shift</kbd> Ctrl <kbd> + </kbd></kbd>
<var>i</var> = <var>z</var><var>x</var> + <var>y</var>
<samp> ... hasil ... <samp>

</body>
</html>