-1

I wrote the following code.

<header>page header!</header>
<div class="content">
  <header>content header?</header>
  <footer>content footer?</footer>
</div>
<footer>page footer!</footer>

I read many articles, I know that div elements are meaningless semantically.

If so, where do you belong to the header and footer elements in the div element of the code I wrote?

I am not looking for an alternative to a div element. I want to know if the footer element of the div element functions as the footer of the content in the div element.

Thank you.

  • 2
    Possible duplicate of [HTML5 best practices; section/header/aside/article elements](https://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-elements) – connexo Oct 06 '18 at 08:26

2 Answers2

2

Header and footer elements are related to the nearest ancestor sectioning content element - section, aside, article or nav - or nearest ancestor sectioning root element - blockquote, details, fieldset, td, figure, dialog.

If the header/footer is not a descendent of any of these then it relates to the document as a whole. (the body element is a special case of sectioning root element)

In your example, as div is not a sectioning content or sectioning root, the document as a whole has two headers and two footers.

Steve Pugh
  • 978
  • 9
  • 9
1

Both header and footer can be used to semantically describe the document, or a section in the document.

https://www.w3schools.com/html/html5_semantic_elements.asp

<header>page header!</header>
<section>
  <header>section header</header>
  <footer>section footer</footer>
</section>
<footer>page footer!</footer>
connexo
  • 53,704
  • 14
  • 91
  • 128