Table of Contents
HTML Document Structure
तो दोस्तों इस पोस्ट में हम जानेगे HTML Document structure के बारे में सामान्य तर में हम अपने Phone, Laptop में किसी बी Website open करते है| तो सभी Website का layout अलग अलग होता है | तो इन सभी Website का जो layout होता है वह HTML के strucute पे आधारित है जैसा हमारा HTML structure होगा वैसा ही हमारी website का layout होगा| website में जितने बी सभी pages है उसको हम एक Webdocument या Webpage कह सकते है | इस Webdocument(Webpage) के structure को ready करने के लिए HTML के कई Readyment बने बनाये Elements का उपयोग करते है|
<!DOCTYPE html>
<html>
<head>
<title>Meta title is here</title>
</head>
<body>
Main contain is here!
</body>
</html>
HTML basic strucute ready करने के लिए 5 html element है|
- <!DOCTYPE>
- <html>
- <head>
- <title>
- <body>
<!DOCTYPE>
DOCTYPE को webpage के सरुआत में define किया जाता है| DOCTYPE web browser को बताता है की HTML किस version की है|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
element browser को बताता है की webpage HTML की formate में है|
<html lang="en">
<head>
<head> Element को body Element के पहले लिखा जाता है | <head> Element में extranel css files को link (add) किया जाता है | इसके आलावा <head> Element में <meta> tag, फाइल को link (add) किया जाता है |
<head> Element का उपयोग browser और searchEngings को Webdocument के बारे में information देने के लिए किया जाता है|
<head> Element के अंदर<title> Element में metatitle लिख सकते है|
<head>
<title>meta title is here</title>
</head>
<body>
<body> Element की जो बात की जाये तो document का Main Content Area है और Content Area को हम मुख्या तीन भागो में divide कर सकते है
- Header section
- Main section
- Footer section
Header section
<header> Element Website का सबसे महत्मपूर्ण भाग है | <header> में Navigation Menu includes करते है| Header का Navigation Menu हमे website के सभी pages का निर्देश दिखता है| header के अंदर Navigation Menu के आलावा Search form, Social media और अपने website का logo बी रख सकते है|
<header>Element के <header>opening tag और </header>closing tag होते है|
Main section
HTML के web document में हम <main>,<section>,<div>,<article>जैसे elememtn का इस्तेमाल कर सकते है|
<main> Element HTML Document के main content को Specified करता है| main content दोबारा छे रिपीट होना नहीं चाहिए | <main> Element को एक बार ही लिखना होता है|
<main> Element को navigation menu,sidebar,footer,header में उपयोग नहीं करना चाहिए|
<section> Element हमारे document में element का group define करता है| हमारे पास topic के related heading,paragraph,images को हम <section>Element में लिख सकते है|
हमारे webdocument में एक से ज्यादा <section>Element हो सकते है जैसे की (about section,services section) जैसे section हो सकते है|
<div> Element एक blank Element है हम उसमे बी related topic heading,paragraph,images defind कर सकते है|
<div> और <section> Element में मुख्या different यह है की जब हम हमारे website का SEO करते है तब <section> Element के related topic का search पहले होता है| जब की <div> Element के related topic का search नहीं होता |
Footer section
<footer>element webdocument का सबसे निचे (bottom) का section होता है| <footer>element वह HTML5 का element है| पहले हम footer section की <div> Element में class or id का उपयोग करके footer section बनाते थे| अब <footer> Element आ गया है HTML5 में footer section में हम तुकी (sort) information add करते है| जैसे की copyright,aboutus,social media links और website pages के links.
Body section Structure Demo
<body>Element एक most important Element है | HTML के सभी Element को body elementमें रख सकत है जैसे की text,hyperlink,paragraph,images,tablelists etc..
किसी बी webdocument में एक बार ही <body> Element का उपयोग कर सकते है|
<body>Element के <body> opening tag </body> closing tag होते है|
आप निचे Image में देख सकते है| Body Document Structure कुछ इस तरह का होता है |
