Tutorial Belajar HTML

Tutorial HTML Lanjutan – Perbedaan tag Span dan tag Div

Written by adies

Dalam mempelajari html setidaknya kita wajib tau tag-tag dalam html, karena html memformat suatu halaman menggunakan tag-tag, contohnya untuk membuat sebuah paragraf html memakai tag <p>, oleh karena itu tag-tag html harus di ketahui. biasanya untuk pemula pasti belum tau semua tag html, seperti tag span dan tag div.
dibawah ini kita akan mempelajari tag span dan div beserta contoh dalam penggunaannya agar mudah dipahami.

Pengertian tag Span dan tag Div

pada dasarnya tag span dan tag div hanyalah sebagai pengatur struktur web, Elemen DIV digunakan untuk membagi-bagi dokumen HTML dalam suatu hieraki yang terstruktur. tag div membutuhkan atribut id untuk pembeda antara tag div yang dengan tag div lainnya.
selain mengatur struktur website tag div bisa juga digunakan untuk mengatur suatu text dengan memakai atribut align. Teks yang dikelilingi oleh tag <DIV>……..</DIV> akan diformat menurut nilai atribut ALIGN yang ditentukan di dalamnya. Nilai atribut ALIGN yaitu, Left, Center dan Right.
Penggunaan DIV dengan Align=”center” dapat diganti dengan tag <CENTER>….<CENTER>. Keduanya menghasilkan hasil yang sama

contoh

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Tag Div</title>
</head>
<body>
 <div id="header" align="center">
 <h1>Judul Website</h1>
 <img src="https://phpdanmysql.com/wp-content/uploads/2018/06/logo.png" />
 </div>
 <div id="menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </div>
 <!-- Dibawah ini Contoh tag Div untuk mengatur Text -->
 <div id="content">
 <div id="article_1">
<div align="left">Teks rata kiri dalam tag DIV</div>
<div align="right">Teks rata kanan dalam tag DIV</div>
<div align="center">Teks rata tengah dalam tag DIV</div>
<br>
<center>
teks ini menggunakan perintah center sebagai pengganti align center
pada div
</center>
 </div>
 </div>
 <div id="sidebar">
 <h1>Post Terbaru</h1>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 </ul>
 </div>
 <div id="footer">
 <p>Footer - Copyright PHPdanMySQL.Com 2018</p>
 </div>
</body>
</html>

namun dari contoh penggunaan tag div diatas sebenarnya bisa kita buat menggunakan css saja, karena rekomendasi dari para master web programing untuk urusan style website gunakan css untuk mengaturnya. namun semua itu tergantung kepada anda, mau pakai yang mana.

Perbedaan Antara tag Span dan tag Div

perbedaan antara tag span dan tag div tidak begitu jauh berbeda, seperti yang kita ketahui bahwa tag dalam html terbagi dua jenis yang pertama jenis Block-level Element dan yang kedua Inline Element.
Block-level Element tag yang akan membuat block baru ketika tagnya dipakai, contoh kita memakai tag <p> otomatis text yang ada dalam tag p akan berpindah ke baris baru. tag yang masuk ke block-level element adalah tag <div>, <h1> – <h6>, <p>, <form>.
Inline Element adalah kebalikan dari block element, dimana tag ini tidak akan membuat garis baru walaupun tagnya sudah diletakkan didalam text.tag yang masuk kedalam inline element adalah tag <span>, <a>, <img>.

Contoh Tag Div

<!DOCTYPE html>
<html>
<body>
<div style="background-color:black; color:white; padding:20px;">
<h2>Indonesia</h2>
<p>Indonesia adalah negara yang memiliki bermacam suku dan budaya</p>
<p>Indonesia juga memiliki beribu pula yang terbentang dari Sabang sampai Maraoke</p>
</div>
</body>
</html>

dari contoh diatas lihat tag div style ini berfungsi untuk mengubah background dari halaman dengan warna hitam, dan warna text menjadi putih.

Contoh Tag Span

<!DOCTYPE html>
<html>
<body>
<h1>Negara <span style="color:red">Indonesia</span> Tercinta</h1>
</body>
</html>

lihat pada contoh diatas ketika tag span diletakkan di text indonesia ternya tidak akan berpindah kebaris baru, dan tag span ini membuat warna dari kata indonesia menjadi merah berbeda dengan text lainnya.

Jika ada yang bilang tag span dan div tag tidak mempunyai makna itu salah besar, karena semua tag yang dibuat dalam html memiliki makna masing-masing, begitu juga dengan tag span dan div ini. tingga kita sendiri bagaiman memakainya supaya sesuai dengan fungsinya masing-masing.

About the author

adies

Ada Komentar?

×