Kode HTML Dasar yang Perlu Diketahui Setiap Pengguna WordPress

Diterbitkan: 2019-04-24

HTML adalah dasar dari hampir semua hal di internet. Ini adalah landasan di mana konten internet dibangun, dan telah berlangsung selama beberapa dekade. Tanpa pemahaman yang kuat tentang HTML, semua yang Anda lakukan dengan WordPress atau desain dan pengembangan web lainnya akan terhambat. Beruntung bagi Anda, ada banyak kode HTML dasar yang digunakan setiap pengguna WordPress dari pemula hingga veteran hampir setiap hari. Mari kita hancurkan mereka dan mempercepat Anda.

Berlangganan Saluran Youtube Kami

Apa itu HTML?

Inilah versi cepatnya: HTML adalah singkatan dari hypertext markup language , yang berarti bahwa itu bukan bahasa pemrograman. HTML tidak memerintahkan komputer Anda untuk menjalankan sesuatu melalui skrip. Sebaliknya, dibutuhkan teks yang Anda miliki di halaman Anda, dan itu menandainya. Italic, bold, alignment, size, dan lain sebagainya. HTML juga memberi Anda kemampuan untuk menyertakan gambar dan tautan, dan dengan HTML5, versi terbaru memanipulasinya dan teks dengan cara baru yang menarik.

Kode HTML terkandung dalam flag dan cukup mudah dibaca. Halaman HTML sederhana mungkin terlihat seperti ini: 

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

Saat dirender di browser, itu akan terlihat seperti ini:

Kode HTML Dasar

Seperti yang Anda lihat, HTML tidak terlalu membingungkan. Faktanya, bahkan jika Anda belum pernah melihat kode HTML sebelumnya, saya yakin Anda dapat mengetahui apa arti masing-masing tag tersebut hanya berdasarkan konteksnya. Dengan menyingkir, mari kita lihat kode HTML dasar yang paling umum yang akan Anda gunakan sepanjang karier Anda di web.

Berani

Saat Anda membungkus teks dalam tag <strong> , Anda memberi tahu browser untuk menebalkan teks. Anda juga dapat menggunakan <b> , juga, tetapi dengan Google dan mesin telusur lain yang lebih menyukai pengkodean semantik, Anda lebih aman dengan <strong>

You can make <strong>text bold</strong> by using this tag.

Huruf miring

<Em> singkatan dari penekanan , dan itu adalah cara semantik untuk menggunakan huruf miring dalam HTML. Anda juga dapat menggunakan <i> untuk melakukannya.

You can put <em>text in italics<em> by using this tag.

Menggarisbawahi

Hal yang sama berlaku untuk <u> dan menggarisbawahi. Secara umum, yang ini sangat sedikit digunakan karena tautan digarisbawahi dan teks yang digarisbawahi yang tidak dapat Anda klik memberikan pengalaman pengguna yang buruk.

You can <u>underline</u> by using this tag.

Judul

Mungkin yang paling banyak digunakan dari semua kode HTML dasar adalah berbagai heading. Menggunakan <h1>, <h2>, <h3>, <h4>, <h5>, <h6> untuk membagi konten Anda menjadi beberapa bagian.

Pastikan untuk menggunakannya dalam urutan hierarkis. Google ingin Anda menyusun judul, jadi pastikan untuk menggunakan <h2> hanya di bawah <h1> , bukan di bawah <h3> .

Meskipun sebagian besar halaman hanya memiliki satu <h1> , Google tidak lagi menghukum Anda karena memiliki lebih banyak. Ingatlah bahwa menggunakan <h1> akan mengatur ulang sarang Anda untuk halaman tersebut (atau setidaknya bagian halaman tersebut).

<h2>H2 is the most commonly used header tag.</h2>

Semua header untuk elemen HTML pada halaman ini adalah h2 .

Gambar

Menyisipkan gambar adalah salah satu hal paling berguna yang dilakukan HTML. Itu memecahkan internet dari gaya brutalnya dan menuju ke tempat seperti sekarang ini. Yang perlu Anda lakukan adalah memiliki URL gambar yang Anda inginkan, dan meletakkan satu <img src> (singkatan dari tag sumber gambar . Seperti ini:

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

Perhatikan bahwa Anda tidak perlu menutup tag gambar, dan tanda kutip tidak diperlukan untuk menampilkan gambar. Banyak orang masih menggunakannya untuk membuat kode lebih mudah dibaca.

Atribut <alt> adalah teks yang muncul untuk tujuan aksesibilitas, dan juga diindeks oleh mesin pencari. Untuk orang-orang dengan pembaca layar dan perangkat lain, teks alternatif mutlak diperlukan untuk menggunakan internet. Itu selalu merupakan praktik terbaik untuk memiliki teks alternatif untuk gambar Anda.

Tautan

Oke. Link. Ada banyak hal yang terjadi dengan tautan. Atau, lebih tepatnya, ada banyak hal yang dapat Anda lakukan dengan tautan. Pada dasarnya, Anda akan menggabungkannya dengan tag <a href> . <a> menunjukkan itu adalah tautan, dan <href> secara harfiah adalah referensi hypertext (URL) ke tempat Anda menautkan.

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

Anda akan menutup kode tautan hanya dengan </a> , dan Anda dapat menggunakan teks apa pun yang Anda inginkan di antaranya. Itu akan menjadi tautan yang dapat diklik itu sendiri dan disebut teks jangkar .

Itu ditampilkan di halaman seperti ini: Tautan ke halaman Divi kami, dan ini adalah teks jangkar.

Selain itu, Anda juga dapat membuat sarang kode HTML. Anda dapat membuat gambar dapat diklik dengan menyisipkan tag <img src> di antara tanda tautan.

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

Anda dapat melihat bagaimana tautan gambar yang dapat diklik ditampilkan di sini:

Kode HTML Dasar untuk Hotlinking Gambar

Atribut Tautan Lainnya

Anda juga dapat menyertakan beberapa atribut berbeda ke tautan sehingga mereka berperilaku dengan cara tertentu (seperti menyembunyikan URL Anda agar tidak menjadi perujuk atau membuka tautan di jendela baru). Beberapa yang paling berguna bagi Anda adalah

  • rel menunjukkan semacam hubungan untuk tautan dan targetnya. Seperti noreferrer untuk mencegah lalu lintas rujukan dilacak kembali ke Anda.
  • target memberi tahu browser tempat membuka tautan: _blank akan membukanya di tab kosong, misalnya.
  • nofollow sejalan dengan rel dan memberi tahu mesin pencari bahwa Anda tidak ingin meneruskan jus tautan apa pun ke situs target. Ini bagus saat menautkan ke konten kontroversial dan sebagainya. Ini juga mencegah orang-orang mengirim spam ke tautan di komentar Anda, dan membuat konten Anda terlihat tidak bias, karena Anda tidak memberikan bonus apa pun untuk ditampilkan selain paparan dan klik-tayang.

Ada lebih banyak, tetapi itu adalah yang paling sering Anda lihat.

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

Teks Dicoret

Jika Anda seperti saya, terkadang Anda membutuhkan ingin membuat lelucon dengan menggunakan kata-kata kasar. Atau mungkin Anda perlu menandai sesuatu dari daftar (atau menghapus, seperti yang dikatakan kode itu sendiri). Atau apa pun yang Anda perlukan agar garis berjalan melalui teks.

Saat itulah Anda menggunakan <del> di sekitar teks yang ingin Anda coret. Bagi sebagian orang, ini adalah kode yang sangat umum, sementara yang lain mungkin tidak pernah menggunakannya. Bagaimanapun, itu mudah diingat.

You can use <del>this code</del> for strikethrough text in HTML.

Daftar

Daftar adalah bagian utama lain dari konten web hari ini. Mereka tidak hanya memberi Anda banyak ruang putih dan memecah dinding teks, tetapi mereka juga memungkinkan Anda mengatur pikiran Anda menjadi potongan-potongan yang mudah dicerna.

Ada dua jenis daftar yang dapat Anda buat dengan kode HTML dasar. Urutan daftar yang diberi nomor 1, 2, 3 dan seterusnya. Daftar tidak berurutan menggunakan poin atau simbol (bergantung pada desain situs Anda) alih-alih angka.

Anda membungkus setiap daftar dengan <ul> atau <ol> untuk daftar yang tidak berurutan atau berurutan. Dan setiap item dalam daftar harus dibungkus <li> .

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

Dan kode-kode itu dirender seperti ini untuk menunjukkan perbedaannya:

  • Ini adalah bagian dari daftar yang tidak berurutan.
  • Begitu juga ini.
  1. Dan ini adalah bagaimana Anda mengatur daftar yang dipesan.
  2. Ini adalah tautan dalam daftar.
  3. Dan teks tautan ini dicetak tebal , tetapi bagian ini tidak.

Anda juga dapat membuat sarang kode lain dalam daftar. Jadi Anda bisa menebalkan teks, menyisipkan tautan, dan sebagainya.

Blok Kutipan

Anda akan, pada titik tertentu dalam karir WordPress Anda, perlu mengutip situs web orang lain. Di situlah <blockquote> masuk. Cukup kelilingi teks apa pun yang Anda salin/tempel (dan atribut) dengan tag pembuka dan penutup <blockquote> , dan Anda siap melakukannya.

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

Ini akan terlihat seperti di halaman:

Teks ini akan muncul dengan gaya khusus untuk menunjukkan bahwa itu adalah kutipan.

Paragraf

Paragraf HTML agak aneh. Bergantung pada CMS dan pembuat yang Anda gunakan, ini mungkin secara otomatis membuat setiap jeda baris sebagai paragraf terpisah. WordPress melakukan ini saat Anda mengetik HTML. Namun, tidak semuanya melakukan itu. Jadi, jika Anda perlu memisahkan paragraf dan tidak memiliki dinding teks, bungkus masing-masing paragraf dalam <p> . Browser kemudian akan tahu untuk menampilkan setiap blok teks sebagai paragraf terpisah, bukan satu blok berkelanjutan. Secara default, browser mengabaikan jeda baris kecuali diberitahu sebaliknya.

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Garis dan Jeda Garis

Anda mungkin ingin pemisahan lain antara paragraf dan bagian Anda. Saat itulah Anda dapat menggunakan tag <hr> dan <br/> .

<hr> menyisipkan garis pemisah di mana pun itu. Banyak orang menggunakan ini untuk memisahkan widget di bilah sisi atau bagian utama halaman web.

Tag <br/> adalah pemisah baris. Anda dapat menggunakan <br/> di tengah <p> untuk memutus garis tanpa masuk ke paragraf baru (untuk penataan blok dan demi organisasi). <br/> adalah tag penutup sendiri, yang berarti tidak boleh ada konten di dalamnya. Ini ditunjukkan oleh garis miring di akhir kode.

Meskipun Anda dapat menggunakannya untuk memecah teks dan paragraf dengan menyisipkannya di tempat yang Anda inginkan, itu bukan praktik yang baik untuk dilakukan, dan saat Anda semakin mahir dengan HTML dan CSS dan JavaScript, Anda perlu menargetkan paragraf elemen untuk melakukan hal-hal tertentu. Anda dapat membaca lebih lanjut tentang perbedaan di sini.

Membungkus

HTML mutlak diperlukan untuk berinteraksi dengan internet. Semua orang menggunakannya dengan cara yang sama, apakah Anda memulai pengembangan dan desain web atau veteran dari hari-hari sebelum JavaScript menjadi sesuatu. Kami masih menggunakan kode HTML dasar untuk menjalankan fondasi semua situs kami. Tidak peduli seberapa mewah situs tersebut atau seberapa canggih fiturnya, ketika tautan putus atau hal-hal yang tidak seharusnya tebal, Anda masih akan mencari-cari untuk melihat apakah tag <a href> atau <strong> baik-baik saja.

Apa kode HTML dasar yang paling sering Anda gunakan saat ini?

Gambar unggulan artikel oleh enterlinedesign / shutterstock.com