Welcome back to code isn't as scary as zombies are, we're going to take a look at what HTML is and why zombies hate it so much. First of all, what is HTML? It's a programming language. But it really rather than providing so much programming or processing, it provides structure to documents. So I can think of it as the skeleton of your page or the skeleton of your of your website page. And it allows you to build out the page and have different types of flash and different types of colors and all those sorts of things that go into a website page, but it has to sort of hang on something.

And HTML is that hang point. It provides information about the content of the document. Now there's about four parts to an HTML element, a single unit of HTML, four pieces, opening tag attributes, content, and a closing tag to the portfolio opening tag uses angle brackets less than greater than signs to set off the tag. So it starts with a less than sign, and the tag itself ends with a greater than sign and for example, Paragraph opening tag looks like this. That's an opening paragraph tag. You probably already saw that in the last video when I was demonstrating could condense it out.

But this is an opening paragraph tag. Next we have attributes. This is something we'll get to a little bit more later, but just want to introduce it here. So they are things about the tags that come right after the name of the opening tag. And before it's closing angle bracket. So they're used for additional information identification or options, sort of gives some other ways to use tags or helps the browser know what, how this particular tag is being used.

The class attribute helps us particular when we get to CSS, it defines a group of elements type of HTML content, it doesn't have to be the same element in particular, but it could be sort of a class of elements that act the same way or do the same sort of thing or have the same sort of aspect. You know, could be all of these have read text or all of these Have a certain setting of margin between them, something like that, it really could be just about anything. And when you're adding a class to an element, this is how it goes. So it's the opening tag of the p tag. And then before the closing angle bracket, we have class equals, and then learning in quotation marks. So hopefully you're not learning in, quote, unquote, potential.

But the class has a value of learning. And there could be multiple HTML elements on the page that have that class, there are a lot of other attributes that we can use. And we'll talk more about those a little bit later. Now, the third thing, or third piece of an HTML element is probably the most important. It's the actual content. It's the information that goes inside.

It's between the opening and closing tags. Often this is text but it could also be other elements, often is also other elements as well. Some elements will have limitations that they can't be inside other elements depends upon the particular job that the element is doing and what is appropriate. It. So some elements just can't exist within site other elements, that elements only exist within other elements. So it really just depends on the particular element that you're working with is also pretty forgiving.

Even if we totally mess it up, the browser sort of just tries its best to do what it thinks it should. Often it's, it does a good job. So sometimes that's good in that it won't fail miserably. It's bad though, if one browser does not allow it to fail, but the other one does, and you don't test in that browser. So having good code is the best option for consistent previews of pages across multiple browsers. closing tag looks a lot like the opening tag except has a slash in front of it.

So for the paragraph tag is a slash P. Some tags are what's called void tags and do not have a closing tag. Notably, these are image break and HR or horizontal rule. So IMG BR and HR. These are the main ones that we'll probably be talking about within this course. But there are a few More than that as well. But most tags have a closing tag.

And usually the only reason they don't have a closing tag is because the content of the tag sort of resides in the opening tag rather than having something in between it. So for instance, an image, you will get there eventually, but you'll have like a source attribute that will tell you where the image can be found. And then it just shows it. So that didn't make sense to necessarily have an opening and closing tag for images. So here's the paragraph tag example. So bringing in an attribute, as well as opening closing tags and content.

So we have started with a p tag with a class of learning. We're killing zombies is fun, that's our content and then slash P is our closing tag, nesting. Another important thing about HTML tags is to make sure that you have opening closing tags nested properly. So for instance, this is incorrect. So you have tag one and tag to both opened and then slash tag one. So tag one is closed, before tag two is closed.

So that's incorrect. The correct way to do this to properly nested will Have tag one open and then tag to open and close tag two and close tag one. Now these are, of course not actual HTML tags. They're just an example to show nesting easily. So zombie families, one of the important things about nesting is we're going to call families. So if element a is completely enclosed by LNP, then A is said to be a child of B, and B is a parent of a.

So you can have children and grandchildren. And a lot of times, particularly when we get to CSS, we'll be talking about a lot about these relationships. But if one element closes another, the first element is the parent and the enclosed element is the child. So for instance, we have zombies have no family. I, the italics tag, which we'll get to soon is a child of the p tag.