What are Default Properties of HTML Elements? | Lesson 5

In this class we will understand What are Default Properties of HTML Elements?

IN THIS CLASS:
00:00 - Introduction
00:16 - Simple HTML File
01:00 - Web Developer Tool
01:50 - Box Model

IMPORTANT LINKS:
Wisdomers Learning Agent Link: https://www.wisdomers.in

--
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).
--:
DETAILED DESCRIPTION:
Today, we are going to explore one of the most important concepts in web development: the default properties of HTML elements. Understanding this simple idea is what helps a beginner start thinking like a true architect. Let's dive right in with a simple HTML file!
In this file, we have a paragraph element and six heading elements, from H1 to H6. Let’s run this and see how it looks in the browser. Notice the spacing and font sizes? They look clean and well-structured, giving the text plenty of breathing room. Our paragraph and headings are nicely spaced out and clearly defined.
So, who made it look like this? These are the default properties built right into the browser, based on the W3C standards. The W3C is a web consortium that creates these rules, and browser developers like Google and Apple have to follow them. Now, you might be wondering: exactly how much space or what font sizes do these elements get by default? And can we see those exact numbers? The answer is a definitive YES!. To discover the hidden properties of any element on a web page, simply right-click anywhere on the page and select 'Inspect' usually found at the very bottom of the menu. This opens up the Developer Console, a super powerful tool that helps us understand the physical properties of our web page. By default, the console often pops up at the bottom, but you can move it! Just click on the three dots and choose if you want it in a new window, on the left, or on the right. I'm going to dock mine on the right side so it's easier to see.
Inside this console, the 'Elements' tab will be open. We will explore all the other tabs later in the course, but for now, notice that the Elements tab shows you the complete HTML code of your webpage. Right below that, you'll see a rectangular box showing the physical properties of whatever element you select. Every element has three main physical properties: Padding, Border, and Margin. Don't worry about what they mean just yet just remember those three words for now! Let's see this in action! Go to the Elements tab and click on our paragraph element. See that blue highlight? That shows the exact size of our paragraph in pixels. We can also see that it currently has no padding and no border, but it does have a margin of 16 pixels. If I hover my mouse over the margin property in the console, it actually highlights that exact space on the web page itself!
So, these are the physical, default properties of HTML elements. The big question is: As a developer, can I change these defaults? Absolutely! We'll show you exactly how to do that in upcoming classes. Next class, we'll start by downloading and installing Visual Studio Code, an essential tool for every developer.

Видео What are Default Properties of HTML Elements? | Lesson 5 канала Wisdomers - Digital Product Architect