Chapter 3HTML Tutorial~1 min read
HTML Page Structure
DOCTYPE, html, head, body — सगळे समजून घ्या
प्रत्येक HTML document एका specific structure ने बनते. हे structure माहित असणे खूप important आहे — सगळी HTML pages याच template वर बनतात.
Basic HTML Page Structure
html
<!DOCTYPE html>
<html lang="mr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>माझे Page</title>
</head>
<body>
<!-- इथे visible content येतो -->
<h1>नमस्कार मराठी Tech!</h1>
<p>हे माझे पहिले HTML page आहे.</p>
</body>
</html>प्रत्येक भागाचे काम
- ▸<!DOCTYPE html> — Browser ला सांगतो की हे HTML5 document आहे. हे सगळ्यात पहिले असणे mandatory आहे.
- ▸<html lang="mr"> — सगळा page content या tag मध्ये असतो. lang="mr" म्हणजे भाषा मराठी — SEO साठी important.
- ▸<head> — Page बद्दलची माहिती असते (title, meta tags, CSS links). हे screen वर दिसत नाही.
- ▸<meta charset="UTF-8"> — Page मराठी/हिंदी characters योग्य दाखवण्यासाठी.
- ▸<title> — Browser tab मध्ये जे नाव दिसते ते.
- ▸<body> — हे screen वर दिसते. सगळा visible content — headings, paragraphs, images, buttons — इथे असतो.
Marathi Analogy
✉️ Analogy: Letter पाठवताना To, From, Subject लिहितो (head सारखे — info) आणि मग actual letter content (body सारखे — visible).
Typical Example — Browser मध्ये दिसणारे
html
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>हे एक heading आहे</h1>
<p>हा एक paragraph आहे.</p>
<p>हा दुसरा paragraph आहे.</p>
</body>
</html>💡
VS Code मध्ये नवीन .html file उघडा, फक्त "!" टाइप करा आणि Tab दाबा — पूर्ण boilerplate structure automatically येते! हे Emmet shortcut आहे.
✅ Key Points — लक्षात ठेवा
- ▸<!DOCTYPE html> — HTML5 declaration, page च्या सगळ्यात वर
- ▸<html> — root element, सगळा content यात
- ▸<head> — metadata, title, CSS links — screen वर दिसत नाही
- ▸<body> — सगळा visible content इथे
- ▸lang="mr" — screen readers + SEO साठी भाषा सांगणे
0/13 chapters पूर्ण