HTML Tutorial for Beginners 14 - ID's and Classes

Oh people I'm Shawn from the net ninja and this is HTML basics lesson 14 IDs and classes so what are IDs and classes well they're quite similar but they've got a very distinct difference and that is that ID is a unique identifier issues once in the whole page to describe one section of content for example the header of that page or maybe the About section at the bottom that's a page the important thing is that we use an ID once on a page to kind of represent represent one area of that page a class on the other hand slightly different in that it's an identifier of an element which can be used multiple times on one page so say for example we have a page with a load of comments at the bottom now an element which wraps all of these comments or wraps each one of these comments may have a class of comment so it gives it that identifier it gives each comment and identifier of comments but because it's a class it can be used multiple times if there's five comments or six or seven or thirty comments okay so when there's just one thing of an element like header that we'd use an ID maybe if we're going to use the element over and over again in that page then we'd use a class so that's the main difference now they can both be used with JavaScript and CSS we can use them in the CSS as hooks so we can say if we had a CSS document we could say okay going to the HTML file and find all the elements with a class of comments and we're going to style them in the CSS this way so they all look the same if it's an ID we can still use that in the CSS the CSS file will say okay find the section of the document with an ID of header and we're going to position this in a certain way on the web page so they can both be used with CSS and likewise both be used with JavaScript and we're going to cover a little bit of JavaScript and CSS in this course however a will be doing full courses on CSS basics and JavaScript basics later on so we're going to dive into the coke now and we're going to try practicing with these IDs and classes alright here I am back in the cold and if you remember last time we added all these developments which remember divided the page up into specific divisions or specific kind of sections of the website so we've got some here above the header with the banner sorry not the header the navigation and then we've got a div tag enclosing the header here and a div over the types of fish we sell and so forth down the page so we're going to start giving these some IDs in classes so the first one which is the the top here which contains the banner and the welcome text I'd say that's a pretty good contender for a header of the web page so we're going to give that an ID because there's only one header on this page of header and that's how we write is just an attribute called ID and then remember attributes the attribute name equals the double quotes and then the value of the attribute so we're saying the value here is header so we're giving this section of the content this element here the div tag an ID of header all right likewise we're going to give the navigation area an ID of navigation and then we'll move down to this bit here types of fish we sell and I'll say ID because there's only one of these again one of these sections types of fish now I've used multiple words for the ID which is fine different developers have different ways of attacking this I like to put a hyphen between each word now a lot of developers like to do something called camel cage which is where do you write the first word and then you do a capital word that capital letter for the beginning of every subsequent word so that would be typed capsule o off and then capital F for fish so it'd be like that that would become a case personally I prefer the hyphenated rule purely because I think it's more readable so I can look at this and I can tell it says types of fish easier than a camel case types of fish would however doesn't make a difference entirely your choice so we've done that then the next part is this so I'm going to give that an ID there's only one about with section on the page and I'm going to say about source for the ID of that and then the contact was methods here I'm gonna give that an ID as well and I'm gonna call that contact us so that's pretty much it for the IDS no on this page there's not really anything I'd give a class at a pinch I'd give these contact methods a class each different contact method phone email or carry pigeon they've each got a h3 and a P tag now if I wanted to and I've done this already and I've added div tags around each different contact method at a pinch I would probably add a class to these so the way we do this is say class for the attribute and then give it a class name and I'll call this a contact method so there's multiple classes there's multiple contact methods so we can remember a class can be used more than once on a page so we're going to give each enclosure dick div tag a class of contact method and I've just copied and pasted it done on each tier so I mean that's all there is to it this isn't going to have any kind of visual impact yet this is like I say just a way of kind of describing the content so it's good for semantic reasons and it's a way that we can hook into the HTML document via CSS and JavaScript and we can use these classes and ID's to give certain styles or JavaScript scripts to each Alvin and we'll go off quickly JavaScript and CSS probably in the next video a little bit so I'm going to give one more example of how we use classes to make it a little bit more clear and to do that I've made a new page here called classes HTML on the left so I'm going to open this up and all this is is like a comments page so if someone wanted to give me a comment about how smelly my fish are they can do that here so I've got multiple comments on this page and you can see here I've got a title P tag and then we've got a surrounding div tag that encloses all the comments and then around each comment we've got another div tag as well so for the surrounding comment here the surrounding div tag there's only one of these that surrounds the whole section of comments so we can give this an ID we can say the idea of this would be comments okay because there's only one section that encloses all the comments and inside we have multiple comments so we can give one of these each one of these div tags at class because there's multiple of them and we'll call it single - comment and we can copy and paste that onto each div tag and there we go we've got our ID and our classes so that's all there is to it in the next lesson I'm going to go into how we can use the classes and ID's in CSS and subsequently after that we're going to go into how we can use them in the JavaScript as well so if you have any questions remember just comment below I'll answer them and don't forget to subscribe I'll see you guys in the next lesson

Channel: The Net Ninja

Views: 57,056

Keywords: html basics, html tutorial, html id, html classes, id, class, classes, id's and classes, html lesson, html basics lesson, html basics tutorial, html tutorial for beginners, html lesson for beginners, ids in html, classes in html, html class, class vs id, classes vs ids, HTML (Programming Language), Web Design (Interest), classes and id differences

Id: 9UNmumTYuq8

Length: 8min 13sec (493 seconds)

Published: Tue May 05 2015