Layout HTML

Situs web sering kali menampilkan konten dalam berbagai kolom (seperti majalah dan surat kabar).

Penggunaan layout HTML dengan elemen <div>

Keterangan:<div> elemen biasa digunakan sebagai alat layout, karena dapat dengan mudah ditempatkan melalui CSS.

Contoh ini menggunakan empat elemen <div> untuk membuat tata letak kolom ganda:

Contoh

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London adalah ibu kota Inggris. Ini adalah kota yang paling ramai di United Kingdom,
dengan area metropolitan yang mencapai lebih dari 13 juta penduduk.
</p>
<p>
Berdiri di Sungai Thames, London telah menjadi pemukiman penting selama dua ribu tahun,
Sejarahnya kembali ke pendirian oleh Romawi, yang menyebutkannya Londinium.
</p>
</div>
<div id="footer">
Hak Cipta codew3c.com
</div>
</body>

Coba Sendiri

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

Tata letak situs menggunakan HTML5

Elemen semantik yang disediakan oleh HTML5 menentukan bagian berbeda dari halaman web:

Elemen Semantik HTML5

header Tentukan tajuk laman atau section
nav Tentukan wadah untuk tautan navigasi
section Tentukan section dalam dokumen
article Tentukan artikel yang terpisah dan terkandung
aside Tentukan konten yang berada di luar konten (seperti sidebar)
footer Tentukan kaki laman atau bagian section
details Tentukan detil ekstra
summary Tentukan judul elemen details

Contoh ini menggunakan <header>, <nav>, <section>, serta <footer> untuk membuat tata letak kolom ganda:

Contoh

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London adalah ibu kota Inggris. Ini adalah kota yang paling ramai di United Kingdom,
dengan area metropolitan yang mencapai lebih dari 13 juta penduduk.
</p>
<p>
Berdiri di Sungai Thames, London telah menjadi pemukiman penting selama dua ribu tahun,
Sejarahnya kembali ke pendirian oleh Romawi, yang menyebutkannya Londinium.
</p>
</section>
<footer>
Hak Cipta codew3c.com
</footer>
</body>

Coba Sendiri

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

Tata letak HTML menggunakan tabel

Keterangan:Elemen <table> tidak dirancang untuk menjadi alat tata letak.

Elemen <table> digunakan untuk menampilkan data berformat tabel.

Penggunaan elemen <table> dapat memberikan efek tata letak, karena dapat menata gaya elemen tabel melalui CSS:

Contoh

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    Elemen tabel tidak dirancang untuk menjadi alat tata letak.
  </td>
</tr>
</table>
</body>

Coba Sendiri

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>