html - Header or Legend? -
i working on admins panel website. pages have header , form below it.
a page looks this:
<div class="page some-page"> <form> <fieldset> ... </fieldset> </form> </div>
i need add header pages , wonder if put <legend>
- or <h1>
so each page header can (using legend):
<div class="page some-page"> <form> <fieldset> <legend>page's header</legend> ... </fieldset> </form> </div>
or (using h1)
<div class="page some-page"> <h1>page's header</h1> <form> <fieldset> ... </fieldset> </form> </div>
or maybe more complicated nested header > h1:
<div class="page some-page"> <header> <h1>page's header</h1> </header> <form> <fieldset> ... </fieldset> </form> </div>
in terms of design , css-ing - same , can styled same..
from html specification - is:
the html – elements represent 6 levels of section headings. highest section level , lowest.
and legend is:
the html element represents caption content of parent .
i asking in terms of "best practices" , html specification.. maybe taste -
how implement header pages?
use <h1>
important heading page.
use <fieldset>
group collection of form fields together. don't use contain entire form. example:
<fieldset> <legend>your name</legend> <label><input> salutation</label><br> <label><input> forename</label><br> <label><input> surname</label> </fieldset> <fieldset> <legend>your address</legend> <label><input> house name or number</label><br> <label><input> street</label><br> <label><input> town</label><br> <label><input> post code</label> </fieldset> <fieldset> <legend>animals like</legend> <label><input type=checkbox> cats</label> <label><input type=checkbox> dogs</label> <label><input type=checkbox> horses</label> </fieldset>
(these not ideal examples of html or how capture names or addresses, demonstrate how use fieldsets).
fields not have go fieldsets. forms not need fieldsets @ all. there when need group collection of fields common label.
Comments
Post a Comment