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

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -