CODEWITHSUNDEEP
htmlsemanticsfooter
purpleoctopus
purpleoctopus

Reputation: 107

Is using <footer> inside <form> semantically fine?

I've been looking around to see if you can use footer like this:

<form>
   <input />
   <input />
  <footer>
   <input />
  </footer>
</form>

The way I see it, its meets the spec:

the footer element represents a footer for the section it applies to

Thoughts?

Upvotes: 7

Views: 5278

Answers (4)

Rolf
Rolf

Reputation: 955

No, it's not okay by itself. defines a footer for it's "nearest ancestor sectioning content", and is not that. Sections are created by the section, article, nav and aside elements, and of course the body element creates the base section of the page.

So, putting a footer in a form without a sectioning element in sight, this is semantically a page footer, not a form footer. To create a form footer, you need to include the form content in a section. Then you can use a footer inside of this section.

<form ...>
   <section>
      ... form content
      <footer>
      </footer>
   </section>
</form>

And don't put form controls (input elements, buttons) inside the footer. Footer content is about the section content, not part of the section content.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201818

The semantics is just that <footer> means a footer, leaving it open what a footer is. There is no required or even recommended processing for <footer> elements, except that they should by default be rendered as blocks (which does not happen on all current browsers).

So the answer does not matter; it is just someone’s opinion of what a “footer” is.

On the practical side, if you use <footer>, old versions of IE won’t let you style it, unless you do a JavaScript trick to introduce it (hoping that JavaScript is enabled).

Thus, there is hardly any good reason to prefer <footer> over <div> (or, in some cases, over <p>) with class or id here.

Upvotes: 1

user1088520
user1088520

Reputation:

According to http://dev.w3.org/html5/markup/footer.html

The footer element represents the footer for the section it applies to.

Permitted contents
Flow content

According to http://dev.w3.org/html5/markup/terminology.html#flow-content

flow content
Flow content consists of flow elements intermixed with normal character data

According to http://dev.w3.org/html5/markup/common-models.html#common.elem.flow

7.1. Flow elements
phrasing elements or a or p or hr or pre or ul or ol or dl or div or h1 or h2 or h3 or h4 or h5 or h6 or hgroup or address or blockquote or ins or del or object or map or noscript or section or nav or article or aside or header or footer or video or audio or figure or table or form or fieldset or menu or canvas or details

7.3. Phrasing elements
a or em or strong or small or mark or abbr or dfn or i or b or s or u or code or var or samp or kbd or sup or sub or q or cite or span or bdo or bdi or br or wbr or ins or del or img or embed or object or iframe or map or area or script or noscript or ruby or video or audio or input or textarea or select or button or label or output or datalist or keygen or progress or command or canvas or time or meter

Input is a phrasing element, so yes you can.

There are many online references where

Footers usually/should contain information about it’s containing element.

A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

but the spec is more than that.

Upvotes: 8

Zhihao
Zhihao

Reputation: 14747

Syntactically-speaking, yes you can do that. As far as I can tell, it's still valid HTML.

Semantically-speaking, yes you can still do that if you have reason to (if it makes sense to do it). It's sort of like the new <section> elements in that it's used to identify logical "areas" of your page. I think it's explained pretty well here:

These new elements help [web crawlers] see sites more like people.

You can even go as far as to make multiple footers:

You can have several <footer> elements in one document.

Upvotes: 1

Related Questions