What are Default Properties of HTML Elements हिंदी में | Lesson 5 |

In this class we will be understanding What are Default Properties of HTML Elements in Hindi?

IN THIS CLASS:
00:00 - Introduction
00:21 - Simple HTML File
01:34 - Web Developer Tool
02:26 - Box Model

IMPORTANT LINKS:
Wisdomers Learning Agent Link: https://www.wisdomers.in
Complete Course Playlist: https://www.youtube.com/playlist?list=PLHvqNyRWbeV2ZPIAutaFNjUM83nboAbC0

--
ABOUT THIS COURSE:
This course is part of The Digital Product Architecture Specialization. This Channel Digital Product Architect is the masterclass for developers who want to design, build, and operate scalable digital products. In this specialization this course HTML 5 and CSS 3 is to master the architecture of the Presentation Layer. The student will learn to architect a robust, scalable, and meaningful foundation for a digital product, thinking in terms of semantic blueprints (HTML) and scalable design systems (Advanced CSS).
--

LESSON SUMMARY:
What are Default Properties?
HTML elements (like paragraphs and headings) automatically come with pre-defined styles, such as font size, boldness, and spacing, even when you haven't written any styling code.
These built-in styles provide structure and "breathing room" for elements.
They are standardized globally by the W3C (World Wide Web Consortium), and all major browser developers (like Google and Apple) must follow these rules.
How to View Default Properties:
You can see the exact hidden numbers behind these default properties using the browser's Developer Tools.
Right-click anywhere on the webpage and select "Inspect".
This opens the developer console (which can be docked to the right, left, or bottom of your screen).
Go to the Elements tab, which displays the page's HTML code.
Understanding Physical Properties (The Box Model):
When you click on an element within the Elements tab (like a p tag), a visual rectangular box appears showing its exact physical properties.
This box consists of three main areas: Padding, Border, and Margin.
Example: By inspecting a standard Paragraph (p) element, you will see it has a default Margin of 16 pixels. Hovering over the word "margin" in the console highlights this exact 16-pixel spacing visually on the actual webpage.
Key Takeaway:
As a developer, you have the power to completely change or override these default properties to suit your design.
(Note: The next class will focus on downloading and installing Visual Studio Code to help you write and edit code more efficiently).

इस class में हम Web Development के सबसे ज़रूरी concepts में से एक को समझेंगे: 'Default Properties of HTML Elements'. यह वो खास concept है जो एक beginner के mindset को बदलकर, उसे एक Architect की तरह सोचना सिखाता है.
चलिए screen पर दिख रही इस simple HTML file से शुरुआत करते हैं. इसमें हमारे पास एक Paragraph Element और H1 से H6 तक छह Heading Elements हैं. अब इस file को run करते हैं और browser में output को ध्यान से देखते हैं.
अगर हम गौर से देखें, तो इन elements के बीच का space और इनका font size पहले से ही well-defined है. ध्यान दीजिये कि paragraph element के आस-पास काफी 'breathing room' (खाली जगह) है. यह देखने में बहुत clear और well-structured लग रहा है. इसी तरह, heading elements भी अपने आप bold, अच्छे space वाले, और अलग-अलग size के हैं.
लेकिन यह मुमकिन कैसे हुआ? हमने तो कोई styling code नहीं लिखा! इन्हें 'Default Properties' कहा जाता है. ये browser में पहले से ही in-built होती हैं. W3C (World Wide Web Consortium) जैसी संस्थाएं इन global standards को तय करती हैं, और Google, Apple जैसे browser developers को इन्हें ज़रूर follow करना होता है. अब एक Architect के नाते आपके दिमाग में तुरंत एक सवाल आना चाहिए: आखिर default रूप से कितना space allocate किया गया है? इनका exact default font size क्या है? क्या हम इन छुपे हुए numbers को देख सकते हैं? इसका जवाब है: (YES) बिलकुल देख सकते हैं .
इन hidden properties को देखने के लिए, web page पर कहीं भी right-click करें और 'Inspect' पर क्लिक करें. यह option आपको आमतौर पर menu में सबसे नीचे मिलेगा. इसे क्लिक करते ही, एक developer console pop-up हो जाएगा. हमारी screen पर मौजूद हर element की physical properties को समझने के लिए जितने भी tools चाहिए, वो सब इस console में मौजूद हैं. आमतौर पर यह console browser के नीचे वाले हिस्से (bottom) में खुलता है. लेकिन हम इसे आसानी से move कर सकते हैं. बस console menu में मौजूद इन तीन डॉट्स (three dots) पर क्लिक करें. यहाँ से हम इसे right, left, या एक अलग window में dock करने का option चुन सकते हैं. इस lesson में बेहतर visibility के लिए, मैं इसे screen के right side में dock कर रहा हूँ. इस console के अंदर, आमतौर पर 'Elements' tab default रूप से open रहता है. यहाँ और भी कई tabs हैं, जिन्हें हम course में आगे explore करेंगे. लेकिन अभी के लिए Elements tab को देखिये. यह हमारे page का पूरा HTML code दिखाता है.
इस code के नीचे या बगल में, आपको एक visual rectangular box दिखाई देगा. यह box select किये गए element की physical properties दिखाता है. यहाँ तीन ख़ास शब्दों पर ध्यान दें: Padding, Border, और Margin. हम future में बात करेंगे कि ये क्या करते हैं, लेकिन अभी के लिए बस इन तीन नामों को याद रखें.

Видео What are Default Properties of HTML Elements हिंदी में | Lesson 5 | канала Wisdomers - Digital Product Architect Hindi