Struktur HTML, suatu hal yang penting di era teknologi saat ini. Sobat tahu tentang file HTML? File HTML hanyalah sebuah file teks yang bisa kamu buat di text editor mana saja.
Namun, agar file bisa terlihat dan terbaca dengan benar pada World Wide Web dokumen HTML harus memiliki struktur HTML yang benar. Dimana setiap variasi dari struktur HTML bisa membuat browser menampilkan konten dengan tidak benar.
Bahkan semua dokumen ini harus punya suffix html agar HTML code bisa terlihat dengan benar oleh web browser.
Jadi, dibawah ini sobat akan memahami dan mempelajari apa itu struktur HTML lengkap untuk pemula.
Contoh Struktur HTML dan Penjelasan Singkat
Website Cepat Dimulai dari Hosting yang Tepat!
Memilih Hosting bukan hanya soal kapasitas, tapi juga keandalan. Pelajari cara memilih hosting terbaik yang bisa mendukung pertumbuhan website kamu!Intip Panduannya Sekarang
Berikut ini contoh sederhana dari basic HTML agar sobat mendapat gambaran tentang apa itu struktur HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
<h1>Heading Pertama</h1>
<p>Teks Paragraf Pertama.</p>
</body>
</html>
Penjelasan:
- <!DOCTYPE html> adalah yang mendefinisikan bahwa dokumen ini merupakan sebuah HTML5 document.
- <html> sebuah root element dari sebuah halaman HTML.
- <head> elemen ini memuat meta information tentang halaman HTML.
- <title> berperan dalam menentukan judul untuk halaman HTML dan akan tampil pada title bar atau tab halaman.
- <body> yang mendefinisikan document body dan menjadi container untuk semua konten yang terlihat.
- <h1> berguna untuk definisi suatu large heading.
- Lalu, elemen <p> akan mendefinisikan sebuah paragraf.
Apa yang Membedakan antara Tags, Elements & Attributes?
Di dalam struktur dasar HTML terdapat 3 hal penting yang harus sobat ketahui, yaitu tags, elements, dan attributes. Tags adalah yang mewakili structural components dalam suatu dokumen, seperti <h1> untuk title.
Lalu elements terbentuk oleh tags yang mencakup opening dan closing tags dalam kontennya.
Terakhir adalah attributes yang menyediakan informasi dan properti tambahan untuk elemen. Inilah yang berperan dalam meningkatkan fungsionalitas atau tampilannya.
3 hal inilah yang perlu sobat ketahui untuk memahami apa itu struktur HTML.
1. Contoh Tag HTML
Merupakan bagian starting dan ending dari elements HTML. Biasanya dimulai dengan simbol < dan diakhiri dengan simbol >. Jadi intinya, apapun yang tertulis dengan simbol <text>, itulah tags.
Berikut ini contoh penulisan dari starting tags dan ending tags:
1 <b> </b>
Catatan, ending tags ditulis dengan simbol /.
2. Contoh HTML Elements
Elemen terbentuk dari starting dan ending tags serta isi yang ada dalam tags tersebut. Biasanya menggunakan beberapa struktur HTML untuk mendefinisikan masing-masing tags.
Contoh penulisan tags dengan isi didalamnya hingga terbentuk elements:
<b>ini konten loh.</b>
3. Contoh HTML Attributes
Elements menggunakan attributes untuk menentukan suatu karakter dalam elements itu sendiri. Biasanya akan ditempatkan pada starting tags suatu elements.
Attributes juga sering memberikan gaya tambahan pada elemen tersebut.
Contoh sebuah attributes css tambahan dalam suatu elements:
<p align=”right”>Ini konten loh.</p>
Jadi itulah ringkasan mengenai 3 hal penting dalam HTML documents yang terdiri dari tags, elements, dan attributes.
Apa Saja Elements Utama dalam HTML?
Ada sebuah container untuk elemen-elemen pada HTML yang disebut <head>. Berikut ini penjelasan apa itu elemen <head> dan elements lainnya:
1. HTML <head>
<head> merupakan sebuah wadah atau container untuk metadata yang ditempatkan di antara <html> tag dan <body> tag. Metadata pada HTML ini berisi tentang informasi data dokumen pada HTML itu sendiri. Namun metadata tidak akan tampil pada halaman.
Biasanya metadata yang menentukan judul dokumen, character set, styles, script, dan meta information yang lain.
2. HTML <title>
<title> inilah yang menentukan judul dokumen dan harus berupa sebuah teks. Judul akan tertampil pada bilah browser dan tab halaman.
Elemen <title> sangat penting pada HTML documents karena berperan dalam optimasi SEO. Judul inilah yang digunakan oleh algoritma search engine dalam mengurutkan halaman dalam hasil searching.
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Apa yang Dimaksud dengan</title>
</head>
<body>
3. HTML <style>
<style> inilah yang berperan untuk menentukan style information untuk satu halaman HTML.
Contoh sederhana:
<style>
body {background-color: green;}
h1 {color: blue;}
p {color: black;}
</style>
4. HTML <link>
<link> berperan dalam mendefinisikan hubungan antar dokumen saat ini dengan external resource. Tag <link> sering dipakai untuk link ke external style sheet.
Contohnya:
<link rel=”stylesheet” href=”mystyle.css”>
5. HTML <meta>
<meta> akan dipakai untuk menentukan character set, deskripsi halaman, keyword, document writer dan viewport setting. Browser akan menggunakan metadata oleh search engine dan web services lainnya.
Satu contoh dalam menentukan keyword untuk search engine:
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
6. HTML <script>
<script> berguna untuk mendefinisikan client side JavaScript. Seperti berikut dimana JavaScript menulis “Hello You” ke dalam elemen HTML dengan id=”demo”:
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Hello You!”;
}
</script>
7. HTML <base>
<base> ini yang menentukan basic URL untuk semua relative URL pada suatu halaman. Tag < base> haru punya attributes href atau target, ataupun keduanya.
Hanya akan ada satu <base> dalam elemen tunggal di satu dokumen.
Contoh sederhana:
<head>
<base href=”https://www.jagoanhosting.com/” target=”_blank”>
</head>
<body>
<img src=”images/GCP.png” width=”24″ height=”39″ alt=”GCP”>
<a href=”tags/tag_base.asp”>HTML base Tag</a>
</body>
Dan itulah 7 elemen utama dalam HTML yang harus sobat ketahui untuk memahami apa itu struktur HTML secara mendalam.
Memahami Pentingnya tag <head> dan <body> dalam Struktur Tag HTML
<head> dan <body> merupakan dua tag yang paling sering digunakan dalam HTML. Jarang sekali ada website industri yang tidak menggunakan kedua tag ini pada halamannya.
Tag <head> sendiri penting untuk memuat metadata dan informasi yang terkait dengan HTML documents. Tag inilah yang memuat beberapa tag penting lainnya.
Sedangkan tag <body> adalah anak terakhir dari <html> yang dipakai untuk memuat main content pada HTML documents. <body> inilah yang memuat semuanya mulai dari judul, paragraf hingga div containers unik ada di dalam tag <body>.
Mari Building Website dengan Hosting Terbaik
Jika sobat berpikiran untuk building website dengan struktur HTML yang telah sobat pelajari. Sobat harus menggunakan jasa Hosting Murah Terbaik dari Jagoan Hosting.
Kamu dijamin akan mendapatkan performa terbaik bersamaan dengan dukungan teknis via WhatsApp full 24/7.
Apalagi lagi kamu akan mendapatkan unlimited bandwidth dan SSD storage dengan cPanel dan Softaculous Installer gratis. Jadi jangan ragu lagi ayo mulai pakai hosting web murah di Jagoan hosting.
Pilih VPS dengan Performa dan Fleksibilitas untuk Website
Sobat pasti akan membutuhkan full control terhadap website yang sudah dibangun tadi. Makanya sekarang soba pakai layanan VPS Murah dari Jagoan Hosting. Harganya terjangkau dengan kualitas yang bukan main-main.
Selain mendapatkan dukungan support 24/7 via WhatsApp kamu juga bisa mendapatkan banyak benefit disini.
Seperti kamu akan mendapatkan dedicated resource untuk menunjang performa yang optimal. Juga mendapatkan full root acces dengan kendali penuh. MAsih ada banyak benefit lain yang bisa kamu dapatkan dari layanan VPS Jagoan Hosting.
Website Kamu Butuh Hosting Terbaik!
Jangan asal pilih hosting! Pastikan website kamu berjalan cepat, aman, dan tanpa hambatan dengan shared hosting terbaik dari Jagoan HostingCek Tips Memilihnya
FAQ
Apa yang dimaksud dengan CSS yang berhubungan dengan HTML?
CSS itu merupakan suatu bahasa stylesheet yang berguna untuk mempresentasikan dokumen yang ditulis dalam HTML atau XML.
Kapan waktu yang tepat untuk menggunakan head method?
Sobat bisa gunakan HTTP HEAD saat ingin memeriksa apakah suatu resource ada atau sudah diupdate tanpa mendownloadnya.
Sepenting apa HTML dalam membuat desain website?
Sangat penting untuk semua web developer karena merupakan bahasa pemrograman inti yang sering dipakai untuk website building.
Apakah worth it belajar HTML dan CSS di 2025 meski ada AI?
Ya, karena AI sering membuat website tanpa efisiensi dan praktik yang baik. Hal inilah yang bisa membuat kamu untuk mengoreksi AI dan memaksimalkannya dengan pengetahuan HTML dan CSS.
Apa yang dimaksud dengan HTML layout?
Merupakan sebuah teknis untuk membagi halaman web menjadi beberapa bagian dan membuat mudah dalam menerapkan gaya, konten, dan lain-lain.
