HTML Tutorial — Elements (2/11)
HTML Tutorial — Elements (2/11) https://www.colorcode.io/course/html-basics/elements Every HTML page is made up of these things called elements, or tags or nodes. They’re all referring to the same thing. Pretty much. Which are these building blocks that you put together to create an HTML page. That simple. They’re like bricks you put on top of each other to build a wall. But don’t... build a wall, cuz that’s stupid. Look at GQ, or pretty much any other page on the internet. THIS. is a block, so is this, so is this. Pretty soon you’ll start to notice clear separations between different pieces of a page. Chances are those are built using separate HTML elements. There are a lot of different kinds of elements. So the first one I wanna show you is the P tag. Paragraph. It’s used as a building block to create a paragraph. All elements are created the same way. You do a left arrow and then a right arrow and put your tag name in between. P. This is called your opening tag. You also need a closing tag which is exactly the same as the opening tag with an extra slash. Like this /p. So you end up with an opening tag, and a closing tag. Anything you put between these becomes a paragraph. Becomes the thing that the browser will actually show to the end user. So the same way we added text inside your element, you can also include elements inside other elements but we’ll get to that later. So a couple of things: Do not forget to close your tags. When you open it, you close it. Needless to say, when you open it using h1 you need to close it using h1 as well. So the opening and closing need to match. Also, the tag name is not case sensitive, which means it can be H1, but no one really does that so try to be consistent, keep it to lowercase. These are some of the tags that are available to you: p for paragraphs h1,2,3,4,5,6 for Headings from big to small a anchor tags for links from page to page button button tag will create a button for you ul unordered lists ol aaaaand ordered lists li list items img images video video audio audio div span for layouts and containers header footer nav for navigation menus script, style and link to load JavaScript and CSS into your page There’s even more and I will walk you through some of them. But that’s pretty much what HTML tags are. I think we’re getting somewhere. Stick around, it’s only starting to get cool.
HTML Tutorial — Elements (2/11) https://www.colorcode.io/course/html-basics/elements Every HTML page is made up of these things called elements, or tags or nodes. They’re all referring to the same thing. Pretty much. Which are these building blocks that you put together to create an HTML page. That simple. They’re like bricks you put on top of each other to build a wall. But don’t... build a wall, cuz that’s stupid. Look at GQ, or pretty much any other page on the internet. THIS. is a block, so is this, so is this. Pretty soon you’ll start to notice clear separations between different pieces of a page. Chances are those are built using separate HTML elements. There are a lot of different kinds of elements. So the first one I wanna show you is the P tag. Paragraph. It’s used as a building block to create a paragraph. All elements are created the same way. You do a left arrow and then a right arrow and put your tag name in between. P. This is called your opening tag. You also need a closing tag which is exactly the same as the opening tag with an extra slash. Like this /p. So you end up with an opening tag, and a closing tag. Anything you put between these becomes a paragraph. Becomes the thing that the browser will actually show to the end user. So the same way we added text inside your element, you can also include elements inside other elements but we’ll get to that later. So a couple of things: Do not forget to close your tags. When you open it, you close it. Needless to say, when you open it using h1 you need to close it using h1 as well. So the opening and closing need to match. Also, the tag name is not case sensitive, which means it can be H1, but no one really does that so try to be consistent, keep it to lowercase. These are some of the tags that are available to you: p for paragraphs h1,2,3,4,5,6 for Headings from big to small a anchor tags for links from page to page button button tag will create a button for you ul unordered lists ol aaaaand ordered lists li list items img images video video audio audio div span for layouts and containers header footer nav for navigation menus script, style and link to load JavaScript and CSS into your page There’s even more and I will walk you through some of them. But that’s pretty much what HTML tags are. I think we’re getting somewhere. Stick around, it’s only starting to get cool.