Tag terkait teks

Artikel ini menjelaskan tentang tag terkait teks.

Penjelasan ini dibagi menjadi tag semantik dan non-semantik.

YouTube Video

Membuat CSS untuk pratinjau

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Tag dasar terkait teks

Tag <div>

1<div>This is a division of content.</div>

• Tag <div> adalah elemen tingkat blok yang digunakan untuk membuat divisi dalam HTML.

• Tag <div> adalah tag non-semantik.

  Saat memfokuskan pada HTML semantik, tag bermakna (seperti <section>, <article>) dapat digunakan. Ini membantu mesin pencari dan pembaca layar lebih memahami konten halaman.

• Dengan menggabungkannya dengan CSS dan JavaScript, Anda dapat mengendalikan tampilan dan perilaku halaman.

  Tag <div> digunakan untuk mengelompokkan konten pada halaman sebagai elemen tingkat blok. Ini terutama digunakan dalam kombinasi dengan CSS dan JavaScript untuk menyesuaikan tata letak halaman, gaya, dan memanipulasi elemen.

Tag <p>

1<p>This is a paragraph of text.</p>

• Tag <p> adalah elemen yang digunakan untuk mendefinisikan sebuah paragraf dalam HTML. Tag <p> mewakili sebuah paragraf dan terutama digunakan untuk mengelompokkan dan menampilkan teks. Ini membantu membuat konten lebih mudah dibaca dengan memisahkan bagian teks secara visual.
• Anda tidak dapat menempatkan elemen tingkat blok lain seperti tag <p> lain atau tag <div> di dalam tag <p>. Ini dilarang oleh spesifikasi HTML. Jika Anda melakukannya, browser akan secara otomatis menutup tag dan tidak akan ditampilkan dengan benar.

Tag <a>

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• Tag <a> digunakan untuk membuat tautan.

  Tag <a> digunakan untuk membuat tautan ke halaman lain, situs eksternal, atau file. Atribut href digunakan untuk menentukan tujuan tautan.

• Ini dapat digunakan untuk tautan teks atau gambar, dan menggunakan target="_blank" akan membuka tautan di tab baru.

• Atribut target digunakan untuk menentukan bagaimana tujuan tautan akan ditampilkan.

  • _self (default): Membuka tautan di jendela atau tab saat ini.
  • _blank: Membuka tautan di jendela atau tab baru.
  • _parent: Membuka tautan di bingkai induk.
  • _top: Membuka tautan di jendela penuh, mengabaikan semua bingkai.

• Atribut title digunakan untuk menampilkan tooltip pada tautan. Saat pengguna mengarahkan kursor ke tautan, judul yang ditentukan akan ditampilkan.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• Tag <a> juga digunakan untuk melompat ke lokasi tertentu di halaman yang sama. Untuk mencapai ini, Anda mengatur atribut id pada elemen target dan menggunakan id ini dalam atribut href tautan.

<span> tag

1Here is some <span style="color: red;">highlighted text

• Tag <span> adalah elemen inline.

  Tag <span> adalah elemen sebaris, jadi tidak memutus baris saat digunakan di antara teks, tautan, gambar, atau elemen sebaris lainnya. Tag ini menyatu secara alami dengan alur halaman.

• Anda dapat menerapkan gaya tertentu secara parsial.

  Ketika Anda ingin menerapkan gaya hanya pada bagian dari dokumen, Anda dapat menggunakan tag <span> untuk menugaskan kelas CSS atau ID dan menerapkan gaya pada rentang tertentu.

• Tag <span> adalah elemen non-semantik.

  Karena tag <span> tidak memiliki makna khusus atau peran struktural, tag ini digunakan murni untuk tujuan penataan atau skrip. Ketika penekanan semantik diperlukan, lebih tepat menggunakan tag semantik seperti <strong> atau <em>, yang akan diperkenalkan nanti.

<br> tag

1Here is some text with a <br> line break.

• Tag <br> adalah elemen inline.

  Karena tag <br> adalah elemen sebaris, tag ini tidak memenuhi seluruh blok, dan membuat pemutusan garis dalam teks di tempat tag tersebut ditempatkan. Sementara tag <p> menambahkan margin di atas dan di bawah untuk memisahkan paragraf, tag <br> membuat pemutusan garis tanpa menambahkan margin.

• Ini adalah tag yang menutup sendiri, jadi tag penutup (</br>) tidak diperlukan.

• Sebaiknya hindari penggunaan berlebihan, dan gunakan tag <p> atau CSS untuk pemutusan paragraf atau penyesuaian tata letak.

  Saat mengatur teks dalam paragraf, lebih tepat menggunakan tag <p>. Juga dianjurkan untuk menggunakan CSS untuk penyesuaian tata letak. Misalnya, dengan menggunakan properti white-space dalam CSS kita dapat menampilkan pemutusan garis dan spasi dalam teks sebagaimana adanya.

<hr> tag

1This is some text.<hr>This is another section of text.

• Tag <hr> adalah elemen tingkat blok.

  Tag <hr> digunakan untuk memasukkan garis horizontal untuk membedakan bagian-bagian konten secara visual. Tag ini juga dapat digunakan untuk menandakan pemutusan tematik, memberikan makna berdasarkan konteks.

• Tag ini menutup sendiri, jadi tag penutup (</hr>) tidak diperlukan.

• Anda dapat mengubah warna, panjang, dan ketebalannya dengan menggunakan CSS.

Tag terkait teks semantik

Dari tag <h1> hingga <h6>

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• Tag <h1> hingga <h6> adalah tag judul yang digunakan dalam HTML.

  Tag <h1> mewakili judul yang paling penting dan biasanya digunakan sebagai judul utama dari seluruh halaman. Umumnya digunakan hanya satu tag <h1> per dokumen HTML.

  Tag <h2> adalah heading paling penting berikutnya setelah <h1> dan digunakan untuk judul bagian atau bab dalam halaman.

  Tag <h3> mewakili subjudul atau bagian yang lebih kecil di bawah <h2>.

  Tag <h4>, <h5>, dan <h6> mewakili judul tingkat yang lebih rendah, digunakan untuk bagian yang lebih detail atau judul bagian.

• Tag heading menunjukkan pentingnya teks dan membantu membuat struktur logis dari sebuah halaman. Mesin pencari juga menggunakan tag heading untuk memahami konten halaman.

Tag <strong>

1<strong>Important text</strong> to emphasize significance.

• Tag <strong> adalah tag HTML yang digunakan untuk menunjukkan pentingnya atau penekanan teks dan biasanya ditampilkan dalam huruf tebal.

• Tag <strong> adalah tag semantik, dan tujuan utamanya adalah untuk menambah arti.

  Ini dapat menunjukkan bahwa teks tersebut penting dalam konteksnya. Sebagai contoh, ini dapat menunjukkan pentingnya teks bagi mesin pencari, sehingga berguna untuk SEO. Ini juga menyampaikan pentingnya teks kepada pengguna dengan pembaca layar. Di sisi lain, tag <b> yang akan diperkenalkan nanti, hanyalah tag untuk membuat teks tebal dan tidak memberikan penekanan semantik.

Tag <em>

1<em>Emphasized text</em> for italics and emphasis.

• Tag <em> adalah tag HTML yang digunakan untuk menunjukkan pentingnya atau penekanan dalam teks dan biasanya ditampilkan dalam huruf miring.

• Tag <em> adalah tag semantik, dan tujuan utamanya adalah untuk memberikan arti.

  Seperti tag <strong>, ini dapat menunjukkan bahwa teks penting dalam konteksnya. Tag <strong> biasanya ditampilkan dalam huruf tebal, sementara tag <em> biasanya ditampilkan dalam huruf miring. Keduanya dikenali oleh pembaca layar dan mesin pencari untuk penekanan semantik, tetapi <strong> menunjukkan pentingnya yang lebih kuat, sementara <em> menyampaikan penekanan emosional. Selain itu, tag <i> yang akan diperkenalkan nanti, hanya memiringkan teks dan tidak memberikan penekanan semantik.

Tag <mark>

1<mark>Highlighted text</mark> for attention.

• Tag <mark> digunakan untuk menunjukkan bahwa teks tertentu penting dalam konteksnya. Ini berguna untuk menyoroti hasil pencarian atau poin penting.
• Secara default, teks yang dikelilingi oleh tag <mark> ditampilkan dengan latar belakang kuning, secara visual menekankan kepentingannya.

Tag <del>

1<del>Deleted text</del> shows removed content.

• Tag <del> digunakan untuk menunjukkan bahwa teks telah dihapus atau dimodifikasi. Tag ini berguna untuk menunjukkan riwayat perubahan atau revisi pada teks.

• Teks yang dimasukkan dalam tag <del> biasanya ditampilkan dengan garis tengah. Ini secara visual menunjukkan konten yang dihapus.

  Teks yang dimasukkan dalam tag <del> juga dikenali sebagai yang dihapus oleh pembaca layar. Ini memungkinkan konten yang tidak terlihat secara visual untuk tetap dipahami.

Tag <ins>

1<ins>Inserted text</ins> shows added content.

• Tag <ins> digunakan untuk menunjukkan teks yang baru ditambahkan atau dimodifikasi dalam sebuah dokumen. Tag ini berguna untuk menunjukkan riwayat penambahan atau revisi teks.

• Dalam browser, teks yang terbungkus oleh tag <ins> biasanya ditampilkan dengan garis bawah. Ini secara visual menunjukkan konten yang ditambahkan.

  Teks yang terbungkus oleh tag <ins> juga dikenali sebagai teks baru oleh pembaca layar. Ini memungkinkan konten yang tidak terlihat secara visual untuk tetap dipahami.

Tag <abbr>

1<abbr title="World Health Organization">WHO</abbr>

• Tag <abbr> adalah elemen inline yang digunakan untuk menunjukkan singkatan atau akronim. Menggunakan tag ini memberikan makna penuh dari singkatan dan berkontribusi untuk meningkatkan SEO dan aksesibilitas. Ini terutama membantu pembaca yang tidak familiar dengan singkatan dan pengguna pembaca layar untuk lebih memahami kontennya.

Tag Terkait Dekorasi Teks

Tag <b>

1<b>Bold text</b> without semantic emphasis.

• Tag <b> adalah elemen inline yang digunakan untuk menebalkan teks. Seperti tag lainnya yang akan kami perkenalkan, tag ini digunakan untuk penekanan visual tetapi tidak untuk penekanan semantik.

<i> tag

1<i>Italic text</i> for style.

• Tag <i> adalah elemen inline yang digunakan untuk memiringkan teks.

<u> tag

1<u>Underlined text</u> for decoration.

• Tag <u> adalah elemen inline yang digunakan untuk menggarisbawahi teks.

<small> tag

1<small>This is small text.</small>

• <small> tag adalah elemen inline yang digunakan untuk menampilkan teks dalam ukuran yang lebih kecil. Ini biasanya digunakan untuk mewakili informasi tambahan atau anotasi yang sekunder terhadap konten utama.

<s> tag

1<s>Strikethrough text</s>

• Tag <s> adalah elemen inline yang digunakan untuk membuat garis coret pada teks.

<sub> tag

1H<sub>2</sub>O

• <sub> tag adalah elemen inline yang digunakan untuk menampilkan teks subscript.

<sup> tag

1E = mc<sup>2</sup>

• <sup> tag adalah elemen inline yang digunakan untuk menampilkan teks superscript.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video