Just to start off: class names have absolutely zero impact on anything to do with SEO.
1) While generally this comes down to personal preference, I'd argue that the majority of the industry would use dashes some-class-name over any of the other options.
2) It depends on what the generic term is. If you named something column-a, I'd say that's too generic. What is the content inside? Even something like main-content while looking generic has a better indication of what it contains.
Class names are still very important for development, but yes, the actually tags themselves are what have a real effect, especially if we're talking about SEO.
ID's and "role" play a part as well, I'm still figuring out aria, but semantically always say exactly what you mean and you'll be safe.
For example, header, nav, footer are all pretty self explanatory.
However, with article, sections, divs etc - ID comes into play.
So for example, id="main-content", id="sub-content", id="sidebar", id="sub-navigation".
The best way to approach semantic code is thinking "Would someone understand how these elements relate to eachother if they were just reading the code alone? If the answer is no, or it's too complex, or the content is not being described then you need to look again.
@andy_unleash You should try and avoid using IDs for styling hooks, as they can really mess with specificity. There is nothing wrong with only using classes for styling, and using IDs for JavaScript.
@Joshuanhibbert - I don't use ID's for styling - if I do it's extremely rarely. I was suggesting he use ID's for semantic meaning for DIVs, sections etc rather than styling.
@joshuanhibbert Perhaps not semantic in the strict terms of HTML semantics, but semantic in the terms of someone reading the code and being able to understand and explore it's meaning.
What's more obvious div or div id="main-content" ?
I dont ever style ID's either. I normally attempt to make a class for the style rather then styling the element (in case i need to add a different element later on). My primary use for ID's is in use with JS.
@andy_unleash What @TheDoc said above is exactly what I would use. You are going to need to name your class something that makes sense to style that element, so why not kill two birds with one stone?
In theory though a class is ultimately used for something that is going to repeat, whereas an ID is non-repeating, therefore doesn't it make sense to use an ID in this situation?
@andy_unleash That just means you have to be smart about how you write your CSS, which is a good thing. Also, there is nothing wrong for using classes for something that doesn't repeat.
@andy_unleash Perhaps using a comment might work just as well? At least that way you avoid the confusion of having an ID that isn't being used for anything.
Howdy folks,
In programming (java / c#, etc) every class, object, etc i give a name too DEPENDING on what it does i go with ALL CAPS,camelCase, or PascalCase.
1.) Does this ever matter with naming your classes in html?
Also, when i name things, i always try to name them on exactly what it is doing. But im trying to get more into the SEO side of things for web pages.
2.) If there is something that i cannot think of a name for and i give it a generic name, will that hurt me?
When naming these classes (in html/css) i always use under_scores (if its more then one word) because i'm just used to it from different languages.
3.) Would that hurt as well?
If y'all have any good reading or personal insight on this lemme know please.
Just to start off: class names have absolutely zero impact on anything to do with SEO.
1) While generally this comes down to personal preference, I'd argue that the majority of the industry would use dashes
some-class-nameover any of the other options.2) It depends on what the generic term is. If you named something
column-a, I'd say that's too generic. What is the content inside? Even something likemain-contentwhile looking generic has a better indication of what it contains.3) See #1,
hyphens-rule@TheDoc
So the only thing really semantically here are using tags properly? Such as section, aside, etc. ?
Class names are still very important for development, but yes, the actually tags themselves are what have a real effect, especially if we're talking about SEO.
ID's and "role" play a part as well, I'm still figuring out aria, but semantically always say exactly what you mean and you'll be safe.
For example, header, nav, footer are all pretty self explanatory.
However, with article, sections, divs etc - ID comes into play.
So for example, id="main-content", id="sub-content", id="sidebar", id="sub-navigation".
The best way to approach semantic code is thinking "Would someone understand how these elements relate to eachother if they were just reading the code alone? If the answer is no, or it's too complex, or the content is not being described then you need to look again.
@TheDoc, thanks for confirming.
@andy_unleash, thanks. The part at the end makes the most sense.
Thanks gents!
@andy_unleash You should try and avoid using IDs for styling hooks, as they can really mess with specificity. There is nothing wrong with only using classes for styling, and using IDs for JavaScript.
@Joshuanhibbert - I don't use ID's for styling - if I do it's extremely rarely. I was suggesting he use ID's for semantic meaning for DIVs, sections etc rather than styling.
@andy_unleash I'm not sure I understand what you mean? IDs carry no semantic meaning at all.
@joshuanhibbert Perhaps not semantic in the strict terms of HTML semantics, but semantic in the terms of someone reading the code and being able to understand and explore it's meaning.
What's more obvious div or div id="main-content" ?
I think what Josh is saying is that you'd have
<div class="main-content">.I dont ever style ID's either. I normally attempt to make a class for the style rather then styling the element (in case i need to add a different element later on). My primary use for ID's is in use with JS.
@andy_unleash What @TheDoc said above is exactly what I would use. You are going to need to name your class something that makes sense to style that element, so why not kill two birds with one stone?
In theory though a class is ultimately used for something that is going to repeat, whereas an ID is non-repeating, therefore doesn't it make sense to use an ID in this situation?
That particular element might not repeat, but the things inside of it mights.
So it gets a bit tricky if you accidentally do something like
@andy_unleash That just means you have to be smart about how you write your CSS, which is a good thing. Also, there is nothing wrong for using classes for something that doesn't repeat.
True, but on occasion I use an ID to explain & describe the content of a container, but very very rarely use them for styling purposes.
Usually it's just like div#main-content and div#sub-content
Within those I commonly have a sprinkling of classes, but in my CSS I don't have them nested.
@andy_unleash Perhaps using a comment might work just as well? At least that way you avoid the confusion of having an ID that isn't being used for anything.