Checklist items in category: HTML
A label element is associated with each form input
Guidance from 456 Berea Street, Use the label element to make your HTML forms accessible:
All visible form controls except buttons should have an associated label element (buttons are self-labelling). The label element can be associated with its form control either implicitly or explicitly.
An implicit association is created by putting the form control inside the label element, while an explicit association is created by giving the label element a for attribute with the same value as the form control’s id attribute.
All elements have correct cursor on hover
If something is clickable it should be styled with cursor: pointer so that the user knows they can click on it. An element does not have the proper cursor by default when you make something active with JavaScript and jQuery, and so this is a very common issue.
Flash content has HTML5 fallback
iOS does not support Flash. If you want your site to work on mobile devices, replace Flash with HTML5 or at least include an HTML5 fallback to support that ever-growing group of users.
IDs are unique to a page
IDs must be unique to an HTML document.
Legacy XHTML close tags are removed
They are harmless, but if you’d like to reduce and clean up your code a bit, you can remove XHTML close tags (” />”) from elements.
No class attribute values resemble HTML element names
If a class name you have selected is very similar to an HTML element name, this often indicates that your HTML can be more semantic. Use <footer>I am a footer</footer> instead of <div class=”footer”>I am a footer</div>.
Code such as <h1 class=”largeHeading”>Title</h1> is redundant since h1 means “largeHeading.” A preferable class name would be more specific and indicate how the heading is used. For example, <h1 class=”masthead”>Title</h1>, would indicate both how and where the class is used.
All images have height and width set
Height and width are not officially required attributes for <img>. However, including them guarantees faster content download. That information also helps the browser determine the viewport space for the image, making page rendering visually smoother.
Specific HTML5 input types are used
This is especially important for mobile devices that show customized keypads and widgets for different types.
Element-level styles are minimized
While you may have a good reason to write styles inline using the “style” attribute, generally it is not a good practice. In this case styles are not reusable, too specific, and the code becomes bloated and difficult to maintain. We suggest identifying common styles and including them with a style sheet.