Layout in HTML web pages par content ko proper structure aur arrangement me display karne ke liye use hota hai. Websites aksar content ko multiple columns me dikhati hain, bilkul magazine ya newspaper style layout ki tarah.
HTML Layout Elements
Layout in HTML me kuch semantic elements use hote hain jo web page ke different parts ko clearly define karte hain.
HTML5 Semantic Elements
-
<header>→ Document ya section ke liye header define karta hai -
<nav>→ Navigation links ka group define karta hai -
<section>→ Document me ek logical section define karta hai -
<article>→ Independent aur self-contained content define karta hai -
<aside>→ Main content ke side ka content define karta hai (jaise sidebar) -
<footer>→ Document ya section ke liye footer define karta hai -
<details>→ Extra details define karta hai jo user open ya close kar sakta hai -
<summary>→<details>element ke liye heading ya summary define karta hai
Example:
Yahaan semantic elements web page ke different layout parts ko define kar rahe hain.
HTML Layout Techniques
Layout in HTML me multicolumn layouts banane ke liye different CSS techniques use ki jaati hain. Har technique ke apne advantages aur disadvantages hote hain.
1. CSS Frameworks
CSS frameworks (jaise Bootstrap) pre-designed classes provide karte hain jisse responsive layouts banana easy ho jata hai.
Advantages:
-
Fast development
-
Ready-made responsive design
2. CSS Float Property
float property traditionally elements ko side-by-side align karne ke liye use hoti thi.
Example:
Aaj kal modern layouts me float ka use kam ho gaya hai.
3. CSS Flexbox
Flexbox ek modern layout system hai jo flexible aur responsive layouts create karne me help karta hai.
Example:
Flexbox elements ko horizontal ya vertical direction me easily align kar sakta hai.
4. CSS Grid
CSS Grid ek two-dimensional layout system hai jo rows aur columns dono ko control kar sakta hai.
Example:
Grid complex layouts ke liye bahut powerful technique hai.
Is tarah Layout in HTML web pages ko structured aur organized banane me help karta hai. Semantic layout elements aur modern CSS techniques jaise Flexbox aur Grid ka use karke developers responsive aur well-designed web layouts create kar sakte hain.
