Is there a document that I could reference every time I’m in doubt about semantics when coding HTML and CSS?
The reason for the question is because I’m always debating if the way I think it needs to be is semantically correct.
Thanks
My go-to reference is the SitePoint Reference. I find it really handy:
It covers HTML, CSS and even JS.
I agree, I use this reference a lot but I was thinking about something that could tell you something like… never use a p tag inside an H1 tag or something like that.
I guess I’m wishing for something I should learn by trial and error, or perhaps read more about the topic.
Thanks
Well, there is the official documentation for each language, of course. 
(Not that it’s much fun trying to wade through all that stuff! It’s like the proverbial Cone of Silence to me.)
This is a handy HTML reference that I found out about recently in another post: HTML 4 Elements
It gives a fair bit of info on how each element can be used.
(Replying to fs_tigre)
Laid out as a “do this, don’t do this” list, it would probably end up being longer than the reference works, since there are so many permutations and combinations.
BTW, I think you’re confusing “syntax” with “semantics.”
Proper syntax refers to using language elements in the right sequence, combined in correct ways.
In the HMTL context, “semantic” refers to whether something has “meaning,” or whether it’s just applied for styling purposes. So, an <li> tag has a meaning - it says, “This is a list item.” An <h1> tag has a meaning - it says, “This is the main topic of this page” (or something like that - always a source of debate!).
A <font> tag, on the other hand, has no meaning, so it’s not “semantic.” It’s not telling you that the material that follows is a font. It’s telling the browser how to style that content.
There’s a school of thought that says that all HTML tags should be semantic, and that all styling should be done in the CSS. Of course, they immediately carve out huge exceptions for tags like <div> and <span>, which don’t really mean anything, so it’s an ideology that isn’t particularly consistent. 
div and span do have some semantic meaning, if not much. A ‘div’ is a division of a page, a section, if you like. A ‘span’ is a span of text, in other words, a small selection. Those are semantic, by themselves. The problem is that they convey very little meaning because they are so general. Which is why HTML5 has introduced more semantic tags (much to the disgust of certain people on this forum).
ralph.m
This is a handy HTML reference that I found out about recently in another post: HTML 4 Elements
Very good reference, thanks a lot!
EarlyOut
Proper syntax refers to using language elements in the right sequence, combined in correct ways.
You are right I was confused but I really meant all, I thought syntax was part of semantics, sorry.
Any reference for syntax?
One more question.
When talking about SEO what matters the most, syntax or having your elements semantically correct, or both?
My link above deals with syntax, such as what element can be used where.
True in theory, but in practice… 
And let’s face it, the meaning of <span> is usually, “I’m going to apply some styling to this text.”
Yeah, but it’s “I’m going to apply some styling to this span of text”. 
Thank you all!
Run it through The W3C Markup Validation Service and anything that’s syntactically invalid will be thrown back as an error. You’ll soon get used to spotting things, like <p> inside <h1>, that get thrown back!
When talking about SEO what matters the most, syntax or having your elements semantically correct, or both?
Semantics are more important to SEO, as they help googlegod to understand your site. Syntax has many benefits, not least that it makes the appearance and behaviour of your site more predictable on different browsers and platforms, but SEO isn’t one of those - googlegod really couldn’t care less about being the W3’s policeman and enforcing coding rules arbitrarily.
Thanks a lot for your comments.