Hey!
In this post, we’re going to be talking about a pretty big thing in HTML. Earlier, we discussed how to make simple HTML structures. These are more or less like little cars, which are easier to build. Now, we go on to bigger and fancier ones—the BMWs and Porsches. Well, actually, it is not as daunting as that sounds. By the end of this, you should be capable of making more complex HTML layouts. Without proper knowledge of HTML layout, building a decent website is hard; therefore, let’s get right into examples.
Before we start, we will have to talk about something important: IDs and Classes in HTML. These are super important when it comes to designing a website. You use them a lot once you start working on websites.
Think about building a car: every part of the car has some sort of name, right? From the brakes all the way to the engine to the tires, everything has something. It’s really no different than building a website. You’ve got things like a header and a footer, and you’re going to want to give them a name, and that’s where the IDs and classes come in.
But for now, we’re going to be able to get by relatively simply. We’ll have a whole heck of a lot more to say to that, though, when we talk about CSS.
What is an ID? ID means identity, a name you give to an element on your web page. And just like in a car, where you have one steering wheel, you can only use one of them on a page. An ID is helpful because it gets things straight. You could say, “Well, this is the header,” or “This is the main image.” Just remember, it’s one ID per page for each element.
Which is used in HTML like this: id=””
Class: A class is a name that can be applied to more than one thing on your website and then reutilized. For example, if there are objects on a car that are similar, such as seats or wheels, you can group them by assigning them all one class. Classes let you handle things that share similar style or structure. You can name your class whatever you want-just like giving a nickname to your favorite things.
You apply it in HTML like this: class=””
In A Nutshell ID = A special name for something that is unique on the page (you can only use this once). Class = A name you can reuse on lots of similar things. That’s all there is to it! Now that you know what IDs and classes are, let’s jump into some examples.
To be continue….