Cara membuka link (Tautan) Di TAB jendela baru mengunakan HTML

 Search

Type 2 or more characters for results.

Ketika Anda membuka laman sebuah website, Anda mungkin sering menjumpai adanya satu atau lebih link (tautan). Secara standar, warna link adalah biru bergaris bawah, berbeda dengan teks biasa yang berwarna hitam dan tidak bergaris bawah. Ketika link diklik, warna berubah menjadi merah dan bergaris bawah, sedangkan untuk Link yang sudah pernah diklik akan berwarna ungu dan bergaris bawah.

Semua laman website dibuat dengan bahasa HTML dengan menggunakan elemen yang tersedia, termasuk untuk membuat link. Anda dapat membuat link di HTML dengan menggunakan elemen anchor (a) dan menambahkan atribut href berisi URL laman website yang dituju di tag <a>, sedangkan link text atau teks terlihat yang akan dirubah menjadi link diapit dengan tag <a> dan </a>. Berikut ini adalah sintaksis sederhananya:

<
a
href="/url">
link text</a>

Secara default, ketika Anda mengklik link, laman website yang dituju oleh link akan dibuka di tab atau jendela browser yang sama, artinya laman sebelumnya diganti (overide) dengan laman baru. Di dalam teknik SEO, membuka laman website lain di tab atau jendela browser yang sama akan mengarahkan visitor ke website tersebut dan ini dianggap kurang baik.

Baca Juga artikel ini Cara pengunaan HTML

Oleh karena itu, pemilik blog atau website yang laman website berisi link yang mengarah ke website lain akan mengatur agar dibuka di tab atau jendela baru browser. Di HTML, untuk membuka link di tab atau jendela baru browser dapat ditambahkan atribut target di tag <a> dan diisi nilai _blank. Berikut ini adalah sintaksis sederhananya:

<a href="/url" terget="_blank">link text</a>

Kode HTML berikut ini adalah cara membuat link yang akan mengarah ke laman website lain dan membukanya di tab atau jendala baru browser. Kode menggunakan elemen anchor (a) dengan dua atribut yaitu atribut href berisi URL laman website yang dituju dan atribut target berisi _blank agar laman website dibuka di tab atau jendela baru browser.

<a href="https://www.topikit.com/seo.html/" target="_blank">topikit.com/seo</a>

Berikut ini contoh kode HTML sederhana membuat link yang dibuka di tab atau jendela baru browser.

<!DOCTYPE html>
<html>
<body>

<h2>Atribut target="_blank"</h2>

<a href="https://www.topikit.com/seo.html/" target="_blank">topikit.com/seo</a>

<p>Gunakan atribut target="_blank" untuk membuka link di tab atau jendela baru.</p>

</body>
</html>

  1. Hasil menjalankan kode HTML di browser adalah sebagai berikut:

2.Menggunakan Elemen Heading Di HTML

Heading adalah elemen HTML umum yang dapat ditemukan dengan mudah pada setiap halaman web. Untuk membuat heading di halaman web, Anda menggunakan elemen HTML dimulai dari h1 sampai dengan h6. Heading merupakan elemen blok (block element) yang dapat berisi elemen HTML lainnya dan ketika ditampilkan di browser (peramban) dimulai di baris baru.Setiap elemen heading mempunyai font dan ukuran standar yang semuanya ditentukan dari font dasar browser. Font dasar dari browser umumnya adalah Times New Roman dengan ukuran 16 pixel. Namun, Anda dapat mengubah nilainya dengan CSS. Elemen heading tidak dimaksudkan untuk memformat teks (text), melainkan untuk menyediakan struktur yang logis untuk dokumen Anda.


Heading pertama dari halaman sebuah web seharusnya elemen h1 yang menandai heading yang paling penting. Heading penting level berikutnya seharusnya elemen h2. Setelah h2, heading berikutnya seharusnya h3 dan begitu seterusnya. Ini berarti Anda perlu turun satu level dan tidak melompat dua atau lebih ke level heading di bawahnya.

Ketika Anda menggunakan struktur heading dengan benar, ini akan membantu mesin pencari atau search engine melakukan indek (indexing) website dengan lebih baik dan memberikan kemudahan akses pada perangkat (device) seperti screen reader. Berikut ini adalah tabel elemen heading dari h1 sampai dengan h6 beserta contohnya.

Tabel Elemen Heading Di HTML

ElemenKeterangan
h1Membuat heading level 1 dengan konten tebal (bold) dan ukuran font 200% dari ukuran font dasar.
h2Membuat heading level 2 dengan konten tebal (bold) dan ukuran font 150% dari ukuran font dasar.
h3Membuat heading level 3 dengan konten tebal (bold) dan ukuran font 117% dari ukuran font dasar.
h4Membuat heading level 4 dengan konten tebal (bold) dan ukuran font 100% dari ukuran font dasar.
h5Membuat heading level 5 dengan konten tebal (bold) dan ukuran font 83% dari ukuran font dasar

h6Membuat heading level 6 dengan konten tebal (bold) dan ukuran font 67% dari ukuran font dasar.
Contoh :
<html>
<head>
<title>Menggunakan Elemen Heading.</title>
</head>
<body>
<h1>Ini heading level 1 (h1).</h1>
<p>Konten tebal (bold) dengan ukuran font 200% dari font dasar.</p>
<h2>Ini heading level 2 (h2).</h2>
<p>Konten tebal (bold) dengan ukuran font 150% dari font dasar.</p>
<h3>Ini heading level 3 (h3).</h3>
<p>Konten tebal (bold) dengan ukuran font 117% dari font dasar.</p>
<h4>Ini heading level 4 (h4).</h4>
<p>Konten tebal (bold) dengan ukuran font 100% dari font dasar.</p>
<h5>Ini heading level 5 (h5).</h5>
<p>Konten tebal (bold) dengan ukuran font 83% dari font dasar.</p>
<h6>Ini heading level 6 (h6).</h6>
<p>Konten tebal (bold) dengan ukuran font 67% dari font dasar.</p>
</body>
</html>
Hasil Dari elmen heading:
Next Post Previous Post