Html5: using header or footer tag twice?
Absolutely! You can use <header> and <footer> tags multiple times in HTML5 documents, provided they belong to specific semantic sections like <article> or <section>. Your unique header and footer go within each section:
Just remember, one header and footer per section, please! They’re meant to establish the scope of their parent element.
Using multiple headers and footers
Stick multiples of <header> and <footer> elements in your HTML5 code when you're working with:
- Articles: Save a
<header>for the title and a<footer>for authorship, timestamps, and other postscriptum of each article. - Content Sections: Just like sandwiching a chapter—slice of
<header>, yummy text filling, and a slice of<footer>. - Web Components: Slide in a
<header>and<footer>for each UI widget (e.g., tabs, accordions) for that tasty semantic flavor.
Accessibility, meet semantics
HTML structure gets a buff in readability and accessibility with judicious use of <header> and <footer> tags:
- Document Outline: The assistive tech just loves a well-structured soufflé.
- Navigation: Bundle your navigational links into a
<header>. It's like a roadmap for easy site traversing on the accessibility highway.
Best practices and pitfalls
Multiple headers and footers can be a boon, but heed these best practices to avoid a semantic faux pas:
- No showboating: Only use
headerandfooterfor meaningful structure, not as your jazz hat for styling 🎩. - Stay in lane: Each
<header>or<footer>tags along with its nearest sectional parent. - Stay in sync: Keep the structure and content of headers and footers in line across similar sections.
Non-traditional uses
Need to spruce up your HTML5 tags? Why not header and footer for:
- Search away: Envelop the search form at the top of a content section with
header. - Table of Contents: Add pizzazz to your non-heading TOCs—you guessed it—in a
header. - Subsections: Give those
sectionorarticlechunklets their babyheaderandfooter.
Responsiveness to mobile
``headerandfooter` could be your best buddies for a mobile-first web design:
- Hidden menus: Give your off-canvas menus a cozy home inside a
header. - CTA Footers: Those mobile footer widgets housing call-to-action buttons or legal info need their <footer>, like a home coming after a journey.
What else?
Let's pull back the curtain on some behind-the-scenes roles of header and footer:
- Smooooth sailing: Clear headings and closure markers aid users to smoothly sail from shore to shore (read: page sections).
- Tidy content: For the perk of easier managing and updating—keep your content clean and organized with these tags.
Was this article helpful?