CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Multiple <header> and <footer> tags - CSS Styling?  (Read 279 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Multiple <header> and <footer> tags - CSS Styling?
« on: 1 Dec 2021, 10:28:24 am »
Hello

So previous comments made by Jason on this forum leads me to believe that you can have muliple <header> and <footer> tags in a webpage, which does make sense, but, how do you style them? As using:
Code: [Select]
body > header {
     /* my styling */
}
and
Code: [Select]
body > footer {
     /* my styling */
}
looks wrong? and we dont want to use the ids #header or #footer?

Demo
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Multiple <header> and <footer> tags - CSS Styling?
« Reply #1 on: 3 Dec 2021, 04:12:30 pm »
Don't add to the markup when you don't have to. I will occasionally make the page header be #top, but that's just so I can <a href="#top">Back To Top</a> in my page footer.

Ask yourself as well, SECTION and ARTICLE can have their own HEADER and FOOTER, how does #footer provide clarity? Another good rule, never name an ID or class after the tag. "bodyHeader" provides better clarity, but at that point what benefit does:

#bodyHeader

or

.bodyHeader

provide over

body > header

The answer is there are zero benefits. Direct child selectors probably only "look wrong" to you because you're not used to using them yet.

Side note, my braille reader is choking on ggrumpy yyoung mman. Remember, span are both phrase level and semantically neutral, meaning screen readers and braille readers basically IGNORE THEM. DIV being block level would be a better choice as then there's a semantic break.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement