Pengenalan kepada Elemen HTML

Dalam pelajaran ini, kita akan meneroka teg HTML yang berbeza, tujuannya dan cara menggunakannya dengan berkesan dalam aplikasi web anda. Kami akan membincangkan beberapa teg HTML yang paling biasa digunakan dan atributnya yang sepadan.

Tag perenggan

Perenggan itu mungkin elemen HTML yang paling biasa digunakan, yang ditakrifkan oleh

. Ia ialah elemen peringkat blok, bermakna setiap perenggan akan bermula pada baris baharu.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

Tanpa

elemen, penyemak imbas anda secara automatik akan mengabaikan ruang putih tambahan dan memaparkan teks dalam satu baris.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

Lawati Demo Kod ↗

Anda perlu menggunakan
elemen jika anda mahu pemisah baris di dalam elemen perenggan tunggal. Ini adalah salah satu elemen HTML yang tidak memerlukan teg penutup.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

Lawati Demo Kod ↗

Tag tajuk

Apabila menulis artikel, adalah baik untuk menambah tajuk antara perenggan untuk menjadikan artikel itu lebih teratur. Dokumen HTML berfungsi dengan cara yang sama. HTML menawarkan enam tahap tajuk yang berbeza daripada

kepada

.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Lawati Demo Kod ↗

Dalam kebanyakan kes,

kepada

hendaklah mencukupi semasa membuat halaman web dan secara amnya, kami mengesyorkan agar tidak menggunakan tajuk yang terlalu kecil, seperti

dan

, kerana ia akan menjadikan struktur halaman web anda tidak perlu rumit.

ialah tajuk teratas, dan ia memainkan peranan khas dalam halaman web. Hanya ada satu

elemen dalam setiap dokumen HTML, dan ia harus meringkaskan keseluruhan halaman.

Elemen pemformatan

Kadangkala, anda mungkin ingin menekankan perkataan dan perenggan tertentu dengan memberikannya format yang berbeza, seperti menjadikannya kelihatan tebal, condong atau bergaris bawah. HTML menyediakan elemen pemformatan yang boleh membantu mencapai kesan ini.

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

Lawati Demo Kod ↗

• dan unsur mempunyai kesan yang sama. Mereka berdua membuat teks yang disertakan kelihatan tebal.

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

Walaupun mereka mempunyai rupa yang sama, seperti yang ditunjukkan dalam tunjuk cara CodePen, ia mempunyai tujuan yang berbeza untuk penyemak imbas dan enjin carian.

hanya menjadikan teks tebal tanpa menambah sebarang makna tertentu, manakala menunjukkan teks yang disertakan mempunyai kepentingan yang besar.

• dan unsur adalah serupa. Mereka berdua menukar teks ke dalam bentuk condong. tidak menunjukkan sebarang makna istimewa, manakala mentakrifkan teks yang ditekankan, dipaparkan dalam bentuk condong.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

• elemen mentakrifkan teks yang diserlahkan/ditanda.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

• Yang elemen mentakrifkan teks kecil.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

• elemen menunjukkan teks yang dipadam, dipaparkan dengan menambahkan coretan merentas teks yang dilampirkan. Sebaliknya, elemen digunakan untuk menunjukkan teks yang disisipkan, yang dipaparkan sebagai teks bergaris.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

• _{dan ^{elemen mentakrifkan subskrip dan superskrip masing-masing.}}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

Bagaimana untuk menambah gaya pada elemen HTML

Kadangkala, perwakilan lalai bagi elemen pemformatan ini tidak mencukupi untuk menyatakan maksud yang dimaksudkan.

Sebagai contoh, elemen menunjukkan teks yang dipadam dengan coretan, yang mudah difahami. Walau bagaimanapun, elemen menggunakan garis bawah untuk mewakili sisipan, yang boleh menjadi sangat mengelirukan.

Untuk menambah baik penampilan lalai elemen ini, anda boleh menggunakan atribut gaya seperti ini:

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

Secara lalai, pautan akan digariskan dan dipaparkan dalam warna biru, dan apabila anda mengklik padanya, anda akan dibawa ke destinasi yang ditentukan oleh atribut href.

Untuk menunjukkan, buat fail Pengenalan kepada Elemen HTML.html dalam direktori kerja anda.

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

Kemudian, tambahkan pautan dalam fail index.html anda yang menghala ke destinasi.

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

Anda akan dibawa ke dokumen Pengenalan kepada Elemen HTML.html apabila anda mengklik pada pautan.

Anda juga boleh menambah pautan Go Back dalam Pengenalan kepada Elemen HTML.html untuk membawa anda kembali ke index.html.

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

Pautan yang saling berkaitan ini membentuk internet yang kita lihat hari ini.

Secara lalai, destinasi yang dipautkan akan dibuka dalam tetingkap yang sama. Anda boleh menukar tingkah laku itu dengan menetapkan atribut sasaran. Contohnya, target="_blank" membuka destinasi dalam tab baharu.

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

Lawati Demo Kod ↗

Perkara lain yang mungkin anda perasan ialah pautan pada mulanya dipaparkan dalam warna biru. Sebaik sahaja anda mengklik padanya, ia menjadi merah. Selepas itu, pautan menjadi ungu, menunjukkan bahawa pautan itu telah dilawati sebelum ini.

Tingkah laku ini mempunyai kaitan dengan konsep yang dipanggil kelas pseudo, yang membolehkan anda menentukan gaya yang berbeza untuk elemen dalam keadaan yang berbeza. Kami akan menyemak semula topik ini apabila kita bercakap lebih lanjut tentang CSS.

Senarai

Lawati Demo Kod ↗

Terdapat tiga jenis senarai berbeza dalam HTML: senarai tertib, tidak tersusun dan penerangan.

Senarai tertib ditakrifkan dengan

elemen dan setiap item senarai individu dibuat dengan
1. .
   

     <p>This is the first paragraph.</p>
     <p>This is the second paragraph, which starts on a new line.</p>
   
   

   Senarai tidak tersusun ditakrifkan dengan

   elemen.
   

   <!-- prettier-ignore -->
   
     This is the first paragraph.
     This is the second paragraph, which starts on a new line.
   
   

   Senarai perihalan adalah sedikit lebih kompleks, kerana ia terdiri daripada senarai item dan penerangan untuk setiap item. Senarai perihalan ditakrifkan dengan

   elemen, setiap item senarai ditakrifkan dengan

   dan setiap pernyataan penerangan ditakrifkan dengan

   .
   

     <p>
       This is the first paragraph.<br>
       This is the second paragraph, which starts on a new line.
     </p>
   
   

   Elemen susun atur

   Setakat ini, kami hanya membincangkan elemen yang digunakan untuk memaparkan kandungan, seperti teks, senarai dan imej. Malah, terdapat satu lagi kategori elemen dalam HTML yang bertanggungjawab mengatur elemen ini.

   Ia tidak direka bentuk untuk memaparkan sebarang jenis kandungan tertentu, tetapi sebaliknya, ia bertindak sebagai bekas untuk elemen lain. Apabila digabungkan dengan CSS, mereka boleh membuat reka letak yang berbeza untuk halaman web. Beberapa elemen reka letak yang biasa digunakan ditunjukkan dalam senarai di bawah.

   • : Mentakrifkan bahagian pengepala untuk dokumen, biasanya terletak di bahagian atas halaman web.
   • : Mentakrifkan bar navigasi. Untuk kebanyakan halaman web, ia terletak di bahagian atas dengan pengepala, tetapi sesetengah pembangun meletakkannya di sisi halaman.
   • : Mentakrifkan bahagian untuk dokumen.
   • : Mentakrifkan bahagian bebas dalam halaman web.
   • : Kandungan selain daripada kandungan utama, seperti bar sisi.
   • : Bahagian pengaki yang terletak di bahagian bawah halaman web.
   • : Mencipta tab yang boleh dibuka dan ditutup oleh pengguna.
   • : Mencipta tajuk untuk unsur. Ia hendaklah diletakkan di dalam unsur.

   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
   

   Lawati Demo Kod ↗

   • : Dan, sudah tentu, elemen susun atur yang paling penting,

     , yang bermaksud pembahagian. Ia ialah elemen generik yang mencipta sekatan dalam halaman web dan tidak mempunyai sebarang tujuan khas.

     Ini ialah elemen reka letak yang paling biasa digunakan, kerana untuk halaman web kehidupan sebenar, kebanyakan bahagian dan blok tidak sepadan dengan mana-mana elemen semantik yang dinyatakan di atas. Akibatnya, ramai pembangun suka menggunakan

     untuk membuat reka letak halaman.
     

       <p>This is the first paragraph.</p>
       <p>This is the second paragraph, which starts on a new line.</p>
     
     

     

     Perhatikan bahawa

     elemen sentiasa bermula pada baris baharu dan mengambil sebanyak mungkin ruang mendatar. Sebaliknya, elemen tidak bermula pada baris baharu dan hanya mengambil sebanyak mungkin ruang yang diperlukan.

     Ini sebenarnya adalah perbezaan antara elemen blok dan elemen sebaris.

     Kebanyakan elemen yang kami nyatakan setakat ini ialah elemen blok, seperti

     ,

     ,

     kepada

     ,

   • , dsb. Tanpa gaya tambahan yang ditentukan, ia secara automatik akan mengambil sebanyak mungkin ruang mendatar.

     elemen ialah contoh elemen sebaris. Ia hanya mengambil sebanyak mungkin ruang yang diperlukan apabila diletakkan di sebelah elemen lain. Dan atribut lebar dan ketinggian tidak akan mempunyai kesan padanya.

     Terdapat banyak elemen lain, kedua-dua elemen blok dan sebaris tersedia dalam HTML. Adalah mustahil untuk membincangkan kesemuanya dalam satu pelajaran, tetapi berikut ialah rujukan semua elemen HTML daripada W3Schools jika anda berminat.

     Bacaan lanjut

     • Cara Menggunakan Pemilih CSS
     • Apakah Kod HTML Semantik?
     • Cara Memusatkan Div dalam CSS