HTML5 tags and CSS sheets

Get Started
1

Hi everyone,
This is probably a really simple question but I just wanted to check something.

If I use a html5 tage like <header> or <section> then in my html I can just put <header> at the start of the div and in css style sheet I can put #header

but if I make up my own div name such as ‘header2’ I have to put <div id="header2> in my html and #header2 in my css sheet.
I’m sort of finding this is the case but just wanted to check I wasn’t missing something.
Sorry for probably a silly question.
Thanks for help
from
Richard

2

Can you go back and edit your post and format the HTML code? This forum allows HTML inline. Select your code and in the editor you are tping in, please click the </> button.

3
Off Topic:

Good advice, Ryan - but in this case, a Bear beat you to it.

1 Like
4

If you want to use the HTML5 <header> element, then in the CSS you would reference it as such

header{}

If you want to use your own ID like <div id="header"> then you reference it as #header{}. Does that make sense?

Doing header{} without any # or . means you are identifying the HTML element header. #header means you are selecting an element with the id=“header”. And .header{} means you are selecting an element with class=“header”

Edit-Ugh @TechnoBear as soon as I reported it, the post got edited. Too fast. People keep bothering me at work asking for stuff.

5

Thanks Ryan and TechnoBear
So just to check I can’t make up my own tags but can only use the defined HTML5 ones
but can make up my own div names and use # or . in my style sheets?

I see what you mean about using the </> button when posting, will do so in future.
Thanks

6

You can technically create your own HTML tags but there is no reason to.

Yes you can create whatever IDs/classes you want. There are some rules though - they cannot start with numbers (e.g. “1element” is invalid.)

Any other questions?

7

Thanks, its starting to become a bit clearer, there probably will be more questions.
I’m going to have a go at doing that webpage from the other day now dividing it up as was suggested and using two column layout.
Thanks for help

1 Like
8

You can actually make up your own tags but its not advised as no one else will know what they are and will have no semantic meaning. If you are using a specification like html5 then use the tags that they present you with as they become the standard that you code to. If you make your own tags up then it is no longer html5 anyway.

You can use your own class names and ids as that’s what they are there for (as long as they don’t start with a digit).

Remember that if you use the new html5 tags then you will need the html5shiv for IE8 support.

9

Thanks Paul, will look into the html5shiv as well then.

10

It’s important to note CSS specificity as well. EVEN if you WERE to make up a tag, say <TAG>

tag {…} carries lest weight than .tag{ …}and much less weight than #tag{…}

As Paul said creating a tag will have NO SEMANTIC meaning. so semantically you gain nothing over using a DIV or a SPAN. One could loosely say that this is the CHIEF difference between HTML and XML, which you has a coder /user defined tags.

11

Thanks for explaining.

12

I moved a post to a new topic: Adding related posts