HTML लेआउट तत्व और तकनीक

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

HTML लेआउट तत्व

HTML में कई सिमेंटिक तत्व होते हैं जो वेब पेज के विभिन्न भागों को परिभाषित करते हैं:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

<header> - किसी दस्तावेज़ या अनुभाग के लिए शीर्षलेख को परिभाषित करता है <nav> - नेविगेशन लिंक के एक सेट को परिभाषित करता है <section> - एक दस्तावेज़ में एक अनुभाग को परिभाषित करता है <article>- एक स्वतंत्र, स्व-निहित सामग्री को परिभाषित करता है <aside>- सामग्री से अलग सामग्री को परिभाषित करता है (जैसे साइडबार) <footer>- किसी दस्तावेज़ या अनुभाग के लिए पाद लेख को परिभाषित करता है <details>- अतिरिक्त विवरण को परिभाषित करता है जिसे उपयोगकर्ता मांग पर खोल और बंद कर सकता है <summary><details>- तत्व के लिए एक शीर्षक परिभाषित करता है आप हमारे HTML शब्दार्थ अध्याय में सिमेंटिक तत्वों के बारे में अधिक पढ़ सकते हैं ।

HTML लेआउट तकनीक

बहु-स्तंभ लेआउट बनाने के लिए चार अलग-अलग तकनीकें हैं। प्रत्येक तकनीक के अपने पेशेवरों और विपक्ष हैं:

• सीएसएस ढांचा
• सीएसएस फ्लोट संपत्ति
• सीएसएस फ्लेक्सबॉक्स
• सीएसएस ग्रिड

सीएसएस फ्रेमवर्क

यदि आप अपना लेआउट तेजी से बनाना चाहते हैं, तो आप W3.CSS या बूटस्ट्रैप जैसे CSS ढांचे का उपयोग कर सकते हैं ।

सीएसएस फ्लोट लेआउट

floatCSS संपत्ति का उपयोग करके संपूर्ण वेब लेआउट करना आम बात है । फ्लोट सीखना आसान है - आपको बस यह याद रखने की जरूरत है कि floatऔर clearगुण कैसे काम करते हैं। नुकसान: फ़्लोटिंग तत्व दस्तावेज़ प्रवाह से बंधे होते हैं, जो लचीलेपन को नुकसान पहुंचा सकते हैं। हमारे CSS फ्लोट और क्लियर चैप्टर में फ्लोट के बारे में अधिक जानें।

सीएसएस फ्लेक्सबॉक्स लेआउट

फ्लेक्सबॉक्स का उपयोग यह सुनिश्चित करता है कि जब पृष्ठ लेआउट में अलग-अलग स्क्रीन आकार और अलग-अलग डिस्प्ले डिवाइस शामिल हों तो तत्व अनुमानित रूप से व्यवहार करते हैं।

हमारे सीएसएस फ्लेक्सबॉक्स अध्याय में फ्लेक्सबॉक्स के बारे में अधिक जानें।

सीएसएस ग्रिड लेआउट

CSS ग्रिड लेआउट मॉड्यूल पंक्तियों और स्तंभों के साथ एक ग्रिड-आधारित लेआउट सिस्टम प्रदान करता है, जिससे फ़्लोट्स और पोजिशनिंग का उपयोग किए बिना वेब पेजों को डिज़ाइन करना आसान हो जाता है।

हमारे CSS ग्रिड इंट्रो चैप्टर में CSS ग्रिड के बारे में अधिक जानें।