Understand the foundational structure of HTML, including how elements like headings, paragraphs, and divisions are used to build web page content. Learn how tags, nesting, and the concept of parent and child elements influence layout and formatting in web development.
Key Insights
- HTML elements such as H1 through H6, P, DIV, and SPAN form the basic structure of web pages, with each tag serving a specific formatting or organizational purpose.
- Understanding the concept of parent and child relationships is essential—text enclosed in an H1 tag is a child of that tag, while the H1 itself can be a child of a DIV, allowing for nested structures.
- Noble Desktop explains that while memorizing HTML tags is not required initially, repeated use will lead to familiarity, and tools like browser inspect features (e.g., Chrome DevTools) can help visualize element structure directly.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
This is not an HTML course, but it's worth taking a quick, quick run-through of the concepts of HTML and why it is that we output it exactly the way we did and what the HTML that we'll be using a little later. So HTML, the hypertext markup language, is the standard markup language for documents designed to be displayed in a web browser. And it can be changed and worked with CSS and JavaScript.
Now, again, we don't have to deeply understand HTML, but we should start to get familiar with some of the basic elements and sort of the concept of HTML elements. So HTML elements are the building blocks of HTML pages. Let's see the one we just created.
If we right-click in our browser, this is how it works in Chrome. It might be slightly different in other browsers. You ideally should be using Chrome because it is the browser that most users are using.
The majority of people are using Chrome. Right-click on it and choose Inspect. When you do that, you get HTML.
Now, there's an H1 welcome to Dash. The text we gave to our app was put in what's called an H1. When I say in, I mean really in, like there's an H1 to the left of it, there's an H1 to the right of it, and it's in the middle.
And that's because we actually told it exactly to do that. We said put it in an H1, in an HTML H1. Now, this H1, all these tags start with this bracketed part called an opening tag.
It's got a left angle bracket and a right angle bracket, otherwise known as a less than and greater than sign. But angle brackets is what we call them in HTML, or just brackets sometimes. We have this bracket, H1 bracket.
That's the opening tag. It says, hey, everything to the right of this is an H1. And then we have our text.
And then we have a closing bracket. It still has the closing tag. It still has the angle brackets, but it has slash H1, which means H1 ends here.
Now, what is an H1? It's a level one heading. If you see a site with headings, they'll usually be different sizes. You'll have a top level heading, then you'll have subheadings and sub-subheadings.
Those might be H2s or H3s. But we said H1, and therefore it's the, when we did that, it created a heading and it put it on our page, and therefore the word, the message, the string we put in there was put in bold and large font. Now, very important thing to understand here that we'll dive into more as we go is children, the idea of children.
This string, welcome to Dash, is actually a child of the H1 tag. It belongs in the H1 tag. It's got a opening and closing around it.
But the H1 itself is also a child. It's a child of this div tag. And we use divs more as we go on.
But a div is just a division, just an area of our page. In this, it's our main Dash area called Dash app content. And this div starts here.
Div and some other stuff that we'll get into and a angle bracket, and then a closing div, angle bracket slash div. The H1 belongs in the div. It's a child of the div.
And the welcome to Dash string is a child of the H1. So this children idea is something that we'll be utilizing as we go. Let's talk a little bit about some other tags we could do.
Instead of HTML.H1, we could do HTML.P. And with Dash, they're all capital letters, but generally they're not written that way outside of Dash. If I save this, it reloads. And now you see it's a paragraph, welcome to Dash.
P is for paragraph. And you can see the text has gotten a lot smaller. It's now your standard 16 point font.
And it's not bold anymore either. Now if we want to, we can go halfway between. We can make it maybe an H4, capitalized.
Save our file and switch back. And there it is. Now it's a little bit bigger.
I don't know, maybe it's 18 point and it's bolded. It's just a small heading, a sub, sub, sub heading, H4. There are lots of other tags.
You do not have to memorize these. I'm gonna write them down just to show you some of the basic ones. But you don't have to memorize these.
You don't need to know all the HTML elements. You'll explore them as we go. And if you ever are like, hey, what is the paragraph tag again? You can look that up.
It doesn't need to take a place in your head until you've used it often enough that it's like, yeah, of course, it's the P tag. You'll have it memorized at some point. But you do not have to have it memorized right now.
I wanna stress that. All right, so we have H1 through H6 headings. We have P for a paragraph.
We have div for division and area. We have span. That is a section of text within a paragraph.