HTML'de yerleşim CSS özellikleri kullanılarak hazırlanır. Kullanılabilecek bir seçenek <div> elemanından yararlanmaktır. Bir başka seçenek de HTML5 ile gelen yerleşim elemanlarını kullanmaktır.
<div> ve <span>
<div> ve <span> elemanları sayfanın belirli bir kısmını bir gruba alan, herhangi bir manaya gelmeyen elemanlardır. <body> elemanının içerisindeki içeriğin istenen bir kısmı belirli bir gruba konabilir. <div> ve <span> elemanlarının farkı ilkinin blok ikincisinin satır içi elemanı olmasıdır.
Satır içi elemanlarından önce ya da sonra bir alt satıra geçilmez. Blok elemanlarında ise durum bunun tam tersidir. Ayrıca satıriçi elemanlarının içine blok elemanları yerleştirilemez.
<!DOCTYPE html>
<html>
<head>
<title>div ve span</title>
</head>
<body>
Bu yazıdan sonra bir div elemanı eklenecektir.
<div>Bu yazı bir div elemanı içerisine yazılmıştır.</div>
Bu yazıdan sonra bir span elemanı eklenecektir.
<span>Bu yazı bir span elemanı içerisine yazılmıştır.</span>
Aradaki fark görülebilir.
</body>
</html>
Yukarıdaki örnek kod çalıştırıldığında <div> elemanının hem öncesinde hem de sonrasında alt satıra geçildiği, <span> elemanının ise satır içine yerleştirildiği görülecektir.
<div> ve <span> elemanları ile birlikte nitelik kullanmak gerekli değildir. Fakat global nitelikler olan class ve style nitelikleri sıklıkla kullanılır. style niteliği ile blok biçimlendirilirken class niteliği ile bloklar belirli bir sınıf içinde toplanır ve ayrı bir CSS dokümanı ya da <style> elemanıyla aynı sınıfa ait tüm blokların aynı şekilde biçimlendirilmesi sağlanır. Yine global nitelik olan id niteliği de div ile birlikte sıklıkla kullanılır. Böylece CSS dosyası ya da <style> elemanı ile biçimlendirme yapılırken blok için verilmiş olan isim kullanılır. Bunların kullanımı ileride CSS anlatılırken daha detaylı işlenecektir.
<div> etiketi CSS özellikleri ile biçimlendirilebildiği için yerleşim oluşturulurken de sık sık kullanılır. Aşağıdaki örnek dört farklı <div> elemanı kullanılarak oluşturulmuştur.
<!DOCTYPE html>
<html>
<head>
<title>Yerleşim</title>
</head>
<body>
<div style="background-color:black;color:white;text-align:center">
<br>
<h1>Bu kısım sitenin başlığıdır.</h1>
<br>
</div>
<div style="background-color:yellow;float:left;width:30%;height:1000px">
<br><br><br><br><br>
<h2>Bu kısım sitenin bölünmüş bir kısmıdır.</h2>
</div>
<div style="background-color:cyan;float:left;width:70%;height:1000px">
<br><br><br><br><br>
<h2>Bu kısım sitenin bölünmüş bir başka kısmıdır.</h2>
</div>
<div style="background-color:gray;color:white;text-align:center">
<br>
<h3>Bu kısım sitenin en alt kısmıdır.</h3>
<br>
</div>
</body>
</html>
Yukarıdaki örnekte <div> elemanı ile oluşturulan bölümler biçimlendirilerek farklı kısımlar oluşturulmuştur. Yapılan işlemler arkaplan rengini ayarlama, yazı rengini ayarlama, alanın genişliğini ve yüksekliğini belirleme gibi işlemlerdir. Bu işlemler <div> elemanını isimlendirip, ayrı bir CSS dosyası kullanma yoluyla da yapılabilir.
<header>, <nav>, <section>, <article>, <aside>, <footer>, <details> ve <summary>
HTML5 ile gelen yerleşim elemanları ile sitenin yerleşim planını hazırlamak da <div> elemanı ile bu işi yapmak ile benzerdir. Her ikisinde de elemanlar CSS özellikleri kullanılarak biçimlendirilmelidir. Fakat HTML5'in sunduğu yerleşim elemanları her bir kısım için özel bir eleman kullanımını sağlar. Her elemanın bir manası vardır.
<header> elamanı ile başlık kısmı oluşturulur. Bu başlık, bir dokümanın başlığı olabileceği gibi bir kısmın başlığı da olabilir. Fakat <header> elemanı bir başka <header> elemanının içine ya da bir <footer> elemanının içine yerleştirilemez.
<nav> elemanı ile gezinti butonlarının yer alacağı bir menü oluşturulabilir. <section> elemanı ise sitenin içinde bir kısmı ifade eder. <article> elemanı ise bir forum iletisi, ya da blog iletisi gibi çevresinden bağımsız bir içeriği içeren bir kısım tanımlandığını belirtir. İçeriğin akışından ayrı olan bir kısım belirtmek için <aside> elemanı kullanılır. Örneğin bir yöreyi tanıtan gezi yazısında bahsedilen yerlerle ilgili kısa bilgiler veren kutucuklar için bu eleman kullanılabilir. <footer> elemanı ile de bir sayfanın ya da sayfanın bir kısmının tabanı tanımlanır. Burada genellikle sayfanın yazarı, telif bilgisi, iletişim bilgileri gibi bilgiler bulunur.
<!DOCTYPE html>
<html>
<head>
<title>Yerleşim</title>
</head>
<body>
<header style="background-color:black;color:white;text-align:center">
<br>
<h1>Bu kısım sitenin başlığıdır.</h1>
<br>
</header>
<nav style="background-color:yellow;float:left;width:30%;height:1000px">
<br><br><br><br><br>
<a href="http://www.google.com">Google</a><br>
<a href="http://www.yandex.com">Yandex</a><br>
<a href="http://www.bing.com">Bing</a><br>
</nav>
<section style="background-color:cyan;float:left;width:70%;height:1000px">
<br><br><br><br><br>
<h2>Bu kısım sitenin bölünmüş bir kısmıdır. Sol tarafta da gezinti butonları bulunmaktadır.</h2>
</section>
<footer style="background-color:gray;color:white;text-align:center">
<br>
<h3>Bu kısım sitenin en alt kısmıdır.</h3>
<br></footer>
</body>
</html>
Yukarıdaki örnekte HTML5 elemanları ile oluşturulan bölümler biçimlendirilerek farklı kısımlar oluşturulmuştur. Yapılan işlemler arkaplan rengini ayarlama, yazı rengini ayarlama, alanın genişliğini ve yüksekliğini belirleme gibi işlemlerdir. Bu işlemler ayrı bir CSS dosyası kullanma yoluyla da yapılabilir.
<details> elemanı ile kullanıcı tarafından görüntülenip saklanabilen bir kısım oluşturulabilir. Bu kısım varsayılan durumda kapalıdır. Eğer sayfa yüklendiğinde açık olması istenirse open niteliği kullanılmalıdır. Bu niteliğin karşısına değer yazılmaz. Bu kısım kapalı da olsa görünmesi istenen bir başlık için <summary> elemanı kullanılır. <details> ve <summary> elemanları bu yazının yazıldığı tarihte Internet Explorer ve Mozilla Firefox tarafından desteklenmemektedir. Aşağıdaki örnek kod bu elemanların nasıl çalıştığını göstermektedir.
<!DOCTYPE html>
<html>
<head>
<title>Yerleşim</title>
</head>
<body>
<details>
<summary>
Telif Bilgisi
</summary>
<p>2014'te oluşturulan bu sayfanın telif hakkı Kaptan Köpekbalığı'ndadır.</p>
</details>
</body>
</html>
<main>
Bir dokümanın ana kısmı <main> etiketleri arasına alınabilir. Bu kısım dokümana özgü bir kısım olmalıdır, menüler, telif bilgisi, kenar çubukları gibi tekrarlanan içerik olmamalıdır. <main> elemanı yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir. Bir sayfada en fazla bir tane <main> elemanı bulunmalıdır.