patternhtmlMinor
Simple website HTML
Viewed 0 times
websitesimplehtml
Problem
I'm not really sure if I'm using id's and classes correctly. I'm unaware as well if I'm doing bad practices and I would like some help with that. I'm pretty sure my id's and classes names are terrible but I kinda don't know what to use.
I've been doing some research on the web and downloaded some HTML5 templates so I could see their code. So I'm kinda trying to copy their indentation structure, id's and classes names and things like that. It seems to me that people are using id's for the main containers (like sections, headers) and using classes on smaller ones and on main containers if necessary. Is that correct?
```
Title
Home
About us
Products
Blog
Blog
Contact
Donate
Lorem ipsum dolor?
Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Morbi ipsum lectus, lobortis vitae mi vel, cursus efficitur nisl.
Register now
Lorem ipsum dolor.
Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Morbi ipsum lectus, lobortis vitae mi vel, cursus efficitur nisl.
Learn more
Featured Content
Quisque consequat tellus enim.
Aliquam eget ex
I've been doing some research on the web and downloaded some HTML5 templates so I could see their code. So I'm kinda trying to copy their indentation structure, id's and classes names and things like that. It seems to me that people are using id's for the main containers (like sections, headers) and using classes on smaller ones and on main containers if necessary. Is that correct?
```
Title
Home
About us
Products
Blog
Blog
Contact
Donate
Lorem ipsum dolor?
Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Morbi ipsum lectus, lobortis vitae mi vel, cursus efficitur nisl.
Register now
Lorem ipsum dolor.
Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Morbi ipsum lectus, lobortis vitae mi vel, cursus efficitur nisl.
Learn more
Featured Content
Quisque consequat tellus enim.
Aliquam eget ex
Solution
This is my personal advice.
-
When it comes do ID's and Classes, ID's should only be used on things that will ever be used once, this can be hard to know if something only will be used once since a lot might happen during future development. So to make it simple - when working with HTML and CSS only use classes. And leave the ID's to be used when you/someone else writes the JavaScript for the website and needs to target specific elements.
-
You are indenting your code a lot. Remember that not all of the code needs to be indented, but it is considered good practice to indent nested elements. For example, you could skip indent most of the things within the head-tag but it is good to indent things like nested divs or list-items.
-
I would say you overuse comments to some degree. Comments are good, but no need to comment obvious things, in your case the navigation for example.
-
If you want to better understand CSS and how to use classes, then take a look at Sass and OOCSS, if you master these then they will help you write DRY CSS; when you understand how to write DRY css you will also know how classes should be used. OOCSS will also help you get a good idea about naming. OOCSS is a so called naming convention and you can search SO or Google to find more information about naming convention, BEM for example is example of another. But might be good to start with OOCSS since this one will help you to learn the structure of classes.
Edit: Here you can read about some more examples about whats considered beautiful HTML. Remember that all of this is opinion based and there it really no standard. It mostly about what you and the general developer thinks looks good. For example you can read here about what WordPress.org consider as good HTML.
-
When it comes do ID's and Classes, ID's should only be used on things that will ever be used once, this can be hard to know if something only will be used once since a lot might happen during future development. So to make it simple - when working with HTML and CSS only use classes. And leave the ID's to be used when you/someone else writes the JavaScript for the website and needs to target specific elements.
-
You are indenting your code a lot. Remember that not all of the code needs to be indented, but it is considered good practice to indent nested elements. For example, you could skip indent most of the things within the head-tag but it is good to indent things like nested divs or list-items.
-
I would say you overuse comments to some degree. Comments are good, but no need to comment obvious things, in your case the navigation for example.
-
If you want to better understand CSS and how to use classes, then take a look at Sass and OOCSS, if you master these then they will help you write DRY CSS; when you understand how to write DRY css you will also know how classes should be used. OOCSS will also help you get a good idea about naming. OOCSS is a so called naming convention and you can search SO or Google to find more information about naming convention, BEM for example is example of another. But might be good to start with OOCSS since this one will help you to learn the structure of classes.
Edit: Here you can read about some more examples about whats considered beautiful HTML. Remember that all of this is opinion based and there it really no standard. It mostly about what you and the general developer thinks looks good. For example you can read here about what WordPress.org consider as good HTML.
Context
StackExchange Code Review Q#135983, answer score: 6
Revisions (0)
No revisions yet.