एचटीएमएल लेआउट

वेबसाइटों अक्सर बहु-स्तम्भ में सामग्री प्रदर्शित करती है (जैसे कि पत्रिकाएँ और समाचार पत्र)।

HTML में <div> एलीमेंट का इस्तेमाल

टिप्पणी:<div> एलीमेंट बारीकी से लेआउट टूल के रूप में उपयोग किया जाता है क्योंकि इसका सहजरूप से CSS के द्वारा स्थानांतरण किया जा सकता है।

यह उदाहरण चार <div> एलीमेंट का उपयोग करके बहु-स्तम्भ लेआउट बनाता है:

उदाहरण

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
लंदन<br>
पेरिस<br>
टोक्यो<br>
</div>
<div id="section">
<h1>London</h1>
<p>
लंदन इंग्लैंड की राजधानी है। यह यूनाइटेड किंगडम का सबसे अधिक जनसंख्या वाला शहर है,
13 मिलियन से अधिक निवासियों वाले शहरी क्षेत्र के साथ.
</p>
<p>
थैम्स नदी पर खड़ा होकर, लंदन दो सदियों से एक प्रमुख निवासस्थान रहा है,
इसका इतिहास रोमनों द्वारा लॉन्डिनियम के नाम से कहे जाने के बाद वापस जाता है, जो दो सदियों से लंदन के एक प्रमुख निवासस्थान है,
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

स्वयं एक प्रयोग करें

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>

HTML5 का वेब लेआउट उपयोग

HTML5 के नए समान्त्रक एलीमेंट वेबपेज़ के विभिन्न भागों को परिभाषित करते हैं:

एचटीएमएल5 सेमैंटिक एलीमेंट

header दस्तावेज़ या खण्ड के हेडर को परिभाषित करें
nav नेविगेशन लिंक के कंटेनर को परिभाषित करें
section दस्तावेज़ में खण्ड परिभाषित करें
article स्वतंत्र आकारवान लेख परिभाषित करें
aside दस्तावेज़ के बाहर की सामग्री (उदाहरण के लिए छोर साइडबार) को परिभाषित करें
footer दस्तावेज़ या खण्ड के पाद को परिभाषित करें
details अतिरिक्त विवरण परिभाषित करें
summary details एलीमेंट के शीर्षक को परिभाषित करें

यह उदाहरण <header>, <nav>, <section>, और <footer> का उपयोग करके बहु-स्तम्भ लेआउट बनाता है:

उदाहरण

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
लंदन<br>
पेरिस<br>
टोक्यो<br>
</nav>
<section>
<h1>London</h1>
<p>
लंदन इंग्लैंड की राजधानी है। यह यूनाइटेड किंगडम का सबसे अधिक जनसंख्या वाला शहर है,
13 मिलियन से अधिक निवासियों वाले शहरी क्षेत्र के साथ.
</p>
<p>
थैम्स नदी पर खड़ा होकर, लंदन दो सदियों से एक प्रमुख निवासस्थान रहा है,
इसका इतिहास रोमनों द्वारा लॉन्डिनियम के नाम से कहे जाने के बाद वापस जाता है, जो दो सदियों से लंदन के एक प्रमुख निवासस्थान है,
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

स्वयं एक प्रयोग करें

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; 
}

HTML ब्यास लेयआउट

टिप्पणी:<table> एलेमेंट लेयआउट टूल के रूप में नहीं डिजाइन किया गया है。

<table> एलेमेंट का काम टेबलाइज्ड डाटा दिखाना है。

HTML <table> एलेमेंट को लेयआउट प्रभाव प्राप्त करने के लिए इस्तेमाल किया जा सकता है क्योंकि इसे CSS के द्वारा शैली बनाया जा सकता है:

उदाहरण

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    टेबल एलेमेंट को लेयआउट टूल के रूप में डिजाइन नहीं किया गया था。
  </td>
</tr>
</table>
</body>

स्वयं एक प्रयोग करें

CSS

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