Tag berkaitan teks

Artikel ini menjelaskan mengenai tag berkaitan teks.

Penjelasan dibahagikan kepada tag semantik dan bukan semantik.

YouTube Video

Membuat CSS untuk pratonton

  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 asas berkaitan teks

Tag <div>

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

• Tag <div> adalah elemen peringkat blok yang digunakan untuk membuat pembahagian dalam HTML.

• Tag <div> adalah tag non-semantik.

  Apabila memberikan tumpuan kepada HTML semantik, tag yang bermakna (seperti <section>, <article>) boleh digunakan. Ini membantu enjin carian dan pembaca skrin lebih memahami kandungan halaman.

• Dengan menggabungkannya dengan CSS dan JavaScript, anda boleh mengawal penampilan dan tingkah laku halaman.

  Tag <div> digunakan untuk mengumpulkan kandungan pada halaman sebagai elemen tahap blok. Ia biasanya digunakan bersama dengan CSS dan JavaScript untuk menyesuaikan susun atur halaman, gaya, dan mengendalikan elemen.

Tag <p>

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

• Tag <p> adalah elemen yang digunakan untuk mendefinisikan perenggan dalam HTML. Tag <p> mewakili perenggan dan digunakan terutamanya untuk mengumpulkan dan memaparkan teks. Ia membantu menjadikan kandungan lebih mudah dibaca dengan memisahkan bahagian teks secara visual.
• Anda tidak boleh meletakkan elemen-elemen tahap blok yang lain seperti tag <p> lain atau tag <div> di dalam tag <p>. Ini dilarang oleh spesifikasi HTML. Jika anda melakukannya, pelayar akan secara automatik menutup tag tersebut, dan ia tidak akan dipaparkan dengan betul.

Tag <a>

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

• Tag <a> digunakan untuk membuat pautan.

  Tag <a> digunakan untuk membuat pautan ke halaman lain, laman web luaran, atau fail. Atribut href digunakan untuk menentukan destinasi pautan.

• Ia boleh digunakan untuk pautan teks atau imej, dan menggunakan target="_blank" akan membuka pautan dalam tab baru.

• Atribut target digunakan untuk menetapkan bagaimana destinasi pautan akan dipaparkan.

  • _self (lalai): Membuka pautan dalam tetingkap atau tab semasa.
  • _blank: Membuka pautan dalam tetingkap atau tab baharu.
  • _parent: Membuka pautan dalam bingkai induk.
  • _top: Membuka pautan dalam tetingkap penuh, mengabaikan sebarang bingkai.

• Atribut title digunakan untuk memaparkan tooltip pada pautan. Apabila pengguna mengarahkan kursor ke pautan, tajuk yang ditentukan akan dipaparkan.

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 dalam halaman yang sama. Untuk mencapai ini, anda menetapkan atribut id pada elemen sasaran dan menggunakan id ini dalam atribut href pautan tersebut.

<span> tag

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

• Tag <span> adalah elemen dalam talian.

  <span> ialah elemen sebaris, jadi ia tidak memecahkan baris apabila digunakan di antara teks, pautan, imej, atau elemen sebaris lain. Ia sesuai secara semulajadi dalam aliran halaman.

• Anda boleh menggunakan gaya tertentu secara sebahagian.

  Apabila anda ingin menerapkan gaya hanya kepada sebahagian daripada dokumen, anda boleh menggunakan tag <span> untuk menetapkan kelas atau ID CSS dan menerapkan gaya kepada julat tertentu.

• Tag <span> adalah elemen yang tidak mempunyai makna semantik.

  Oleh kerana tag <span> tidak mempunyai makna khusus atau peranan struktur, ia digunakan semata-mata untuk tujuan penggayaan atau skrip. Apabila penekanan semantik diperlukan, adalah lebih sesuai untuk menggunakan tag semantik seperti <strong> atau <em>, yang akan diperkenalkan kemudian.

<br> tag

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

• Tag <br> adalah elemen dalam talian.

  Oleh kerana tag <br> adalah elemen sebaris, ia tidak menguasai keseluruhan blok, dan ia mencipta pemecahan baris dalam teks di mana ia diletakkan. Walaupun tag <p> menambah margin di atas dan di bawah untuk mengasingkan perenggan, tag <br> mencipta pemecahan baris tanpa menambah sebarang margin.

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

• Adalah lebih baik untuk mengelakkan penggunaan yang berlebihan, dan gunakan tag <p> atau CSS untuk pemecahan perenggan atau penyelarasan tata letak.

  Apabila mengatur teks ke dalam perenggan, adalah lebih sesuai untuk menggunakan tag <p>. Adalah juga disyorkan untuk menggunakan CSS untuk penyelarasan tata letak. Sebagai contoh, menggunakan sifat white-space dalam CSS boleh memaparkan pemecahan baris dan ruang dalam teks seperti yang muncul.

<hr> tag

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

• Tag <hr> adalah elemen tahap blok.

  Tag <hr> digunakan untuk memasukkan garis mendatar untuk memisahkan bahagian kandungan secara visual. Ia juga boleh digunakan untuk menandakan pemecahan tematik, memberi makna kepadanya berdasarkan konteks.

• Ia adalah tag berdikari, jadi tag penutup (</hr>) tidak diperlukan.

• Anda boleh menyesuaikan warna, panjang, dan ketebalannya menggunakan CSS.

Tag berkaitan teks semantik

Dari tag <h1> hingga tag <h6>

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

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

  Tag <h1> mewakili tajuk yang paling penting dan biasanya digunakan sebagai tajuk utama keseluruhan halaman. Adalah biasa untuk menggunakan hanya satu tag <h1> bagi setiap dokumen HTML.

  Tag <h2> adalah tajuk paling penting seterusnya selepas <h1> dan digunakan untuk tajuk bahagian atau bab dalam laman.

  Tag <h3> mewakili subtajuk atau bahagian yang lebih kecil di bawah <h2>.

  Tag <h4>, <h5>, dan <h6> mewakili tajuk tahap rendah, digunakan untuk item yang lebih terperinci atau tajuk bahagian.

• Tag tajuk menunjukkan kepentingan teks dan membantu mewujudkan struktur logik halaman. Enjin carian juga menggunakan tag tajuk untuk memahami kandungan halaman.

Tag <strong>

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

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

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

  Ia boleh menunjukkan bahawa teks tersebut adalah penting dari segi konteks. Sebagai contoh, ia boleh menunjukkan kepentingan teks kepada enjin carian, menjadikannya berguna untuk SEO. Ia juga menyampaikan kepentingan teks kepada pengguna dengan pembaca skrin. Sebaliknya, tag <b>, yang akan diperkenalkan kemudian, hanyalah tag untuk menjadikan 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 kepentingan atau penekanan dalam teks dan biasanya dipaparkan dalam huruf condong.

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

  Seperti tag <strong>, ia boleh menunjukkan bahawa teks adalah penting dari segi konteks. Tag <strong> biasanya dipaparkan dalam huruf tebal, manakala tag <em> biasanya dipaparkan dalam huruf condong. Kedua-duanya diiktiraf oleh pembaca skrin dan enjin carian untuk penekanan semantik, tetapi <strong> menunjukkan kepentingan yang lebih kuat, manakala <em> menyampaikan penekanan emosi. Selain itu, tag <i>, yang akan diperkenalkan kemudian, hanya mencetak condongkan teks dan tidak memberikan penekanan semantik.

Tag <mark>

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

• Tag <mark> digunakan untuk menunjukkan bahawa teks tertentu adalah penting dari segi konteks. Ia berguna untuk menyerlahkan hasil carian atau perkara penting.
• Secara lalai, teks yang dilampirkan dalam tag <mark> dipaparkan dengan latar belakang kuning, menekankan kepentingannya secara visual.

Tag <del>

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

• Tag <del> digunakan untuk menunjukkan bahawa teks telah dipadam atau diubah suai. Tag ini berguna untuk menunjukkan sejarah perubahan atau semakan terhadap teks.

• Teks yang dilampirkan dalam tag <del> biasanya dipaparkan dengan garis rentas. Ini secara visual menunjukkan kandungan yang dipadam.

  Teks yang dilampirkan dalam tag <del> juga diiktiraf sebagai dipadam oleh pembaca skrin. Ini membenarkan kandungan yang tidak kelihatan secara visual untuk tetap difahami.

Tag <ins>

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

• Tag <ins> digunakan untuk menunjukkan teks yang baru ditambah atau diubah dalam dokumen. Tag ini berguna untuk menunjukkan sejarah penambahan atau penyemakan teks.

• Dalam pelayar, teks yang disertakan dalam tag <ins> biasanya dipaparkan dengan garis bawah. Ini menunjukkan kandungan yang ditambah secara visual.

  Teks yang disertakan dalam tag <ins> juga dikenali sebagai baru ditambah oleh pembaca skrin. Ini membenarkan kandungan yang tidak kelihatan secara visual untuk tetap difahami.

Tag <abbr>

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

• Tag <abbr> adalah elemen sebaris yang digunakan untuk menunjukkan singkatan atau akronim. Menggunakan tag ini menyediakan maksud penuh singkatan dan menyumbang kepada penambahbaikan SEO dan aksesibiliti. Ia terutamanya membantu pembaca yang tidak biasa dengan singkatan dan pengguna pembaca skrin untuk lebih memahami kandungannya.

Tag yang berkaitan dengan hiasan teks

Tag <b>

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

• Tag <b> adalah elemen sebaris yang digunakan untuk menebalkan teks. Seperti tag lain yang akan kami perkenalkan, ia digunakan untuk penekanan visual tetapi bukan untuk penekanan semantik.

Tag <i>

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

• Tag <i> adalah elemen sebaris yang digunakan untuk menjadikan teks dalam bentuk italik.

Tag <u>

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

• Tag <u> adalah elemen sebaris yang digunakan untuk membuat garis bawah pada teks.

Tag <small>

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

• Tag <small> ialah elemen sebaris yang digunakan untuk memaparkan teks dalam saiz yang lebih kecil. Ia biasanya digunakan untuk mewakili maklumat tambahan atau anotasi yang sekunder berbanding kandungan utama.

Tag <s>

1<s>Strikethrough text</s>

• Tag <s> adalah elemen sebaris yang digunakan untuk membuat garis batal pada teks.

Tag <sub>

1H<sub>2</sub>O

• Tag <sub> ialah elemen sebaris yang digunakan untuk memaparkan teks subskrip.

Tag <sup>

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

• Tag <sup> ialah elemen sebaris yang digunakan untuk memaparkan teks superskrip.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video