Tutorial Belajar HTML 13 : Block Elemen dan Inline Elemen pada HTML
Block Elemen dan Inline Elemen pada
HTML – Dalam html dikenal dua buah elemen yaitu block elemen dan inline elemen.
Yang jelas keduanya memiliki perbedaan dan akan sering digunakan pada saat
ngoding.
Block Elemen dan Inline Elemen pada HTML
Block Elemen
Secara default, elemen dalam html
itu dibagi menjadi dua yaitu seperti yang sudah disebutkan di atas. Adapun yang
jenis block elemen sendiri adalah memisahkan atau menggrup setiap elemen html
menjadi terpisah antar elemen lainnya. Sebagai contoh, perhatikan koding di bawah
ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Latihan HTML</title>
<head>
<meta charset="UTF-8">
<title>Latihan HTML</title>
</head>
<body>
<!-- contoh block elemen -->
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam eum sapiente, error. Laborum ad perferendis, suscipit nobis ab rem, repellat, consequatur aliquid nisi architecto impedit. Voluptas officia et ad perspiciatis.
</div>
<ol>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ol>
</body>
</html>
Hasilnya
Nah, coba perhatikan elemen yang ada di dalam tag <div> dan elemen yang berada di dalam tag <ol> pasti akan berbeda. Jadi, setiap elemen yang di grup atau di blok oleh tag yang termasuk block elemen maka elemen tersebut akan pisah. Biasanya jenis block elemen ini dimulai dari awal paragraf atau awal elemen. Di bawah ini ada beberapa tag yang termasuk dalam kategori block termasuk tag <div> tadi.
Nah, coba perhatikan elemen yang ada di dalam tag <div> dan elemen yang berada di dalam tag <ol> pasti akan berbeda. Jadi, setiap elemen yang di grup atau di blok oleh tag yang termasuk block elemen maka elemen tersebut akan pisah. Biasanya jenis block elemen ini dimulai dari awal paragraf atau awal elemen. Di bawah ini ada beberapa tag yang termasuk dalam kategori block termasuk tag <div> tadi.
<address>
|
<canvas>
|
<dt>
|
<ul>
|
<video>
|
<article>
|
<dd>
|
<fieldset>
|
<section>
|
<pre>
|
<aside>
|
<div>
|
<figcaption>
|
<table>
|
<tfoot>
|
<blockquote>
|
<dl>
|
<figure>
|
<output>
|
<p>
|
<h1><h6>
|
<form>
|
<footer>
|
<main>
|
<nav>
|
<header>
|
<hr>
|
<li>
|
<noscript>
|
<ol>
|
Inline Elemen
Block inline akan tetap menyatu
dengan elemen html lainnya, walaupun ada tag block inline yang digunakan. Dari
segi tampilan pun akan tetap menyatu dengan elemen lainnya. Sebagai contohnya
lihat koding berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Latihan HTML</title>
</head>
<body>
<!-- contoh inline elemen -->
Selamat Datang di Forum <b>Web Design Purbalingga</b>. Di sini kita akan belajar bareng seputar <i>design web</i> dan juga tentang <i>programming</i> berbasis web.
</body>
</html>
Hasilnya
Nah, coba perhatikan elemen Web Design Purbalingga akan di cetak tebal karena diberi tag block inline <b> yang membungkus elemen tersebut sekalipun ada elemen lain sebelum dan sesudahnya. Berikut ini adalah tag yang termasuk dalam kategori inline elemen.
Nah, coba perhatikan elemen Web Design Purbalingga akan di cetak tebal karena diberi tag block inline <b> yang membungkus elemen tersebut sekalipun ada elemen lain sebelum dan sesudahnya. Berikut ini adalah tag yang termasuk dalam kategori inline elemen.
<a>
|
<br>
|
<i>
|
<object>
|
<span>
|
<tt>
|
<abbr>
|
<button>
|
<img>
|
<q>
|
<strong>
|
<var>
|
<acronym>
|
<cite>
|
<input>
|
<samp>
|
<sup>
|
|
<b>
|
<code>
|
<kbd>
|
<script>
|
<sub>
|
|
<bdo>
|
<dfn>
|
<label>
|
<select>
|
<textarea>
|
|
<big>
|
<em>
|
<map>
|
<small>
|
<time>
|
Baiklah, sekian materi kali ini
tentang Block Elemen dan Inline Elemen pada HTML. Jika ada yang masih bingung
silahkan gunakan kolom komentar di bawah ini. Semoga bermanfaat dan terus ikuti
materi – materi lainnya.
Post a Comment for "Tutorial Belajar HTML 13 : Block Elemen dan Inline Elemen pada HTML"