Skip to content

Latest commit

 

History

History
68 lines (52 loc) · 2.96 KB

html_standards.md

File metadata and controls

68 lines (52 loc) · 2.96 KB
Raw

General

  • Use soft-tabs with a two (or four) space indent. Spaces are the only way to guarantee code renders the same in any person’s environment.
  • Paragraphs of text should always be placed in a

    tag.

  • Break apart paragraphs using additional

    tags (NOT
    ).

  • Items in list form should always be in
      ,
        , or
        . Never use a set of
        or

        .

      1. Even though quotes around attributes is optional, always put quotes around attributes for readability.
      2. Use semantic HTML elements to structure the page, don't use
        everywhere.

    Accessibility

    • Every form input that has text attached must utilize a tag. Especially radio or checkbox elements.
    • Labels can be hidden for design but are necessary for accessibility. Do not rely on placeholder text to label an input.
    • Tab index should be set appropriately if page elements change common sense flow. Always try tabbing through your page at least once to see what happens and if you can access all links, menus, form inputs, and buttons.

    Forms

    Inputs & Labels

    • Inputs should have both id and name
    • Input id and name should be the same value for syncing front end to back end
    • Form element itself can have both id and name
    • Inputs can have multiple label tags
      • Take advantage of this to make additional text more semantic:
    
Password:  
  
*Your password must be at least 8 characters long.
    • Since so many labels are styled separately from their inputs (or hidden), don't nest the input inside of its label:
    
// Yes do this
Password:  


// Don't do this
Password:

    Fieldset

    • Fieldset is quite useful for grouping form elements in a semantic manner, especially if similar input types are on the same screen
    • Include a with , even if is it hidden from view. Screen readers can use it to help users.
    

    Login
    Password:  
    



    Sign Up
    Password:

    References: